.main-body {
    max-width: 100vw;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 5rem;
}

.col-left {
    flex: 0 0 auto;
}

.col-right {
    flex: 1 1 0;
}

p {
    padding-right: 0.5rem;
    font-size: 0.8rem;
    text-align: justify;
    line-height: 1.9rem;
}

span {
    font-size: 0.7rem;
}

main {
    padding: 6rem;
}

img {
    max-height: 60vh;
    border-radius: 20px;
}

figure {
    display: table;
}

figcaption {
    font-family: "Martian Mono", monospace;
    font-size: 0.6rem;
    display: table-caption;
    text-align: center;
    caption-side: bottom;
    line-height: 1rem;
}

video {
    border-radius: 20px;
}

/******************** Circular ABOUT link *******************/

.circle-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.circle-el {
    width: 130px;
    height: 130px;
    display: block;
}

.circle-text {
    font-family: "Martian Mono", monospace;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    fill: #D41D00;
}

.circle-link:hover .circle-text {
    font-style: normal;
}

.circle-spin {
    transform-origin: 50% 50%;
    animation: spinText 18s linear infinite;
}

@keyframes spinText {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/************************** NAV SECTIONS ***********************************/

.about-section {
    align-items: end;
    background: linear-gradient(transparent, rgb(242, 240, 239));
}

.work {
    align-items: start;
    background: linear-gradient(rgb(242, 240, 239), transparent);  
}

/**************************** VIDEO CONTENT *********************************/

.video-section {
    display: flex;
    justify-content: flex-end;
    gap: 5rem;
}

.video-section p {
    padding-bottom: 3rem;
}

/*************************** CV SECTION ************************************/

.exhibition-item {
    display: grid;
    grid-template-columns: 100px 1fr 1fr 150px;
    gap: 2rem 2rem;
    padding: 0.75rem 0;
}

.work-item {
    display: grid;
    grid-template-columns: 200px 1fr 1fr 400px;
    gap: 2rem 2rem;
    padding: 0.75rem 0;
}

.cv-col {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 6rem;
}

.cv-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 90vw;

}

.main-heading {
    padding: 1rem 0;
}

/******************************** FOOTER ***********************************/

.about-website-content {
    border-top: 1px dotted black;
    padding: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 50%;
}
.about-website-content p {
    text-align: center;
}

#typefaces p {
    display: inline;
    padding-bottom: 1em;
}

#copyright {
    padding-bottom: 6em;
    opacity: 50%;
}


/************************* RESPONSIVE DESIGN ************************/

/*------------------ LARGE DEVICES, DESKTOPS ---------------------*/

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

    .main-body,
    .cv-col {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
}

/*--------------------- MEDIUM DEVICES ----------------------------*/

@media only screen and (max-width: 992px) {
    .main-body, .video-section {
        flex-direction: column;
        max-width: 90vw;
        align-items: center;
    }
    .exhibition-item {
        grid-template-columns: 50px 1fr 1fr 200px;
    }
    
    .work-item {
        grid-template-columns: 100px 1fr 1fr 200px;
        font-size: 1rem;
    }
    p {
        font-size: 0.8rem;
    }


    span {
        font-size: 0.8rem;
    }
}

/*------------------ PORTRAIT TABLETS AND LARGE PHONES ------------*/

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

    .main-body {
        max-width: 100vw;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    img {
        max-width: 80vw;
    }

    .exhibition-item {
        grid-template-columns: 50px 1fr 1fr 100px;
    }
    .work-item {
        grid-template-columns: 100px 1fr 1fr 100px;
        align-items: center;
        font-size: 0.7rem;
        line-height: 1.4;
        gap: 1rem 1rem;
    }

    .video-section {
        align-items: center;
    }
}

/*----------------------- PHONES, SMALL DEVICES --------------------*/

@media (max-width: 600px) {
    main {
        padding: 1.5rem;
    }
    .main-body, .cv-col {
        flex-direction: column;
        align-items: center;
    }

    img {
        max-width: 70vw;
        max-height: 80vh;
    }
    
    .exhibition-item {
        grid-template-columns: 30px 70px 90px 60px;
        gap: 1rem;
        justify-content: center;
    }
    .work-item {
        grid-template-columns: 40px 60px 60px 110px;
        gap: 1rem;
        justify-content: center;
    }
    span {
        font-size: 0.6rem;
    }

    .about-circle {
        width: 110px;
        height: 110px;
    }
    .main-heading {
        text-align: center;
    }
}

/*------------------------ DARK THEME ------------------------------*/

@media (prefers-color-scheme: dark) {
    .about-section {
        background: linear-gradient(transparent, rgb(31 31 31));
    }

    .work {
        background: linear-gradient(rgb(31 31 31), transparent);
    }

    .circle-text {
        fill: #d2e300;
    }
}