:root {
    --color-bg:#0d4678;
    --text-mobile:#ffffff;
    --text-dim:rgba(255,255,255,.8);
    --maxw:72rem;
    --footer-gap:.6rem;
}

html,body {height:100%}
* {box-sizing:border-box}

body {
    margin:0;
    background-color:var(--color-bg);
    color:var(--text-mobile);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
    line-height:1.5;
    background-image:url('./assets/bg.webp');
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    min-height:100dvh;
    overflow-x:hidden;
}

body.info {
    background-image: none;
}

body.info h1 {
    background-color: var(--color-bg)
}

@media (min-width:768px) {
    body{color: var(--color-bg)}
}

a {color:#e0f3ff}

h1 {
    position:fixed;
    top:0;
    left:0;
    right:0;
    margin:0;
    padding:0;
    text-align:center;
    font-size:20px;
    font-weight:800;
    letter-spacing:.3px;
    color:white;
    z-index:500;
}

main {
    min-height:100dvh;
    display:grid;
    grid-template-rows:1fr;
    place-items:center;
    padding:2rem 1rem;
    max-width:var(--maxw);
    margin-inline:auto;
}

.bots {
    display:grid;
    place-items:center;
    width:100%;
}

.telegram-link {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    animation: pulseShadow 3s infinite;
    transition: transform 0.2s ease;
}

.telegram-link img {
    width: 36px;
    height: 36px;
    display: block;
}

.telegram-link:hover {
    transform: scale(1.1);
}

@keyframes pulseShadow {
    0%   { box-shadow: 0 0 0 0 #e0f3ff; }
    50%  { box-shadow: 0 0 15px 10px #e0f3ff; }
    100% { box-shadow: 0 0 0 0 #e0f3ff; }
}

.text {
    position: fixed;
    bottom: calc(2.2rem + var(--footer-gap));
    left: 0;
    right: 0;
    width: 255px;
    margin: 0 auto;
    text-align: center;
    color: var(--text-dim);
}

footer {
    position:fixed;
    inset-block-end:var(--footer-gap);
    inset-inline:0;
    text-align:center;
    font-size:.85rem;
    color:var(--text-dim);
    padding:0 .75rem;
    z-index:400;
}

.sr-only {
    position:absolute!important;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.menu {
    position:fixed;
    top:0;
    left:3px;
    z-index:1000;
}

.menu > summary {
    list-style:none;
    cursor:pointer;
    outline:none;
}
.menu > summary::-webkit-details-marker{display:none}

.burger {
    display:inline-block;
    position:relative;
    width:40px;
    height:40px;
    border-radius:50%;
}

.burger span {
    position:absolute;
    left:8px;
    right:8px;
    height:2px;
    background:#fff;
    border-radius:2px;
    transition:transform .2s ease, top .2s ease, opacity .2s ease;
}

.burger span:nth-child(1){top:10px}
.burger span:nth-child(2){top:17px}
.burger span:nth-child(3){top:24px}

.menu[open] .burger span:nth-child(1) {
    top:19px;
    transform:rotate(45deg);
}

.menu[open] .burger span:nth-child(2){opacity:0}
.menu[open] .burger span:nth-child(3) {
    top:19px;
    transform:rotate(-45deg);
}

.menu-nav {
    position:fixed;
    top:2.5rem;
    left:.8rem;
    display:flex;
    flex-direction:column;
    gap:.4rem;
    transform:translateX(-120%);
    opacity:0;
    transition:transform .25s ease, opacity .25s ease;
    pointer-events:none;
}

.menu[open] .menu-nav {
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
}

.menu-nav a {
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:1rem;
    letter-spacing:0;
    padding:0 10px;
    border-radius:999px;
    background-color:var(--color-bg);
    border:1px solid rgba(255,255,255,.45);
    text-shadow:0 1px 2px rgba(0,0,0,.35);
    backdrop-filter:none;
}

.menu-nav a:hover,
.menu-nav a:focus-visible {
    background:rgba(255,255,255,.12);
    outline:none;
}

@media (min-width:768px) {
    .menu-nav a {font-size:1.05rem}
}

.page{
    max-width: 56rem;
    margin: 0 auto;
    padding: 1rem 1rem 6rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.page h2{margin-top:1.2rem;font-size:1.15rem}
.page ul{padding-left:1.1rem}
.page li{margin:.25rem 0}