#content{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.verticalSection{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.horizontalSection{
    display: flex;
    flex-direction: column;
    width: 40vw;
    margin-bottom: 50px;
}

.horizontalSection > p{
    font-size: 212x;
    width: 80%;
}

.horizontalSection > ul{
    width: 80%;
}

.gitLink > img{
    width: 40px;
    padding-bottom: 10px;
}

#directXImageOne{
    width: 80%;
}

.horizontalGrid{
    width: 80vw;
    margin-bottom: 50px;
}

#imageGrid{
    display: flex;
    flex-direction: row;
    background-color: #010203;
    overflow: auto;
    white-space: nowrap;
}

#imageGrid > .gridObject{
    display: inline-block;
    padding: 14px;
    width: 500px;
}

.gridText{
    height: 80px;
    width: 450px;
    white-space: initial;
}

#imageGrid > div > .gridImage{
    width: 100%;
}

#imageGrid > div > .gridVideo{
    width: 100%;
}

.gridDescription{
    width: 40%;
}

@media only screen and (max-width: 900px){

    .hover-anim::after{
        width: 10vw;
        width: var(--animSize);
    }

    .verticalSection{
        display: flex;
        flex-direction: column;
    }

    .horizontalSection{
        width: 90%;
        margin-top: 30px;
        align-items: center;
    }

    #directXImageOne{
        width: 60%;
    }

    h3{
        font-size: 20px;
    }

    .gridDescription{
        width: 80%;
    }
}

@media only screen and (max-width: 600px){

    .hover-anim::after{
        width: 10vw;
        width: var(--animSize);
    }

    h3{
        font-size: 18px;
    }

    .gridDescription{
        font-size: 12px;
    }
}