@font-face {
    font-family: 'Berserk';
    src: url("../Benguiat Normal.otf") format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #141922;
    --panel: #3f495b;
    --panel-soft: #465165;
    --panel-strong: #2f3747;
    --line: rgba(14, 20, 31, 0.48);
    --text: #eef3fb;
    --muted: #c8d2e2;
    --danger-bg: rgba(216, 113, 120, 0.16);
    --danger-text: #ffb8be;
    --accent: #69b7ff;
    --accent-soft: rgba(105, 183, 255, 0.15);
    --overlay: rgba(4, 8, 15, 0.64);
    --cell-hover: #6b7b97;
    --cell-active: #6b7b97;
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.38);
    --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
    font-family: 'Berserk' !important;
}

html {
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

html.page-ready {
    opacity: 1;
    pointer-events: auto;
}

button:focus{
    outline: none !important;
    box-shadow: none !important;
}

html,
body {
    height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: max(40px, 10vh);
}

.site-footer {
    width: 100%;
    margin-top: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5vh;
}

.site-footer-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.18);
}

.site-footer-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: max(12px, 0.75vw);
}

.social-link {
    width: max(40px, 2vw);
    height: max(40px, 2vw);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.08);
}

.social-link-important{
    background: linear-gradient(180deg, #ffe44d 0%, #f5c400 100%);
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.14);
}

.social-link img {
    width: max(20px, 1vw);
    height: max(20px, 1vw);
    object-fit: contain;
}

.site-footer-copy {
    text-align: center;
    color: rgba(220, 229, 242, 0.78);
    font-size: max(12px, 0.75vw);
    line-height: 1.5;
}