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

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

:root {
    /* Colors */
    --main-background: #000000;
    --main-color: #FFFFFF;

    /* Text */
    --main-font-size: 20px;

    /* Fonts */
    --main-font: "SpaceGrotesk";
    --title-font: "Jersey20-Regular";

    /* Borders */
    --border-width: 2px;
    --border-style: solid;
    --border-color: white;
}

* {
    margin: 0;
    border: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--main-font);
    color: var(--main-color);
}

/* *::selection {
    background-color: var(--border-color);
    color: var(--main-background);
} */


body {
    background-color: var(--main-background);
}

main {
    margin: 20px auto;
    gap: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 794px;
}


.main-footer {
    padding: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    border-top: var(--border-width) var(--border-style) var(--border-color);
}

.main-footer-text {
    font-size: var(--main-font-size)
}


@media screen and (min-width: 1066px) {
    main {
        grid-template-columns: repeat(4, 1fr);
        width: 1066px;
    }
}


@media screen and (max-width: 833px) {
    main {
        grid-template-columns: repeat(2, 1fr);
        width: 522px;
    }
}

@media screen and (max-width: 521px) {
    body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    main {
        padding-bottom: 205px;
        grid-template-columns: repeat(1, 1fr);
        width: 250px;
        gap: 195px;
    }

    .main-footer-button {
        display: none;
    }
}

@media screen and (max-width: 428px) {
    main {
        padding-bottom: 155px;
        gap: 155px;
    }
}