@media (max-aspect-ratio: 1)
{
    a
    {
        text-decoration: none;
    }

    h1
    {
        font-family: 'Raleway';
        font-size: 5vw;
        font-weight: 1000;
        text-align: center;
    }

    .header
    {
        top: 0;
        z-index: 10;
        position: fixed;

        width:100vw;
        height: 50px; 

        text-align: center;
        background-color: var(--primary-color);
    }

    .header_text
    {
        text-align: center;
        font-family: 'Raleway';
        font-weight: 1000;
        width: 100vw;
    }

    .main
    {   
        padding-top: 100px;

        width: 100%; 
    }

    .main_intro
    {
        position: relative;

    }

    .intro_content_title
    {
        width: 100vw;
        margin-left: 0vw;
        margin-right: 10vw;
        margin-bottom: 90vw;

        font-family: 'Raleway';
        font-size: 5vw;
        font-weight: 1000;
        text-align: center;
    }
    
    .intro_content_desc
    {
        margin-left: 50px;
        margin-right: 50px;
        margin-top: 50px;
        margin-bottom: 20px;

        font-family: 'Work Sans';
        font-size: 3.5vw;
        line-height: 1.7;
        text-align: center;
    }

    .intro_content
    {
        
    }

    .intro_image
    {
        position: absolute;
        grid-row: 2;
        margin: auto;
        top: 20vw; 
        margin-left: 20vw;
        width: 60vw;
    }

    .light_dark_button
    {
        z-index: 11;
        position: fixed;
        width: 6vw;
        margin:10px;
    }
    
    

    .light_dark_animation
    {
        animation-name: color_transition_anim;
        animation-duration: .3s;
        animation-timing-function: ease-in-out;
    }

    @keyframes color_transition_anim 
    {
        from {transform: rotate(-300deg);}
        to {transform: rotate(0deg);}
    }

    .light_dark_hover
    {
        transition: transform .2s ease-in-out;
    }

    .light_dark_hover:hover
    {
        cursor: pointer;
        transform: rotate(25deg);
    }

    .portfolio_buttons
    {
        font-family: 'Raleway';
        font-weight: 1000;
        margin-top: 35px;
        text-align: center;
        border: none;
        background-color: var(--text-primary-color);
        width: max-content;
        font-size: min(5vw, 20px);
        color: var(--primary-color);
        border-radius: 10px;
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
        transition: transform .2s ease-in-out;
    }

    .portfolio_buttons:hover
    {
        cursor: pointer;
        transform: scale(1.2);
    }

    .top_button
    {
        margin-left: 10px;
        z-index: 11;
        font-family: 'Raleway';
        font-weight: 1000;
        text-align: center;
        border: none;
        background-color: var(--text-primary-color);
        width: max-content;
        font-size: 20px;
        color: var(--primary-color);
        border-radius: 10px;
        padding: 5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .top_button:hover
    {
        cursor: pointer;
    }

    .top_buttons
    {
        opacity: 0;
        position: fixed;
        z-index: 12;
        margin: 7px;
        margin-top: 55px;
        margin-left: calc(35px + 1%);
        right: 10px;
    }

    .top_vis
    {
        transition: opacity .3s ease-in-out;
        opacity: 1;
    }

    .top_invis
    {
        transition: opacity .3s ease-in-out;
        opacity: 0;
    }

    .pop_up_backer
    {
        opacity: 0;
        visibility: hidden;

        z-index: 12;
        position:fixed;
        background-color: rgba(0, 0, 0, .5);
        width:100%;
        height: 100%;

        transition: opacity .1s ease-in-out;
    }

    .resume_backer
    {
        position: fixed;
        z-index: 13;
        background-color: rgb(23, 23, 23);
        width: 90vw;
        height: 95vh;
        top: 2.5vh;
        left: 5vw;
    }

    .exit_button
    {
        position: fixed;
        float: left;
        color: white;
        width: 100px;
        font-size: large;
    }

    .exit_button:hover
    {
        cursor: pointer;
    }

    .resume_iframe
    {
        position: fixed;
        opacity: 1;
        z-index: 13;
        width: 85vw;
        height: 85vh;
        margin-left: 2.5vw;
        margin-top: 7.5vh;
    }

    .intro_button_grid
    {
        margin-left: 10%;
        width: 80%;
        display: grid;
        grid-template-row: auto auto auto;
    }

    .table_of_contents
    {
        margin-top: 40vw;
    }

    .toc_table
    {
        margin-top: 70px;
        font-family: "Work Sans";
        font-size: 3.5vw;
        padding-left: 10%;
        display: grid;
        grid-template-rows: repeat(auto-fit, max_content);
    }

    .toc_table_sub
    {
        padding-inline-start: 0px;
        margin-top: 0px;
        margin-left: 5vw;
        display: grid;
        grid-template-rows: repeat(auto-fit, max_content);
    }

    .toc_table_sub li:not(:last-child)
    {
        margin-bottom: 20px;
    }

    .toc_table_sub ul
    {
        padding-inline-start: 0px;
        margin-top: 10px;
    }

    .sub_category_title:hover
    {
        font-weight: bolder;
        text-decoration: underline;
        cursor: pointer;
    }

    .sub_categories li:hover
    {
        font-weight: bolder;
        text-decoration: underline;
        cursor: pointer;
    }

    .MRDT
    {
        border-radius: 40px;
        padding: 20px;
        display: grid;
        color: white;
        background-color: #920b16;
        margin-left: -20px;
        padding-left: 20px; 
        width:calc(80vw - 20px);

        grid-template-rows: auto auto;
        margin-bottom: 30px;
    }

    .CACC
    {
        border-radius: 40px;
        padding: 20px;
        display: grid;
        color: white;
        background-color: #618094;
        margin-left: -20px;
        padding-left: 20px; 
        width:calc(80vw - 20px);

        grid-template-rows: auto auto;
        margin-bottom: 30px;
    }

    .Personal
    {
        border-radius: 40px;
        padding: 20px;
        display: grid;
        color: white;
        background-color: #127c22;
        margin-left: -20px;
        padding-left: 20px; 
        width:calc(80vw - 20px);

        grid-template-rows: auto auto;
        margin-bottom: 30px;
    }

    .MRDTIMG
    {
        margin: auto;
        width: 80%;
    }

    .pages
    {
        display: grid;
        grid-template-rows: repeat(auto-fit, max-content);
    }

    .page_header
    {
        margin-left: 45vw;
        margin-top: 40vw;
        width: 10vw;
        height: 10vw;
        border-radius: 4vw;
        position: relative;
        transition: margin-left 2s ease-in-out, width 2s ease-in-out;
        overflow: hidden;
    }

    .page_header img
    {
        position: absolute;
        top: 0;
        width: 80%;
        margin: 10%;
        border-radius: 50%;
    }

    .page_header h1
    {
        position: absolute;
        color: white;
        font-size: 4vw;
        left: 4vw;
        text-wrap: nowrap;
        font-family: "Raleway";
    }

    .toc_table p:hover
    {
        font-weight: bolder;
        text-decoration: underline;
        cursor: pointer;
    }

    .page_desc
    {
        display: flex;
        align-items: center;
        font-family: 'Work Sans';
        font-size: 3.5vw;
        width: 90vw;
        margin-left: 5vw;
        line-height: 1.7;
        text-align: center;
    }

    .halfPicture
    {
        margin-top: 10vw;
        width: 100vw;
        display:grid;
        grid-template-rows: 1vw auto 1vw auto 1vw;
        height: max-content;
    }

    .halfPicture img
    {
        width: 90vw;
        margin-left: 5vw;
        
    }

    .pictureHalf
    {
        width: 100vw;
        margin-top: 10vw;
        display:grid;
        grid-template-rows: 1vw auto 1vw auto 1vw;
    }

    .pictureHalf img
    {
        width: 90vw;
        margin-left: 5vw;
    }

    .section_header
    {
        font-family: "Raleway";
        margin-top: 40vw;
        font-weight: bolder;
        font-size: 25px;
        text-align: center;
        background-color: var(--text-primary-color);
        color: var(--primary-color);
        width: 90%;
        margin-left: calc(5% - 20px);
        border-radius: 10px;
        padding: 20px;
    }

    .subsection_header
    {
        text-align: center;
        margin-top: 10vw;
        font-weight: bold;
        font-family: "Raleway";
        font-size: 23px;  
        color: var(--text-primary-color);  
    }

    .dual_img
    {  
        width: 80vw;
        margin-left: 5vw;
    }

    .dual_img img
    {
        width: 80vw;
    }

    .testDiv1
    {
        background-color: red;
    }
    .testDiv2
    {
        background-color: blue;
    }
    .testDiv3
    {
        background-color: green;
    }
    .testDiv4
    {
        background-color: yellow;
    }
}