*{box-sizing:border-box}
html{min-height:100%;background:#f4f4ef}
body{margin:0;color:#005f7c;font-family:Arial,sans-serif}
main{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 28px;gap:32px}
.logo{display:block;width:clamp(170px,20vw,220px);max-width:100%;height:auto}
nav{display:flex;justify-content:center;gap:20px}
nav a{display:grid;place-items:center;width:48px;height:48px;color:inherit;text-decoration:none;font-size:22px;transition:color .2s,transform .2s;border-radius:4px}
nav a:hover{color:#d21820;transform:translateY(-2px)}
nav a:focus-visible{outline:2px solid #d21820;outline-offset:5px}
@media(max-width:480px){main{gap:26px}.logo{width:180px}nav{gap:14px}}
@media(prefers-reduced-motion:reduce){nav a{transition:none}nav a:hover{transform:none}}