main {
    background-color: rgb(32, 32, 32);
    color: rgb(240, 240, 240);
    min-height: calc(100vh - 4rem);
}

.link-tree {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    padding-left: 7.5%;
}

.link-tree-a,
.link-tree a:link,
.link-tree a:visited,
.link-tree a:active {
    color: rgb(240, 240, 240);
}

.link-tree a:hover {
    color: rgb(185, 94, 231)
}

.content {
    display: grid;
    grid-template: repeat(4, 1fr) / repeat(4, 1fr);
    gap: 1rem 2rem;
    width: 99%;
    margin-top: 4rem;
}

.content h1 {
    grid-area: 1 / 1 / span 1 / span 2;
    font-family: 'Hepta Slab', serif;
    font-size: 3.8rem;
    padding: 0 2rem;
}

.content p {
    grid-area: 2 / 1 / span 3 / span 2;
    padding: 0 2rem;
    font-family: 'Cormorant Upright', serif;
    font-size: 2rem;
}

.content .img-container {
    grid-area: 1 / 3 / span 2 / span 2;
    display: flex;
    width: 90%;
    aspect-ratio: 16/9;
}

.content .img-container .chess-gif {
    width: 100%;
    height: 100%;
}

.content .img-container-two {
    grid-area: 3 / 3 / span 2 / span 2;
    display: flex;
    width: 90%;
    aspect-ratio: 16/9;
}

.content .img-container-two .chess-photo {
    width: 100%;
    height: 100%;
}

/* MEDIA QUERIES */

/* Mobile devices */
@media (max-width: 767px) {
    .content {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .content h1,
    .content p,
    .content .img-container,
    .content .img-container-two {
        padding: 3rem 0;
    }

    .content h1 {
        text-align: center;
    }

    .link-tree {
        font-size: 2.5rem;
    }

    .content p {
        font-size: 5rem;
        padding: 0 2rem;
    }

}