@font-face {
    font-family: Satoshi;
    src: url(../fonts/Satoshi-Variable.ttf) format("truetype")
}

:root {
    --bg-color-1: hsl(199, 66%, 41%);
    --bg-color-2: hsl(184, 84%, 76%);
    --bg-color-3: hsl(204, 100%, 78%);
    --text-color-1: hsl(210, 14%, 95%);
    --text-color-2: hsl(210, 18%, 85%);
    --text-color-3: hsl(208, 23%, 80%);
    --accent-color-1: hsl(193, 20%, 63%);
    --font-family: "Satoshi", sans-serif
}

body {
    background-color: var(--bg-color-1);
    color: var(--text-color-3);
    font-family: var(--font-family);
    margin: 0;
    overflow: hidden
}

.header-image {
    width: 150px;
    height: auto;
    padding-bottom: 20px;
}

.animate-enter {
    opacity: 0;
    animation: enter .5s ease forwards;
    animation-delay: calc(var(--stagger) * .2s)
}

@keyframes enter {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(.8) rotateX(45deg) perspective(1000px)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0) perspective(1000px)
    }
}