/**********************************************************************************/
/* Copyright (c) 2025 Matthew Thomas Beck                                         */
/*                                                                                */
/* All rights reserved. This code and its associated files may not be reproduced, */
/* modified, distributed, or otherwise used, in part or in whole, by any person   */
/* or entity without the express written permission of the copyright holder,      */
/* Matthew Thomas Beck.                                                           */
/**********************************************************************************/





/******************************************************/
/*************** MODIFY GLOBAL ELEMENTS ***************/
/******************************************************/


/********** CUSTOM ELEMENTS **********/

.parentDiv {

    height: 100vh;
}

.childDiv {

    margin-top: 0;
    margin-bottom: 0;
}





/**************************************************************************/
/*************** machine_learning_portfolio.html ANIMATIONS ***************/
/**************************************************************************/


/********** PORTRAIT SLIDESHOW ANIMATION **********/

/***** portrait slideshow classes *****/

.slide { /* used to hide portrait until correct turn */

    display: none;
    overflow: hidden;
}

/***** fade in name keyframes *****/

@keyframes colorChangeName {

    0% {

        color: transparent;
    }

    100% {

        opacity: var(--pastel-1);
    }
}

@keyframes colorChangeAaedName {

    0% {

        opacity: 0;
        color: transparent;
        transform: translateY(20px);
    }

    100% {

        opacity: 1;
        color: var(--pastel-5);
        transform: translateY(0);
    }
}

/***** fade in name classes *****/

.fadeInName { /* used exclusively for name */

    animation: fadeIn var(--fadeInDuration) var(--fadeInDelay) ease-out forwards, colorChangeName var(--fadeInDuration) var(--fadeInDelay) forwards;
}

.fadeInAaedName {

    animation: fadeIn var(--fadeInDuration) var(--fadeInDelay) ease-out forwards, colorChangeAaedName var(--fadeInDuration) var(--fadeInDelay) forwards;
}





/**********************************************************/
/*************** index.html CUSTOM ELEMENTS ***************/
/**********************************************************/


/********** FIRST ELEMENT **********/

.firstElement {

    /*margin-top: var(--navBarHeight); DO NOT REMOVE FOR LEGACY PURPOSES*/
    padding: 1.57%;
}


/********** INTRODUCTION **********/

#myIntroduction {

    height: 100vh;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--primary);
}

#aboutMeBox {

    border-radius: 0;
    position: absolute;
    z-index: 2;
    background-color: var(--secondary);
}

#aboutMeHeaderBox {

    height: auto;
    margin-top: auto;
    margin-bottom: auto;
}

#aboutMeBodyBox {

    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

#name {

    opacity: 0;
}

#portraitBox {

    position: absolute;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#portrait1 {

    display: block;
    align-self: center;
    overflow: hidden;
    height: 100%;
    aspect-ratio: 1/1;
    background-color: var(--pastel-1);
}

#portrait2 {

    align-self: center;
    overflow: hidden;
    height: 100%;
    aspect-ratio: 1/1;
    background-color: var(--pastel-2);
}

#portrait3 {

    align-self: center;
    overflow: hidden;
    height: 100%;
    aspect-ratio: 1/1;
    background-color: var(--pastel-3);
}

#portrait4 {

    align-self: center;
    overflow: hidden;
    height: 100%;
    aspect-ratio: 1/1;
    background-color: var(--pastel-4);
}


/********** SKILLS **********/

/***** cascade animation keyframes *****/

@keyframes skillRipple {
    0% {
        transform: scale(1);
        background-color: var(--secondary);
        opacity: 1;
    }
    50% {
        transform: scale(1.04);
        background-color: var(--cascade-color, var(--pastel-1));
        opacity: 1;
    }
    100% {
        transform: scale(1);
        background-color: var(--secondary);
        opacity: 1;
    }
}

@keyframes skillIconRipple {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.075) rotate(4deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes skillTextRipple {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(4px);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes clickRipple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.skills {

    background-color: var(--secondary);
    width: 100%;
    margin-left: 1.25%;
    margin-right: 1.25%;
    opacity: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    transition: transform var(--timeInterval) ease-out, box-shadow var(--timeInterval) ease-out;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.skills:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.skills:active {
    transform: scale(0.98);
}

.skills.cascade-animating {
    animation: skillRipple 1.2s ease-out forwards;
    opacity: 1 !important;
}

.skills.ripple-complete {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}

.skills.ripple-complete.fadeIn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.skills .ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: clickRipple 0.6s linear;
    pointer-events: none;
}

.skillsIcon {

    aspect-ratio: 1/1;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 7px;
    margin-right: 0;
    height: 80%;
    transition: transform var(--timeInterval) ease-out;
}

.skillsIcon.cascade-animating {
    animation: skillIconRipple 1.2s ease-out forwards;
}

.skillsBody {

    color: white;
    width: 70%;
    margin: auto;
    transition: transform var(--timeInterval) ease-out;
}

.skillsBody.cascade-animating {
    animation: skillTextRipple 1.2s ease-out forwards;
}

#skillSetHeaderBox {

    text-align: center;
}


/********** PROJECTS **********/

#myProjects {

    height: 100vh;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--primary);
}

#projectsBackground {

    top: 200vh;
    background-color: var(--pastel-5);
    position: absolute;
    z-index: 1;
}

#projectsArrowLeftBox {

    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
}

#projectsArrowRightBox {

    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
}

#projectsArrowLeft {

    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1/1;
    height: 50px;
    opacity: 0;
}

#projectsArrowRight {

    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1/1;
    height: 50px;
    opacity: 0;
}

#projectsWheel {

    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: scroll;
    overflow-y: hidden;
    left: 0;
}

.projects {

    text-align: center;
    aspect-ratio: 1/1;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 8;
    opacity: 0;
}

.projectHeaders {

    color: white;
    text-align: center;
}

.projectImg {

    margin: auto;
    aspect-ratio: 1/1;
}

#projectsLastItem {

    margin-right: 27%;
}

#projectsGlitchItem {

    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: .01%;
    height: 100%;
    z-index: 8;
}

#projectsInfoBackground {

    right: 0;
    height: 100vh;
    width: 21.25%;
    background-color: var(--primary);
    position: absolute;
    z-index: 7;
}

#projectsInfoBox {

    background-color: var(--secondary);
    position: absolute;
    margin-bottom: calc(9% + var(--navBarHeight));
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#projectsInfoHeaderBox {

    text-align: center;
}

#projectsInfoHeader {

    color: white;
}

#projectsInfoNameBox {

    width: 90%;
}

#projectsInfoName {

    text-align: center;
    color: transparent;
}

#projectsInfoBodyBox {

    width: 85%;
    margin-left: 7.5%;
    margin-right: 7.5%;
}

#projectsInfoBody {

    color: transparent;
}

#athenaTag {

    color: var(--pastel-2);
    font-size: 100%;
}

#aaedMusaNameBoxLarge {

    text-align: center;
    font-size: 130%;
}

#aaedMusaNameLarge {

    opacity: 0;
    color: var(--pastel-5);
    text-decoration: none;
}

#aaedMusaNameBox {

    z-index: 11;
    text-align: center;
    font-size: 130%;
}

#aaedMusaName {

    opacity: 0;
    color: var(--pastel-5);
    text-decoration: none;
}


/********** EXPERIENCE **********/

.experiences {

    background-color: var(--secondary);
    width: 100%;
    margin-left: 1.25%;
    margin-right: 1.25%;
    opacity: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    transition: transform var(--timeInterval) ease-out, box-shadow var(--timeInterval) ease-out;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.experiences:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.experiences:active {
    transform: scale(0.98);
}

.experiences.cascade-animating {
    animation: skillRipple 1.2s ease-out forwards;
    opacity: 1 !important;
}

.experiences.ripple-complete {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}

.experiences.ripple-complete.fadeIn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.experiences .ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: clickRipple 0.6s linear;
    pointer-events: none;
}

.experiencesIcon {

    aspect-ratio: 1/1;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 7px;
    margin-right: 0;
    height: 80%;
    transition: transform var(--timeInterval) ease-out;
}

.experiencesIcon.cascade-animating {
    animation: skillIconRipple 1.2s ease-out forwards;
}

.experiencesBody {

    color: white;
    width: 70%;
    margin: auto;
    transition: transform var(--timeInterval) ease-out;
}

.experiencesBody.cascade-animating {
    animation: skillTextRipple 1.2s ease-out forwards;
}

#experiencesHeaderBox {

    text-align: center;
}


/********** VIDEOS **********/

#myVideos {

    height: 100vh;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--primary);
}

#videosBackground {

    top: 400vh;
    background-color: var(--pastel-6);
    position: absolute;
    z-index: 1;
}

#videosArrowLeftBox {

    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
}

#videosArrowRightBox {

    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
}

#videosArrowLeft {

    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1/1;
    height: 50px;
    opacity: 0;
}

#videosArrowRight {

    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1/1;
    height: 50px;
    opacity: 0;
}

#videosWheel {

    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: scroll;
    overflow-y: hidden;
    right: 0;
}

.videos {

    text-align: center;
    aspect-ratio: 1/1;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 8;
    opacity: 0;
}

.videoHeaders {

    color: white;
    text-align: center;
}

.videoImg {

    margin: auto;
}

#video3 {

    width: 70%;
    aspect-ratio: 1/1;
}

#videosLastItem {

    margin-right: 27%;
}

#videosGlitchItem {

    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: .01%;
    height: 100%;
    z-index: 8;
}

#videosInfoBackground {

    left: 0;
    height: 100vh;
    width: 21.25%;
    background-color: var(--primary);
    position: absolute;
    z-index: 7;
}

#videosInfoBox {

    background-color: var(--secondary);
    position: absolute;
    margin-bottom: calc(9% + var(--navBarHeight));
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#videosInfoHeaderBox {

    text-align: center;
}

#videosInfoHeader {

    color: white;
}

#videosInfoNameBox {

    width: 90%;
}

#videosInfoName {

    text-align: center;
    color: transparent;
}

#videosInfoBodyBox {

    width: 85%;
    margin-left: 7.5%;
    margin-right: 7.5%;
}

#videosInfoBody {

    color: transparent;
}

#video1 {

    color: var(--pastel-2);
    font-size: 100%;
}


/********** CONTACT ME **********/

.contacts {

    background-color: var(--secondary);
    width: 100%;
    margin-left: 1.25%;
    margin-right: 1.25%;
    opacity: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    transition: transform var(--timeInterval) ease-out, box-shadow var(--timeInterval) ease-out;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.contacts:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.contacts:active {
    transform: scale(0.98);
}

.contacts.pop-animating {
    animation: contactPop 1.2s ease-out forwards;
    opacity: 1 !important;
}

.contacts.pop-complete {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}

.contacts.pop-complete.fadeIn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.contacts .ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: clickRipple 0.6s linear;
    pointer-events: none;
}

.contactsIcon {

    aspect-ratio: 1/1;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 13px;
    margin-right: 0;
    height: 80%;
    transition: transform var(--timeInterval) ease-out;
}

.contactsIcon.pop-animating {
    animation: contactIconPop 1.2s ease-out forwards;
}

.contactsBody {

    color: white;
    text-align: center;
    width: 70%;
    margin: auto;
    transition: transform var(--timeInterval) ease-out;
}

.contactsBody.pop-animating {
    animation: contactTextPop 1.2s ease-out forwards;
}

#contactMeHeaderBox {

    text-align: center;
}

@keyframes contactPop {
    0% {
        transform: scale(1);
        background-color: var(--secondary);
        opacity: 1;
    }
    50% {
        transform: scale(1.04);
        background-color: var(--cascade-color, var(--pastel-1));
        opacity: 1;
    }
    100% {
        transform: scale(1);
        background-color: var(--secondary);
        opacity: 1;
    }
}

@keyframes contactIconPop {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.075) rotate(4deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes contactTextPop {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(4px);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.skillsBody, .experiencesBody {
    color: white !important;
}


/*********************************************/
/*************** DEVICE SIZING ***************/
/*********************************************/


/********** LARGE DEVICES **********/

@media only screen and (min-width: 1025px) { /* detect if screen is desktop */

    /***** introduction *****/

    #myIntroduction {

        flex-direction: row;
    }

    #portraitBox {

        aspect-ratio: 1/1;
        right: 0;
        height: 100vh;
    }

    #aboutMeBox {

        height: 60%;
        width: 50%;
        margin-left: 2.5%;
    }

    #aboutMeHeaderBox {

        margin-left: 5%;
        margin-right: auto;
        width: 460px;
    }

    /***** skills *****/

    .skills {

        margin-top: 0.75%;
        height: 12%;
    }

    #skillSetHeaderBox {

        height: auto;
        width: 670px;
    }

    /***** projects *****/

    #myProjects {

        flex-direction: row;
    }

    #projectsBackground {

        left: 0;
        height: 100vh;
        width: 78.75%;
    }

    #projectsArrowLeftBox {

        font-size: 100%;
        left: 8vw;
        height: calc(var(--navBarHeight) * 2);
        width: calc(var(--navBarHeight) * 2);
    }

    #projectsArrowRightBox {

        font-size: 100%;
        right: 40vw;
        height: calc(var(--navBarHeight) * 2);
        width: calc(var(--navBarHeight) * 2);
    }

    #projectsInfoBackground {

        display: block;
    }

    #projectsWheel {

        margin-top: 3%;
        z-index: 7;
        height: 100vh;
        width: 78.75%;
    }

    .projects {

        width: 50%;
        margin-left: 18%;
        margin-right: 32%;
    }

    .projectImg {

        height: 70%;
        margin-top: 15%;
        margin-left: 15%;
        margin-right: 15%;
    }

    #projectsInfoHeader {

        font-size: 130%;
    }

    #projectsInfoName {

        margin-top: 10%;
        margin-left: 5%;
        margin-right: 5%;
    }

    #aaedMusaNameBoxLarge {

        display: block;
    }

    #aaedMusaNameBox {

        display: none;
    }

    #projectsInfoBox {

        margin-right: 2.5%;
        right: 0;
        height: 75%;
        width: 375px;
    }

    /***** experiences *****/

    .experiences {

        margin-top: 0.75%;
        height: 12%;
    }

    #experiencesHeaderBox {

        height: auto;
        width: 540px;
    }

    /***** videos *****/

    #myVideos {

        flex-direction: row;
    }

    #videosBackground {

        right: 0;
        height: 100vh;
        width: 78.75%;
    }

    #videosArrowLeftBox {

        font-size: 100%;
        left: 40vw;
        height: calc(var(--navBarHeight) * 2);
        width: calc(var(--navBarHeight) * 2);
    }

    #videosArrowRightBox {

        font-size: 100%;
        right: 8vw;
        height: calc(var(--navBarHeight) * 2);
        width: calc(var(--navBarHeight) * 2);
    }

    #videosInfoBackground {

        display: block;
    }

    #videosWheel {

        margin-top: 3%;
        z-index: 7;
        height: 100vh;
        width: 78.75%;
    }

    .videos {

        width: 50%;
        margin-left: 32%;
        margin-right: 18%;
    }

    .videoImg {

        height: 70%;
        margin-top: 15%;
        margin-left: 15%;
        margin-right: 15%;
    }

    #videosInfoHeader {

        font-size: 130%;
    }

    #videosInfoName {

        margin-top: 10%;
        margin-left: 5%;
        margin-right: 5%;
    }

    #videosInfoBox {

        margin-left: 2.5%;
        left: 0;
        height: 75%;
        width: 375px;
    }

    /***** contact me *****/

    #contactMeHeaderBox {

        height: auto;
        width: 460px;
    }

    .contacts {

        height: 17%;
        margin-top: 0.75%;
    }
}


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

@media only screen and (min-width: 501px) and (max-width: 1024px) { /* detect if screen is tablet */

    /***** introduction *****/

    #myIntroduction {

        flex-direction: column-reverse;
    }

    #portraitBox {

        top: 0;
        width: 100vw;
        aspect-ratio: 1/1;
    }

    #aboutMeBox {

        height: 45%;
        width: 90%;
        margin: 2.5%
    }

    #aboutMeHeaderBox {

        margin-left: 5%;
        margin-right: auto;
        width: 345px;
    }

    /***** skills *****/

    .skills {

        margin-top: 1%;
        height: 13%;
    }

    #skillSetHeaderBox {

        height: auto;
        width: 460px;
        font-size: 90%;
    }

    /***** projects *****/

    #myProjects {

        flex-direction: column-reverse;
    }

    #projectsBackground {

        width: 100vw;
        height: 70%;
        margin-bottom: 30vh;
    }

    #projectsArrowLeftBox {

        font-size: 100%;
        left: calc(2.5% + 20px);
        margin-bottom: 63vh;
        height: calc(var(--navBarHeight) * 2);
        width: calc(var(--navBarHeight) * 2);
    }

    #projectsArrowRightBox {

        font-size: 100%;
        right: calc(2.5% + 20px);
        margin-bottom: 63vh;
        height: calc(var(--navBarHeight) * 2);
        width: calc(var(--navBarHeight) * 2);
    }

    #projectsInfoBackground {

        display: none;
    }

    #projectsWheel {

        z-index: 10;
        height: 100vh;
        width: 100%;
    }

    .projects {

        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        margin-bottom: 50%;
    }

    .projectHeaders {

        height: 10%;
        font-size: 200%;
    }

    .projectImg {

        height: 65%;
    }

    #projectsInfoHeader {

        font-size: 95%;
    }

    #projectsInfoHeaderBox {

        font-size: 150%;
    }

    #projectsInfoName {

        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
    }

    #aaedMusaNameBoxLarge {

        display: none;
    }

    #aaedMusaNameBox {

        margin-bottom: 15%;
    }

    #projectsInfoBox {

        height: 40%;
        width: 90%;
        margin: 2.5%;
    }

    /***** experiences *****/

    .experiences {

        margin-top: 1%;
        height: 14%;
    }

    #experiencesHeaderBox {

        height: auto;
        width: 365px;
        font-size: 90%;
    }

    /***** videos *****/

    #myVideos {

        flex-direction: column-reverse;
    }

    #videosBackground {

        width: 100vw;
        height: 70%;
        margin-bottom: 30vh;
    }

    #videosArrowLeftBox {

        font-size: 100%;
        left: calc(2.5% + 20px);
        margin-bottom: 63vh;
        height: calc(var(--navBarHeight) * 2);
        width: calc(var(--navBarHeight) * 2);
    }

    #videosArrowRightBox {

        font-size: 100%;
        right: calc(2.5% + 20px);
        margin-bottom: 63vh;
        height: calc(var(--navBarHeight) * 2);
        width: calc(var(--navBarHeight) * 2);
    }

    #videosInfoBackground {

        display: none;
    }

    #videosWheel {

        z-index: 10;
        height: 100vh;
        width: 100%;
    }

    .videos {

        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        margin-bottom: 50%;
    }

    .videoHeaders {

        height: 10%;
        font-size: 200%;
    }

    .videoImg {

        height: 65%;
    }

    #videosInfoHeader {

        font-size: 95%;
    }

    #videosInfoHeaderBox {

        font-size: 150%;
    }

    #videosInfoName {

        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
    }

    #videosInfoBox {

        height: 40%;
        width: 90%;
        margin: 2.5%;
    }

    /***** contact me *****/

    #contactMeHeaderBox {

        height: auto;
        width: 450px;
        font-size: 130%;
    }

    .contacts {

        height: 18%;
        margin-top: 1%;
    }
}


/********** SMALL DEVICES **********/

@media only screen and (max-width: 500px) { /* detect if screen is smartphone */

    /***** introduction *****/

    #myIntroduction {

        flex-direction: column-reverse;
    }

    #portraitBox {

        top: 0;
        width: 100vw;
        height: calc(60% + var(--navBarHeight));
    }

    #aboutMeBox {

        height: 45%;
        width: 90%;
        margin: 2.5%
    }

    #aboutMeHeaderBox {

        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 220px;
    }

    /***** skills *****/

    .skills {

        margin-top: 1.25%;
        height: 14%;
    }

    #skillSetHeaderBox {

        height: auto;
        width: 335px;
        font-size: 105%;
    }

    /***** projects *****/

    #myProjects {

        flex-direction: column-reverse;
    }

    #projectsBackground {

        width: 100vw;
        height: 70%;
        margin-bottom: 30vh;
    }

    #projectsArrowLeftBox {

        font-size: 50%;
        left: calc(2.5% + 20px);
        margin-bottom: 63vh;
        height: var(--navBarHeight);
        width: var(--navBarHeight);
    }

    #projectsArrowRightBox {

        font-size: 50%;
        right: calc(2.5% + 20px);
        margin-bottom: 63vh;
        height: var(--navBarHeight);
        width: var(--navBarHeight);
    }

    #projectsInfoBackground {

        display: none;
    }

    #projectsWheel {

        z-index: 10;
        height: 100vh;
        width: 100%;
    }

    .projects {

        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        margin-bottom: 70%;
    }

    .projectHeaders {

        height: 10%;
        font-size: 110%;
    }

    .projectImg {

        height: 65%;
    }

    #projectsInfoHeader {

        font-size: 95%;
    }

    #projectsInfoName {

        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
    }

    #aaedMusaNameBoxLarge {

        display: none;
    }

    #aaedMusaNameBox {

        margin-bottom: 10%;
    }

    #projectsInfoBox {

        height: 40%;
        width: 90%;
        margin: 2.5%;
    }

    /***** experiences *****/

    .experiences {

        margin-top: 1.25%;
        height: 14%;
    }

    #experiencesHeaderBox {

        height: auto;
        width: 270px;
        font-size: 105%;
    }

    /***** videos *****/

    #myVideos {

        flex-direction: column-reverse;
    }

    #videosBackground {

        width: 100vw;
        height: 70%;
        margin-bottom: 30vh;
    }

    #videosArrowLeftBox {

        font-size: 50%;
        left: calc(2.5% + 20px);
        margin-bottom: 63vh;
        height: var(--navBarHeight);
        width: var(--navBarHeight);
    }

    #videosArrowRightBox {

        font-size: 50%;
        right: calc(2.5% + 20px);
        margin-bottom: 63vh;
        height: var(--navBarHeight);
        width: var(--navBarHeight);
    }

    #videosInfoBackground {

        display: none;
    }

    #videosWheel {

        z-index: 10;
        height: 100vh;
        width: 100%;
    }

    .videos {

        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        margin-bottom: 70%;
    }

    .videoHeaders {

        height: 10%;
        font-size: 110%;
    }

    .videoImg {

        height: 65%;
    }

    #videosInfoHeader {

        font-size: 95%;
    }

    #videosInfoName {

        margin-top: 0;
        margin-left: auto;
        margin-right: auto;
    }

    #videosInfoBox {

        height: 40%;
        width: 90%;
        margin: 2.5%;
    }

    /***** contact me *****/

    #contactMeHeaderBox {

        height: auto;
        width: 330px;
        font-size: 150%;
    }

    .contacts {

        height: 19%;
        margin-top: 1.25%;
    }
}