@font-face {
    font-family: 'FiraSans';
    font-style: normal;
    font-weight: normal;
    src: local('Fira Sans'), url('/assets/fonts/FiraSans-Regular.ttf');
    font-display: swap;
}

@font-face {
    font-family: 'FiraSans';
    font-style: normal;
    font-weight: bold;

    src: local('Fira Sans Bold'), local('Fira Sans-Bold'),
    url('/assets/fonts/FiraSans-Bold.ttf');
    font-display: swap;
}

@font-face {
    font-family: 'FiraSans';
    font-style: italic;
    font-weight: normal;

    src: local('Fira Sans Italic'), local('Fira Sans-Italic'), 
    url('/assets/fonts/FiraSans-Italic.ttf');
    font-display: swap;
}

:root {
    --bgcolor: #151312;
    --txtcolor: linen; 
    --link-color: #be6b32;
    --link-hovercolor: #c6a967;
    --link-visitedcolor: #872d0c;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    padding-top: clamp(3em, 10vw, 110px);
    display: flex;
    flex-direction: column;
    flex: 100 0 auto;
}

html {
    background-color: var(--bgcolor);
    color: var(--txtcolor);
    font-size: clamp(0px, 2vw, 18px);
    font-family: 'FiraSans';
}

a { color: var(--link-color); }
a:hover { color: var(--link-hovercolor); }
a:visited { color: var(--link-visitedcolor); }
a:visited:hover { color: var(--link-hovercolor); }

p {
    margin-bottom: 0.5em;
}

h1 {
    letter-spacing: -1px;
    font-weight: normal;
    font-family: 'FiraSans';
}

h2 {
    font-weight: normal;
    font-family: 'FiraSans';
}

.hidden, .hidden-once {
    opacity: 0;
    --ttime: 800ms;
    transition: opacity var(--ttime), transform var(--ttime);
}

@media(prefers-reduced-motion) {
    .hidden, .hidden-once {
        transition: none;
    }
}

.show {
    opacity: 1;
}