body{padding:0;font-family:Arial,sans-serif;background-color:#f4f4f4;}
header,nav{display:flex}
.container{width:1100px; margin:0 auto;}
.info-container {display: flex;}
.column {flex: 1;padding-right: 20px;}
img{max-width:100%}
.menu-toggle,.tabs,button{cursor:pointer}
.footer a,.footer p{text-decoration:none;font-size:16px;color:#fff;padding-bottom:15px}
.footer a{display:inline-block;padding:15px}
.footer{list-style:none;text-align:center;background-color:#227003}
.footer li{display:inline}
.result{font-size:25px;color:#227003}
header{background:var(--nav-bg);padding:1rem;position:relative;align-items:center;justify-content:space-between;flex-wrap:wrap}
nav{gap:1rem;flex-grow:1;justify-content:center;order:2}
nav a{text-decoration:none;color:var(--text);padding:.5rem 1rem}
nav a:hover{background:var(--accent);border-radius:5px}
.menu-toggle{font-size:1.8rem;background:0 0;border:none;color:var(--accent);position:absolute;top:1rem;right:1rem;z-index:10;order:3}
p{line-height:1.6}
.menu-toggle{position:absolute;top:1rem;right:1rem}
.label{font-size:18px;font-weight:bold;padding-bottom:10px;color:#056ca1;}
.value{font-size:18px;padding-bottom:10px;}
button {padding: 10px 20px;background: #4a6cf7;color: white;border: none;border-radius: 6px;font-size: 16px;cursor: pointer;transition: 0.25s;}
button:hover {background: #3a59d4;}
input[type="text"] {padding: 10px 15px;border: 1px solid #ccc;border-radius: 6px;font-size: 16px;transition: 0.25s;}
input[type="text"]:focus {border-color: #4a6cf7;outline: none;box-shadow: 0 0 5px rgba(74, 108, 247, 0.4);}
.menu-toggle {
  display: none;
}
.form-container,.results-container,.grid-container{
background:#fff;border:1px solid #ddd;border-radius:6px;padding:20px;box-sizing:border-box}
.header2,.header{text-align:center;padding:10px 0}
.header2 h2,.header h3{margin:0}
.grid-container .row{display:flex;padding:6px 4px;border-bottom:1px solid #eee;min-width:600px}
.grid-container .header-row{display:flex;background:#f7f7f7;font-weight:bold;min-width:600px}
.grid-container .col{flex:1;padding:2px 6px;font-size:14px;white-space:nowrap}
@media(max-width:600px){
.table,h1,h2,p{line-height:35px;width:100%;margin:20px auto;border-collapse:collapse}
.form-container,.results-container,.grid-container{
width:100%;margin:10px 0;padding:10px}
.form-row,.result-row{flex-direction:column;align-items:flex-start}
.form-label,.form-field{width:100%}
.form-label{margin-bottom:4px}
.grid-container{overflow-x:auto}
.grid-container .row,.grid-container .header-row{
flex-direction:row;min-width:600px}
.grid-container .col{width:auto;flex:1 0 100px;padding:2px 4px}
}

@media (max-width:768px){.table,h1,h2,p{line-height:35px;width:100%;margin:20px auto;border-collapse:collapse}
.info-container { flex-direction: column;}
.container{width:100%; margin:0 auto;}
.box400{width:100%;}
.box600{width:100%;}
  .menu-toggle {
    display: block;
  }

  nav {
    flex-direction: column;
    display: none;
    width: 100%;
    margin-top: 3rem;
    padding: 1rem;
    order: 3;
  }

  nav.show {
    display: flex;
    background: var(--nav-bg);
    border-top: 1px solid #ccc;
  }
}