body{
        background-color: #FCF8DA;

        margin: 0;
        padding: 0;
        font-family: Verdana, 'Roboto Flex', Tahoma, sans-serif;
        font-variation-settings: "wdth" 130, "wght" 800;
        
        place-items: left;
        color:#2b2b2b; 
}

#Page{
    position:relative;
    min-height: 100lvh;
}

#VisualArts{
    position:absolute;
    display:flex;
    align-items: center;

    text-decoration:none;
    text-align: left center;
    
    color: #FCF8DA;
}

#ClickImages{
    position:absolute;
    display:flex;
    align-items: center;

    text-decoration:none;
    text-align: left center;
    
    color: #2b2b2b;
 
}

#Home{
    position: absolute;
}

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

#Tabs{
    position:relative; 
    display:flex;
    flex-wrap: wrap;
    
    text-decoration:none;
    
    color:#2b2b2b;  
}

.Label{
    cursor: pointer; 
    text-align: left;
    line-height: 1.5;
}

.tablinks{
    display: none;
}

.ArtGrid{
    order:1;
    width: 100%;

    line-height: 1.5;
    display: none;
}

.tablinks:checked+.Label{
    color:#c94144;
}

.tablinks:checked+.Label+.ArtGrid{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: space-evenly;
    gap: clamp(1rem, 3lvw, 3rem);
}

.gridImg{  
    width: auto;
    height:auto;
    display: block;
}

.ArtPopUp{
    width: 100%;
    height: 500lvh;
    top:0;
    left:0;
    margin:0;
    position: fixed;
    visibility: hidden;
    background: #2b2b2b;
}

.ArtPopUp:target{
    visibility: visible;
}

.HideDescription{
    position: fixed;
    left:93lvw;
    top:2lvw;
    width:2.5lvw;
    height:2.5lvw; 
}

.ArtDescription{
    position:relative;
    width: 85lvw;
    background:#FCF8DA;
    left:5lvw;
    height:500lvh;
}





@media (aspect-ratio >=1.1) {
    body{  
        overflow-x: hidden;
        background-image: url("./images/background_headers/Final/ArtPage.svg");
        background-position: left top;
        background-repeat:no-repeat;
        background-size: auto 100lvh;    
    }
    #VisualArts{
        width: 100lvw;
        height:12lvh;
        top:12lvh;
        margin:0;
        margin-left:13.5lvh;
        
        font-size: min(6.75lvw, 9.75lvh);
        letter-spacing:0lvh;
        
    }

    #Home{
        left: calc(100lvw - 11lvh);
        top:0lvh;
        top:3lvh;
        width:5lvh;
        height:5lvh;
    }
    
     #ClickImages{
      
        top:25lvh;
        margin:0;
        margin-left:15lvh;
        color:#2b2b2b;
        font-size: 2.5lvh;
        font-style: italic;
        
        letter-spacing:0lvh;
        
    }

    #bgSideBar{
        position:absolute;
        top:30lvh;
        bottom: -25lvh; 
        left: 8.12lvh;
        background-color: #2b2b2b;
        width: 1.4lvh;
        overflow: hidden;
        
    }

    #Tabs{  
        width: 80lvw;

        left: 15lvh;
        top:32lvh;
        
        font-size: min(3lvw,3lvh); 
    }

    .Label{
        padding: 0;
        padding-right:5lvh; 
        margin-bottom: 2lvh;
    }

    .ArtGrid{
        margin-bottom:6lvh;
    }

    .tablinks:checked+.Label{
        border-bottom: 1lvh solid #c94144;
    }

    .gridImg{
        margin: 2lvh;

        max-width: 60lvw;
        max-height: 60lvh;
        
        border: 1lvh solid #2b2b2b;
    }

    .Title{
        position:relative;
        margin: 0;
        margin-left:5lvw;
        margin-top:1lvh;
        font-size: 4lvh;
    }

    .Medium{
        position:relative;
        margin: 0;
        margin-left:5lvw;
         margin-top:1lvh;
        font-size: 3lvh;
    }

    .Size{
        position:fixed;
        margin: 0;
        margin-left:5lvw;
       margin-top:1lvh;
        font-size: 3lvh;
    }

    .popupImg{
        max-height: calc(75lvh - 5lvw);
        max-width: 72lvw;
        width:auto;
        height:auto;
        margin-left:5lvw;
        margin-top:5lvw;
        border: solid 1.5lvh #2b2b2b;
    }
}


@media (aspect-ratio < 1.1) {
    body{
        background-image: url("./images/background_headers/Final/ArtPage_Portrait.svg");
        background-position: left top;
        background-repeat:no-repeat;
        background-size: auto 30lvw;
    }
 
    #VisualArts{
        width: 86lvw;
        height:12lvw;
        top:13.75lvw;
        margin:0;
        margin-left:13.5lvw;
       
        font-size: min(6.75lvw, 9.75lvh);
    }

    #Home{
        left: 90lvw;
        top:3lvw;
        width:5lvw;
        height:5lvw;
    }

    #ClickImages{
      
        top:27.5lvw;
        margin:0;
        margin-left:14lvw;
        color:#2b2b2b;
        font-size: 2lvw;
        font-style: italic;
        
        letter-spacing:0lvw;
        
    }

    #bgSideBar{
        position:absolute;
        visibility: hidden;
    }
    
    #Tabs{  
        width: 90lvw;

        left: 6lvw;
        top:33lvw;
        
        font-size: 2.75lvw;   
    }

    .Label{
        padding: 0;
        padding-right:3lvw;
        padding-left:3lvw;
        margin-bottom: 2lvw;
    }

    label[for=Paintings]{
        margin-left:5lvw;
    }

    .ArtGrid{
        margin-bottom:10lvw;
    }

    .tablinks:checked+.Label{
        border-bottom: 1lvw solid #c94144;
    }

    .gridImg{
        margin: 2lvw;
        margin-left:0;

        max-width: 70lvw;
        max-height: 60lvh;

        border: 1.5lvw solid #2b2b2b;   
    }

    .HideDescription{
        position: fixed;
        text-decoration: none;
        color:#FCF8DA;
        left:92lvw;
        top:0;
        font-size: 5lvw;
    }

    .ArtDescription{
        position:relative;
        width: 85lvw;
        background:#FCF8DA;
        left:5lvw;
        height:500lvh;
    }

    .Title{
        position:relative;
        margin: 0;
        margin-left:2lvw;
        margin-top:2lvw;
        font-size: 4lvw;
    }

    .Medium{
        position:relative;
        margin: 0;
        margin-left:2lvw;
         margin-top:0.5lvw;
        font-size: 3lvw;
    }

    .Size{
        position:relative;
        margin: 0;
        margin-left:2lvw;
       margin-top:0.5lvw;
        font-size: 3lvw;
    }

    .popupImg{
        max-height: 65lvh;
        max-width: 77lvw;
        width:auto;
        height:auto;
        margin-left:2lvw;
        margin-top:5lvw;
        border: solid 2lvw #2b2b2b;
    }
}