#home {
    position: relative;
}

#home > main > section {
    width: 100vw;
}

/* *************
HEADER/INTRODUCTION
************* */

#home > main > section:first-of-type > img {
    position: absolute;
    top: 14em;
    left: 15.5vw;

    border-radius: 20px;
    object-fit: cover;
    object-position: 0% 100%;

    min-width: 12em;
    width: 24vw;
    aspect-ratio: 1 / 1;

    z-index: 10;
}

#home > main > section:first-of-type > div {
    position: absolute;
    top: 4.25em;
    left: 1em;

    border-radius: 100%;

    min-width: calc(37em / 2 - 2em);
    width: calc(25vw * 1.5);
    aspect-ratio: 1 / 1;

    background-color: var(--primary);
    filter: blur(5px);

    z-index: 5;
    /* see animations, bottom of css file */
    animation: home-circle 2s linear infinite;
}

#home h1 {
    position: absolute;
    top: 2.5em;

    width: 100vw;

    text-align: center;

    z-index: 10;
}

#home > main > section:first-of-type > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;

    position: absolute;
    /* img top + img-size / 3 */
    top: calc(14em + (24vw / 3));
    /* img left + img-size + 2em */
    left: calc(12vw + 24vw + 2em);

    width: 30em;

    z-index: 5;
}

#home > main > section:first-of-type > ul li {
    border-radius: 10px;
    padding: 0.4em;

    width: auto;

    font-size: 26px;
    font-weight: bold;
    text-align: center;
    text-transform: lowercase;
    background-color: var(--accent);
}

#home > main > section:first-of-type svg {
    position: absolute;
    /* + width to make sure the entire arrow is always visible */
    right: calc(5vw + 5em);
    top: 85vh;

    width: 5em;

    z-index: 10;
    animation: about-arrow 1.5s ease-in-out alternate infinite;
}

/* *************
ABOUT ME
************* */

#about {
    position: relative;
    /* width intro div / 2 + top position big intro circle */
    margin-top: calc(((25vw * 1.5) / 2) + 4.25em);

    /* 3 paragraphs ( + link) of 45vh + 2 paragraphs margin-top 4em + top #about section */
    height: calc(46vh * 4 + 4em * 2 + 25em);

    background-color: var(--background-opacity);
}

#about section {
    display: grid;
    grid-template-columns: 75% 25%;
    gap: 1em;
    align-items: center;

    position: relative;
    top: 25em;
    left: calc(50% - (100% / 2));

    width: calc(100% - 2em);
    height: 46vh;

    margin: 0 1em 0 1em;

    /* reveal animation */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 2s, transform 2s;
}

#about section:nth-of-type(2) {
    grid-template-columns: 25% 75%;
}

#about section.reveal {
    opacity: 1;
    transform: translateY(0);
}

#about section:not(:first-of-type) {
    margin-top: 4em;
}

/* Image */

#about section > div:first-of-type {
    grid-column-start: 2;
    grid-row-start: 1;
    justify-self: start;
}

#about div > img {
    position: absolute;

    margin: calc(12vw / 4) 0 0 calc(18vw / 2);
    border-radius: 5px;

    min-width: 6em;
    width: 12vw;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

#about div > div {
    border-radius: 100%;

    min-width: 9em;
    width: 18vw;
    aspect-ratio: 1 / 1;

    background-color: var(--text);
    opacity: 0.05;

    z-index: 5;
}

#about section:first-of-type > div:first-of-type img {
    object-position: 0% 10%;
}

/* Text */

#about section > div:last-of-type {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    justify-self: center;

    width: 50vw;
}

#about section:nth-of-type(2) > div:first-of-type {
    grid-column-start: 1;
    justify-self: end;
}

#about section:nth-of-type(2) > div:last-of-type {
    grid-column-start: 2;
}

#about span {
    color: var(--accent);
}

#about a {
    display: block;

    position: relative;
    /* top + margin-top like the other sections */
    top: calc(25em + 8em / 1);
    left: calc(50% - 17em / 2);
    transform: scale(1);

    border-radius: 5px;
    padding: 0.5em;

    /* value has to be given so the link can be centered properly */
    width: 17em;

    font-weight: bold;
    text-align: center;
    color: #000;
    background-color: var(--secondary);

    transition: transform 0.3s ease;
}

#about a:hover {
    transform: scale(1.1);
}

#about a:focus {
    border: 5px solid var(--focus);
    outline: none;
}

/* *************
MY WORK
************* */

#work {
    margin-top: 7.5em;

    /* height of grid + margin-top grid + extra space to account for h2 */
    height: calc(((20em * 1.2) * 2 + 2.5em) + 2em + 3em);

    overflow: visible;

    z-index: 5;
}

#work h2 {
    text-align: center;

    width: 100vw;
}

#work section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 2.5em;
    row-gap: 2.5em;

    position: relative;
    left: calc(50% - ((20em * 1.2) * 2 + 2.5em) / 2);

    margin-top: 2em;

    /* width of two buttons + column gap + extra space for scale */
    width: calc((20em * 1.2) * 2 + 2.5em);
    height: calc((20em * 1.2) * 2 + 2.5em);

    /* reveal animation */
    opacity: 0;
    transform: translateY(5em);
    transition: opacity 2s, transform 2s;
}

#work section.reveal {
    opacity: 1;
    transform: translateY(0);
}

#work section a {
    position: relative;

    justify-self: center;
    align-self: center;

    /* Added display:flex for easier centering */
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    min-width: 12em;
    width: 20vw;
    aspect-ratio: 1 / 1;
}

#work section a:hover {
    transform: scale(1.2);

    outline: solid 5px var(--primary);
}

#work section a:focus {
    transform: scale(1.2);

    outline: solid 5px var(--focus);
}

#work section a img {
    width: 100%;
    aspect-ratio: 1 / 1;
}

#work section a p {
    align-self: flex-end;

    position: absolute;

    padding: 1em 1em 2em 1em;

    width: 100%;

    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

/* *************
CONTACT
************* */

#contact {
    position: relative;
    margin: 7.5em 0 15em 0;

    z-index: 5;
}

#contact h2 {
    width: 100vw;

    text-align: center;
}

#contact ul {
    position: relative;
    left: calc(50% - ((20em * 1.1) / 2));

    width: calc(20em * 1.1);
}

#contact ul li {
    position: relative;
    /* -5em to align with ul, the rest is half op li width minus 50% to properly center it */
    /* left: calc(-5em + (50% - (20em / 2))); */

    margin-top: 2em;

    text-align: center;

    overflow: visible;
}

#contact ul li a {
    display: inline-block;

    border-radius: 10px;
    padding: 1em;

    width: 20em;

    font-weight: bold;
    color: #000;
    background-color: var(--secondary);

    transition: scale 3s ease;
}

#contact ul li a:hover {
    transform: scale(1.1);
}

#contact ul li a:focus {
    outline: solid 5px var(--focus);
}

#contact ul li span {
    display: block;

    font-weight: normal;
    color: #000;
}

/* *************
BACKGROUND CIRCLE
************* */

main > div {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100vw;
    height: calc(50em + 15em);

    overflow: hidden;

    z-index: -1;
}

main > div > div {
    position: absolute;
    top: 1em;
    left: calc(50% - 175vw / 2);

    border-radius: 100%;

    width: 175vw;
    aspect-ratio: 1 / 1;

    background-color: var(--background-opacity);
    filter: blur(2.5px);

    z-index: -1;
    animation: home-circle 2s linear infinite;
}

/* *************
ANIMATIONS
************* */

@keyframes home-circle {
    0% {
        border-radius: 51% 48% 51% 48%;

        filter: blur(5px);
        transform: scale(1);
        transform: rotateZ(0deg);
    }
    25% {
        border-radius: 48% 51% 48% 51%;

        transform: scale(0.95);
        filter: blur(6px);
    }
    50% {
        border-radius: 51% 48% 51% 48%;

        filter: blur(7px);
    }
    75% {
        border-radius: 48% 51% 48% 51%;
    }
    100% {
        border-radius: 51% 48% 51% 48%;

        filter: blur(5px);
        transform: rotateZ(360deg);
    }
}

@keyframes about-arrow {
    0% {
        transform: translate(100%, 0em);
    }
    100% {
        transform: translate(100%, 1em);
    }
}

/* *************
MEDIA QUERIES
************* */

/* @media screen and (max-width: 96em) {
} */

@media screen and (max-width: 67em) {
    /* *************
    HEADER/INTRODUCTION
    ************* */

    #home > main > section:first-of-type > img {
        top: 12em;
        left: calc(50% - (12em / 2));
    }

    #home > main > section:first-of-type > div {
        left: calc(50% - (37em / 2 - 2em) / 2);
    }

    #home > main > section:first-of-type > ul {
        gap: 1.5em;

        /* img top + img-size / 3 - gap */
        top: calc(12em * 2 + (12em / 3) - 1.5em);
        left: calc(50% - (100vw - 2em) / 2);

        width: calc(100vw - 2em);
    }

    #home > main > section:first-of-type > ul li {
        font-size: 22px;
    }

    #home > main > section:first-of-type svg {
        right: 4em;
    }

    /* *************
    ABOUT ME
    ************* */

    #about {
        /* width intro div / 2 + top position big intro circle */
        margin-top: calc(((37em / 2 - 2em) / 2) + 4.25em);

        height: calc(90vh * 3 + 25em * 2);
    }

    #about section {
        grid-template-columns: 1fr;
        grid-template-rows:
            calc(9em + (9em / 3))
            1fr;
        align-items: start;

        height: 90vh;
    }

    #about section:nth-of-type(2) {
        grid-template-columns: 1fr;
    }

    /* Image */

    #about section > div:first-of-type {
        grid-column-start: 1;
        grid-row-start: 1;
        justify-self: center;
    }

    #about div > img {
        position: relative;

        min-width: 9em;
    }

    #about div > div {
        position: absolute;
        top: 0;

        margin: calc(9em / 3) 0 0 calc(9em / 3);
    }

    /* Text */

    #about section > div:last-of-type {
        grid-row-start: 2;
        justify-self: center;

        width: 100%;
        max-width: 20em;
    }

    #about section:nth-of-type(2) > div:first-of-type {
        justify-self: center;
    }

    #about section:nth-of-type(2) > div:last-of-type {
        grid-column-start: 1;
    }

    #about span {
        font-size: 18px;
    }

    /* *************
    MY WORK
    ************* */

    #work {
        /* height of grid + margin-top grid + extra space to account for h2 */
        height: calc(((16em * 1.2) * 4 + 2.5em) + 2em + 3em);
    }

    #work section {
        grid-template-columns: 1fr;
        grid-template-rows: auto;

        left: 0;

        width: 100vw;
        height: calc((16em * 1.2) * 4 + 2.5em);
    }

    /* *************
    CONTACT
    ************* */

    #contact ul {
        left: calc(50% - ((15em * 1.1) / 2));

        width: calc(15em * 1.1);
    }

    #contact ul li a {
        width: 15em;
    }

    /* *************
    BACKGROUND CIRCLE
    ************* */

    main > div {
        height: calc(65em + 15em);
    }

    main > div > div {
        left: calc(50% - 500vw / 2);

        border-radius: 100%;

        width: 500vw;
    }
}

@media screen and (max-width: 27em) {
    #about a {
        left: calc(50% - 75vw / 2);

        width: 75vw;
    }
}