body {
    margin: 0;
    
}

.main-box {
    width: 100%;
    height: 85vh;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-blue-white);
    
}

.main-box__text {
    padding-top: var(--margin--large);
    font-size: var(--text-massive);
    color: var(--color-primary);
    text-align: center;
}

.main-box__link {
    padding-top: var(--margin--large);
    font-size: var(--text-large);
    color: var(--color-link);
    text-align: center;
    text-decoration: none;
    display: block;
}

.main-box__projects {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-column-gap: 5%;
    grid-template-rows: 100%;
    width: 50%;
    aspect-ratio: 3;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--margin--large);
}

.main-box__projects > a {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    overflow: hidden;
    left: 50%;
    top: 50%;
    position: relative;
}

.main-box__projects__food-is-good {
    grid-column: 1 / 2;
    background-image: url("/images/food-is-goodCircle.png");
}

.main-box__projects__block-game {
    grid-column: 2 / 3;
    background-image: url("/images/BlockGameIconCircle.png");
}

.main-box__projects__dashboard {
    grid-column: 3 / 4;
    background-image: url("/images/PersonalDashboard.png");
    background-size: contain !important;
}

.quad-block {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 5%;
    grid-template-rows: 100%;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    height: 45%;
    margin-top: var(--margin--large);


}

.quad-block__section{
    position: relative;
    background: var(--color-blue-white);
    cursor: pointer;
}

.image--default {
    background-repeat: no-repeat;
    background-size: calc(100% + 1px);
    background-position: center;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    overflow: hidden;
    left: 50%;
    top: 50%;
    position: relative;
}


.quad-block img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transform: translate(-50%, -50%);
    height: 40%;
    width: 80%;
    overflow: hidden;
    left: 50%;
    top: 25%;
    margin-bottom: 10%;
    position: relative;
}
.quad-block__text {
    padding-top: var(--margin--small);
    color: var(--color-primary);
    padding-left: 10%;
    padding-right: 10%;
    /*text-align: center;
    transform: translate(-50%, 0);
    color: white;
    text-shadow: 1px 0 0 black, 0 -1px 0 black, 0 1px 0 black, -1px 0 0 black;
    z-index: 1;
    font-size: var(--text-massive); */
}
.quad-block__title {
    color: var(--color-primary);
    padding-left: 10%;
    padding-right: 10%;
    font-weight: bold;
    font-size: var(--text-large);
}

.quad-block__link {
    color: var(--color-link);
    text-decoration: none;
    display: block;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: var(--margin--small);
}

.quad-block__image--1 {
    background-image: url("/images/8.5x11ShortHair2022ReallySmall.png");
}

.quad-block__image--2 {
    background-image: url("/images/Resume.png");
}

.quad-block__image--3 {
    background-image: url("/images/BlockGameIcon.png");
}

.quad-block__image--4 {
    background-image: url("/images/Game.png");
}

@media (max-width: 600px) {
    div.quad-block {
        grid-template-columns: 100%;
        grid-template-rows: repeat(4, 1fr);
        height: fit-content;
        row-gap: 5vh;
    }
    .quad-block__section {
        height: 45vh;
    }

    .main-box {
        width: 85vw;
        height: 55vh;
    }

    .main-box__text {
        font-size: 64px;
    }

    .main-box__projects {
        width: 60vw;
    }
}

.header a.header__index {
    text-decoration: underline;
}