@media (aspect-ratio>1.2) {
    body{
        height: 100lvh;
        width:100lvw;
        overflow-x: hidden;
        overflow-y:hidden;
        background-image: url("./images/background_headers/Final/Index_Landscape.svg");
        
        background-size: auto 100lvh;
        background-repeat:no-repeat;
        background-position: center top;
        background-color: #FCF8DA
        ;
        margin: 0px;
        font-family: Verdana, sans-serif;
        /*background-color: rgb(227, 164, 19);*/
        place-items: right;
    }
    #luke{
        position:absolute;

        -webkit-transform: translate(-50%,-50%) rotate(45deg);
        -moz-transform: translate(-50%,-50%) rotate(45deg);
        -o-transform: translate(-50%,-50%) rotate(45deg);
        transform: translate(-50%,-50%) rotate(45deg);

        color: #2b2b2b;

        line-height: 17lvh;
        letter-spacing: 1lvh;
        left: calc(50lvw + 36.5lvh);
        top: 23.5lvh;
        margin:0;
        font-size: 16lvh;
    }
    #henry{  
        
        -webkit-transform: translate(-50%,-50%) rotate(45deg);
        -moz-transform: translate(-50%,-50%) rotate(45deg);
        -o-transform: translate(-50%,-50%) rotate(45deg);
        transform: translate(-50%,-50%) rotate(45deg);

        color: #2b2b2b;
        
        left: calc(50lvw + 26.5lvh);
        top:49lvh;
        letter-spacing: 2lvh;
        
        margin:0;
        position: absolute;

        font-size: 9.25lvh;
        
        text-align: right;
    }

    #bio{
        
        position: absolute;
        left:calc(50lvw - 58lvh);
        top: 15lvh;
       width:40lvh;

      letter-spacing: 0.1lvh;
       line-height: 110%;
        text-align: left;
        font-size: 2.5lvh;
    }

    #cs_button{
        -webkit-transform: translate(-50%,-50%) rotate(-45deg);
        -moz-transform: translate(-50%,-50%) rotate(-45deg);
        -o-transform: translate(-50%,-50%) rotate(-45deg);
        transform: translate(-50%,-50%) rotate(-45deg);

        text-decoration:none;
        left: calc(50lvw - 23.5lvh);
        top:77.5lvh;
        
        position:absolute;
        
        
        margin:0;
        font-size: 5.5lvh;
        
        text-align: right;
    }

    #cs_button:visited,   
    #cs_button:active,
    #cs_button:link
    {
        color :#fcf8da;
        
    }

    #cs_button:hover,
    #cs_button:focus{
        color:#c94144;
    } 


    #art_button{
        -webkit-transform: translate(-50%,-50%) rotate(-45deg);
        -moz-transform: translate(-50%,-50%) rotate(-45deg);
        -o-transform: translate(-50%,-50%) rotate(-45deg);
        transform: translate(-50%,-50%) rotate(-45deg);

        text-decoration:none;
        left: calc(50lvw - 10lvh);
        top:88lvh;
        
        position:absolute;
        
        
        margin:0;
        font-size: 5.5lvh;
        
        text-align: right;
    }

    #art_button:visited,   
    #art_button:active,
    #art_button:link 
    {
        color :#fcf8da;
        
    }

    #art_button:hover,
    #art_button:focus{
        color:#ebd223;
    } 


    p{
    
        font-size:12pt;
        color: black;
        text-align: left;
        text-indent: 12pt;
    }

}

@media (aspect-ratio<=1.2) {
    body{
        height: 100lvh;
        width:100lvw;
        background-image: url("./images/background_headers/Final/Index_Portrait.svg");

        background-size: 100lvw auto;
        background-repeat:no-repeat;
        background-position: left center;
        background-color: #FCF8DA
        ;
        margin: 0px;
        font-family: Verdana, sans-serif;
        /*background-color: rgb(227, 164, 19);*/
        place-items: right;
    }
    #luke{
        position:absolute;

       -webkit-transform: translate(-50%,-50%) rotate(45deg);
        -moz-transform: translate(-50%,-50%) rotate(45deg);
        -o-transform: translate(-50%,-50%) rotate(45deg);
        transform: translate(-50%,-50%) rotate(45deg);

        color: #2b2b2b;

        line-height: 13lvw;
        letter-spacing: 0.75lvw;
        left: 78.5lvw;
        top:calc(50lvh - 10.5lvw);
        margin:0;
        font-size: 12lvw;
    }
    #henry{  
        
        -webkit-transform: translate(-50%,-50%) rotate(45deg);
        -moz-transform: translate(-50%,-50%) rotate(45deg);
        -o-transform: translate(-50%,-50%) rotate(45deg);
        transform: translate(-50%,-50%) rotate(45deg);

        color: #2b2b2b;
        
        left: 71lvw;
        top:calc(50lvh + 10lvw);

        letter-spacing: 1.8lvw;
        
    
        position: absolute;

        font-size:  7lvw;
        margin:0;
        text-align: right;
    }

     #bio{
        
        position: absolute;
        left:2lvw;
        top: calc(50lvh - 17lvw);
       width:40lvw;

      letter-spacing: 0.1lvw;
       line-height: 110%;
        text-align: left;
        font-size: 2lvw;
    }


    #cs_button{
        -webkit-transform: translate(-50%,-50%) rotate(-45deg);
        -moz-transform: translate(-50%,-50%) rotate(-45deg);
        -o-transform: translate(-50%,-50%) rotate(-45deg);
        transform: translate(-50%,-50%) rotate(-45deg);

        text-decoration:none;
        left: 30lvw;
        top: calc(50lvh + 33lvw);
        
        position:absolute;
        
        

        font-size: 4.75lvw;
        margin:0;
        text-align: right;
    }

    #cs_button:visited,   
    #cs_button:active,
    #cs_button:link
    {
        color :#fcf8da;
        
    }

    #cs_button:hover,
    #cs_button:focus{
        color:#c94144;
    } 


    #art_button{
        
        -webkit-transform: translate(-50%,-50%) rotate(-45deg);
        -moz-transform: translate(-50%,-50%) rotate(-45deg);
        -o-transform: translate(-50%,-50%) rotate(-45deg);
        transform: translate(-50%,-50%) rotate(-45deg);
        
        text-decoration:none;
        left: 40lvw;
        top: calc(50lvh + 41lvw);
        
        position:absolute;
        
        font-size: 4.75lvw;
        margin:0;
        text-align: right;
    }

    #art_button:visited,   
    #art_button:active,
    #art_button:link 
    {
        color :#fcf8da;
        
    }

    #art_button:hover,
    #art_button:focus{
        color:#ebd223;
    } 


    p{
    
        font-size:12pt;
        color: black;
        text-align: left;
        text-indent: 12pt;
    }

}