.closeImg{
    width:100%;
    height:100%;
}

#Home{
    position:absolute;
    left: calc(100lvw - 3*min(5lvw,3.5lvh));
    top:0;
    @media (aspect-ratio<1.43) {
        top:1lvw;
    }
    width: min(5lvw,3.5lvh);
    height:min(5lvw,3.5lvh);
}

@media (orientation: portrait) {
    body {
        background-image: url("./images/background_headers/Final/CSPage_Portrait.svg");
    
        background-size: 100lvw 50lvw;
        background-repeat:no-repeat;
        background-position: top left;
        background-color: #FCF8DA;
        margin: 0;
        padding: 0;
        font-family: Verdana, 'Roboto Flex', Tahoma, sans-serif;
        font-variation-settings: "wdth" 130, "wght" 800;
        /*background-color: rgb(227, 164, 19);*/
        place-items: left;
    }


   
    #Software{
        text-decoration:none;
        left: 21lvw;
        top:4.5lvw;
        margin:0;
        color: #2b2b2b;
        position:absolute;
        font-size: 14lvw;
        letter-spacing:0lvw;
        text-align: right;
    }

    #Portfolio{
        text-decoration:none;
        left: 6lvw;
        top:24lvw;
        margin:0;
        color:#2b2b2b;
        position:absolute;
        font-size: 14lvw;
        letter-spacing:0lvw;
        text-align: right;
    }


    #Degree{
        position:absolute; 
        text-decoration:none;
        left: calc(65lvw);
        top:25lvw;
        color:#2b2b2b;
    
        font-size: 2.25lvw;
        
        text-align: right;
    }
    .grid{
        
        display: grid;
        grid-template-columns: 80lvw;
        gap: 25lvw 10lvw;
        margin-top:50lvw;
        margin-left:10lvw;
        place-items: center;
    }


    


    .project{
        display: grid;
        justify-items: center;
    }

    .project_img{  
        width: 50lvw;
        height:50lvw;
        margin-top:5lvw;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2b2b2b;
        
        order:2;
        
    }

    img{
        display: block;
        height: 45lvw;
        border:1lvw solid #fcf8da   
    }

    .project_text{
        line-height: 5.3lvw;
        display: block;
        order:1;
        color: #2b2b2b;
    }

    .project_title{
        font-size: 5.3lvw;
        margin: 0;
        padding-bottom: 2lvw;
        color: #2b2b2b;
    }

    .project_date{
        color:#611800;
        font-size: 3.2lvw;
        margin:0;
    }
    .project_languages{
        color:#611800;
        font-size: 3.2lvw;
        margin: 0;
        padding-bottom: 2lvw;
    }

    .project_description{
        font-size: 3lvw;
        margin: 0;
        
    }

    .back{
        width:95%;
        font-size: 3.5lvw;
        display: block;
        text-align: right;
        color:#ca060a;
        text-decoration:underline;
        margin-top:20lvw;
        margin-bottom: 5lvw;
        margin-right:30lvw;
    }

    a{
        color:#c6080b;
    }

    hr{
        border-top:1.25lvw solid #2b2b2b;
    }

}

@media (orientation: landscape) {
    body{
         background-image: url("./images/background_headers/Final/CSPage_Landscape_left.svg");
        background-size: calc(16.5lvw - 10lvh) 45lvh;
        background-position: left top;
        @media (aspect-ratio > 1.43) {
            background-image: url("./images/background_headers/Final/CSPage_Landscape_left.svg"), 
            url(./images/background_headers/Final/CSPage_Landscape_right.svg);
            background-size: calc(16.5lvw - 10lvh) 45lvh, auto 45lvh;
            background-position: left top, calc(16.5lvw + 80lvh) top;
        }
        background-repeat:no-repeat;
        
        background-color: #FCF8DA;
        margin: 0;
        padding: 0;
        font-family: Verdana, 'Roboto Flex', Tahoma, sans-serif;
        font-variation-settings: "wdth" 130, "wght" 800;
        /*background-color: rgb(227, 164, 19);*/
        place-items: left;
        color:#2b2b2b;
        
    }

   

    #Software{
        text-decoration:none;
        left: calc(16.5lvw - 10lvh);
        top:1.75lvh;
        margin:0;
        color: #2b2b2b;
        position:absolute;
        font-size: 16.5lvh;
        letter-spacing:0lvh;
        text-align: right;
    }

    #Portfolio{
        text-decoration:none;
        left: calc(16.5lvw - 10lvh);
        top:22lvh;
        margin:0;
        color:#2b2b2b;
        position:absolute;
        font-size: 16.5lvh;
        letter-spacing:0lvh;
        text-align: right;
    }

    #Degree{
        position:absolute; 

        -webkit-transform: rotate(5.25deg);
        -moz-transform: rotate(5.25deg);
        -o-transform: rotate(5.25deg);
        transform: rotate(5.25deg);

        text-decoration:none;
        left: calc(65lvh);
        top:25lvh;
        color:#fcf8da;
    
        font-size: 2.25lvh;
        
        text-align: right;
    }

    .grid{
        display: grid;
        grid-template-columns: 75lvw;
        gap: 15lvh;
         margin-top:53lvh;
        @media (aspect-ratio>1.43){
            grid-template-columns: 33lvw 50lvw;
            gap: 20lvh 10lvh;
            margin-top:50lvh;
         }
       
        margin-left: 10lvh;
        place-items: center;
    }

  

   .project{
    display: contents;
        @media (aspect-ratio<1.43) {
        display: grid;
        justify-items: center;
        }
   }

    .project_text{
        line-height: 4lvh;
        
        @media (aspect-ratio<1.43) {
            display: block;
            order:1;
            
        }
    }

    .project_img{  
        width: 40lvh;
        height:40lvh;
        margin-top:5lvh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2b2b2b;
        @media (aspect-ratio<1.43) {
            width: 50lvh;
            height:50lvh;
            margin-top:7lvh;
            order:2;
        }  
    }

    img{
        display: block;
        height: 35lvh;
        @media (aspect-ratio<1.43) {
             height: 45lvh;
         }
         
        border: 1lvh solid #fcf8da;  
   }

    .project_title{
        font-size: 4.0lvh;
        margin: 0;
        padding-bottom: 1lvh;
    }

    .project_date{
        font-size: 2.5lvh;
        color:#611800;
        margin:0;
    }
    .project_languages{
        font-size: 2.5lvh;
        color:#611800;
        margin: 0;
        padding-bottom: 1lvh;
    }

    .project_description{
        font-size: 2.25lvh;
        margin: 0;
        
    }

    .back{
        width:95%;
        font-size: 2.5lvh;
        display: block;
        text-align: right;
        color:#ca060a;
        text-decoration:underline;
        margin-top:10lvh;
        margin-bottom: 10lvh;
        margin-right:30lvh;
    }

    a{
        color:#c6080b;
    }

    hr{
        border-top:1lvh solid #2b2b2b;
    }
   
    
}