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

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

@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: 'Noto Serif', 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;
}