@font-face {
    font-family: Offbit;
    src: url(../fonts/OffBitTrial-DotBold.otf);
}

@font-face {
    font-family: Geist;
    src: url(../fonts/Geist-VariableFont_wght.ttf);
}

:root {
    --dark: #000;
    --light: #ffffff;
    --accent: #E50001; 
}

html, body {
    background-color: var(--accent);
}

footer .footer-item {
    color: var(--light);
}

footer .footer-toogle {
    color: var(--light);
}

@media (width > 1200px) {
    .container-blocks {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 10vw;
    }

    .spacer {
        width: 100vw;
        height: 3vw;
    }

    .block {
        width: 10vw;
        height: 10vw;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .year {
        justify-content: space-around;
        font-family: "Geist";
        font-weight: 400;
        font-size: 60pt;
        color: var(--light);
    }

    .title {
        color: var(--light);
        height: 10vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .title h1 {
        font-size: 20pt;
    }

    .main {
        width: 100vw;
        height: 77vh;
        padding: 2vw;
    }

    .main .text {
        font-family: "Geist";
        font-weight: 300;
        color: var(--light);
        font-size: 16pt;
        width: 50%;
        padding-right: 2.5%;
        height: 65vh;
    }
}


@media (width < 1200px) {
    .container-blocks {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 17vw;
        transform: translateY(7vw);
    }
    .block {
        width: 10vw;
        height: 10vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .year {
        justify-content: space-around;
        font-family: "Geist";
        font-weight: 400;
        font-size: 16pt;
        color: var(--light);
    }

    .title {
        color: var(--light);
        height: 10vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .title h1 {
        font-size: 6pt;
    }

    .main {
        display: flex;
        width: 100vw;
        height: 81vh;
        padding: 2vw;
    }

    .main .text {
        font-family: "Geist";
        font-weight: 300;
        color: var(--light);
        font-size: 12pt;
        width: 100%;
        padding-right: 2.5%;
        height: 100%;
    }
}