@font-face {
    font-family: 'Google Sans';
    src: url('/Fonts/GoogleSansFlex-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Google Sans';
    src: url('/Fonts/GoogleSansFlex-VariableFont_wght-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('/Fonts/NotoSans-VariableFont_wdth-wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('/Fonts/NotoSans-Italic-VariableFont_wdth-wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

:root {
    --bs-body-font-family: 'Google Sans', sans-serif;
}

.text-secondary, .badge {
    font-family: 'Noto Sans', sans-serif;
}

.thumbs {
    width: 200px;
    height: 200px;
}

@media (max-width: 575.98px) {
    html {
        font-size: 14px;
    }
    .thumb-wrap {
        width: calc(50% - 0.5rem);
    }
    .thumb-wrap .thumbs {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
    }
}

.explode {
    animation: explode 0.5s;
    animation-fill-mode: forwards;
}
@keyframes explode {
    45% {
        transform: scale(2, 2);
    }
    55% {
        transform: scale(2, 2);
    }
}

.carousel.pointer-event {
    touch-action: pan-y pinch-zoom;
}

@keyframes copy-confirm {
    0%   { opacity: 1; }
    60%  { opacity: 1; }
    100% { opacity: 0; }
}

.copy-confirm {
    animation: copy-confirm 1.8s forwards;
}

@keyframes post-enter {
    0%   { max-height: 0;      opacity: 0; overflow: hidden; }
    55%  { max-height: 2000px; opacity: 0; overflow: hidden; }
    100% { max-height: 2000px; opacity: 1; overflow: hidden; }
}

.post-enter {
    animation: post-enter 0.7s ease-out forwards;
}

@keyframes comments-enter {
    0%   { max-height: 0;      opacity: 0; overflow: hidden; }
    55%  { max-height: 2000px; opacity: 0; overflow: hidden; }
    100% { max-height: 2000px; opacity: 1; overflow: hidden; }
}

.comments-enter {
    animation: comments-enter 0.5s ease-out forwards;
}

@keyframes message-enter {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.message-enter,
.comment-enter {
    animation: message-enter 0.3s ease-out forwards;
}