*,:before,:after{box-sizing:border-box}*{box-sizing:border-box;margin:0;padding:0;font-family:Comic Sans MS,sans-serif}:root{--primary:oklch(62.9% .148 276.064);--secondary:oklch(71.9% .114 210.576/.26)}.site-header{background:var(--primary);color:#fff;justify-content:space-between;align-items:center;padding:1rem 5rem;display:flex}.logo{align-items:center;gap:10px;margin:0;font-size:18px;font-weight:700;display:flex}.logo img{object-fit:contain;width:28px;height:28px}.nav{gap:1rem;display:flex}.nav a{color:#fff;text-decoration:none}.nav a:hover{text-decoration:underline}main{padding:1rem 15rem}hr{margin-block:1.5rem}.intro h2{padding-block:1rem}.cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem;display:grid}.card{border:1px solid var(--primary);background:#4c7bd62e;border-radius:8px;padding:1rem;transition:transform .2s,box-shadow .2s}.card:hover,.card:focus-visible{transform:translateY(-6px);box-shadow:0 10px 20px #0000001f}.card h3{margin-bottom:.5rem}@media (width<=600px){.site-header{flex-wrap:wrap;gap:10px}main{padding:1rem 2rem}}.weather-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1rem;margin-top:1rem;display:grid}.weather-day{border:1px solid var(--primary);background:var(--secondary);text-align:center;border-radius:10px;padding:1rem}.weather-day h3{margin-bottom:.5rem;font-size:1rem}.weather-day p{margin:.2rem 0}.detail h1{margin-bottom:1rem}