.box-sizing-reset,html,body{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
html,body{height:100%;margin:0}
.box-sizing-reset,html,body{box-sizing:border-box}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;position:relative;background:#a3c1cc;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#102a43;padding:2vh}
.center-block{transform:translateY(-15%);display:flex;flex-direction:column;align-items:center}
.logo-area{display:flex;align-items:center;justify-content:center;margin:0}
.logo{width:240px;height:auto;max-width:80vw}
.flags-area{display:flex;align-items:center;justify-content:center;width:100%;margin-top:1.6rem}
.flags{display:flex;gap:18px;flex-wrap:nowrap;justify-content:center;align-items:center}
.flag-btn{background:transparent;border:0;padding:6px;border-radius:8px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.flag-btn:focus{outline:2px solid #fff;transform:translateY(-2px)}
.flag{width:56px;height:36px;display:block;overflow:hidden;border-radius:4px}
.flag svg{display:block;width:100%;height:auto}
.caption{font-size:12px;text-align:center;margin-top:6px;color:#062b3a}
.container{display:flex;flex-direction:column;align-items:center}
@media(min-width:700px){.logo{width:260px}.flag{width:72px;height:48px}}

@media (max-width:600px) {
	.center-block { transform: translateY(-5%); }
	.logo { width: 38vw; min-width: 90px; max-width: 160px; }
	.flags { flex-wrap: wrap; gap: 10px; }
	.flag { width: 38px; height: 24px; }
	.caption { font-size: 10px; }
	.site-footer { font-size: 10px; }
}

.site-footer{position:fixed;left:50%;transform:translateX(-50%);bottom:8px;font-size:11px;color:#062b3a;opacity:0.9}