@font-face {
    font-family: 'Friz Quadrata';
    src: url(/fonts/friz-quadrata/friz-quadrata-regular-os-5870333951e7c.ttf) format('truetype');
}  

@font-face {
    font-family: 'Saira';
    src: url(/fonts/Saira/Saira-VariableFont_wdth\,wght.ttf) format('truetype');
}  

@font-face {
    font-family: 'ZillaSlab Bold';
    src: url(/fonts/Zilla_Slab/ZillaSlab-Bold.ttf) format('truetype');
}  

@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    background-color: #03090d;
    color: #fff;
    font-family: 'Friz Quadrata';
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

h1 {
    text-align: center;
    margin: 0;
    padding: 2rem;
    font-size: 4rem;
}

#focus-highlight {
    display: block;
    margin: auto;
    height: 50vmin;
}

#thumbnails-wrapper {
    margin: 0 1rem;
    display: block;
    display: flex; 
    flex-wrap: nowrap;
    justify-content: space-around;
    overflow-x: auto;
    gap: 2rem;
    height: 20%;
}

#thumbnails-wrapper::-webkit-scrollbar {
    width: 14px;
}

#thumbnails-wrapper::-webkit-scrollbar-track {
    background-color: transparent;
}

#thumbnails-wrapper::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

#thumbnails-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #888;
}

#thumbnails-wrapper img {
    height: 80%;
}

#thumbnails-wrapper img:hover {
    cursor: pointer;
}

@media (max-width: 800px) {
    h1 {
        font-size: 2rem;
    }
}