* {
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

:root {
    --knight-purple: #543884;
    --bright-pink: #EC4176;
    --turmeric: #FFA45E;
    --bright-lav: #9A77CF;
    --pale-purple: #F9F9FF;
    --trans-purple: 154, 119, 207;

    --navbar-height: 0px;
}

html {
    background-color: white;
    width: 100%;
    overflow-x: hidden;
}

@font-face {
    font-family: 'Brandon Text';
    font-style: normal;
    src: url(/assets/fonts/BTRegular.woff);
}
@font-face {
    font-family: 'Brandon Text';
    font-style: italic;
    src: url(/assets/fonts/BTItalic.woff);
}
@font-face {
    font-family: 'Brandon Text';
    font-style: normal;
    font-weight: bold;
    src: url(/assets/fonts/BTBold.woff);
}

body {
    top: var(--navbar-height);
    font-family: 'Brandon Text', sans-serif;
    font-weight: normal;
    color: #5a5a5a;
    font-size: 1.1em;
}

h1, h2, h3 {
    font-family: "Averia Serif Libre", serif;
    font-weight: 300;
    color: var(--knight-purple);
    letter-spacing: 0.03em;
}

h1 {
    font-style: normal;
}

h4 {
    font-family: 'Brandon Text', sans-serif;
    font-size: 0.9em;
    font-weight: bold;
    color: var(--bright-lav);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ANIMATIONS */

@keyframes floatUpDown {
    0%, 100% {
        transform: var(--scale, scale(1)) translateY(0);
    }
    50% {
        transform: var(--scale, scale(1)) translateY(-40px);
    }
}

@keyframes floatSideSide {
    0%, 100% {
        transform: var(--scale, scale(1)) translateX(0);
    }
    50% {
        transform: var(--scale, scale(1)) translateX(-40px);
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 899px) {
    h1 {
        font-size: 3em;
    }
    p, li, button, div {
        font-size: 0.85rem;
    }
}
@media (min-width: 900px) {    
    h1 {
        font-size: 3.25em;
    }
    h3 {
        font-size: 1.75em;
    }
}