/* .grid-even{
        background-color:rgb(63, 63, 63);
}
.grid-odd{
    background-color:rgb(63, 63, 63);
} */
 body{
    background-image:url('/media/miscPaintings/housesbackg.png');
    background-size:50%;
    background-repeat:repeat;

 }
 #TopBar{
    display:flex;
    align-items:center;
    justify-content: space-around;
    background-color:rgba(255, 255, 255, 0.5);
 }
 #TopBar a{
    width:15%;
    margin:2%;
 }
 #Back{
    width:100%;
    margin:2%;
}
#PaintingTitle{
    width:30%;
    height:fit-content;

}
#PaintingTitle img{
    width:100%;
}
#Instructions{
    width:25%;
    background-color:rgb(239, 226, 210);
    padding:0 2%;
}
#Everything{
    background-color:rgb(189, 211, 189);
    background-image:url("/media/miscPaintings/landscape.png");
    background-repeat: no-repeat;
    height:fit-content;
    background-position:center center;
    background-size:100% 100%;
    width:80%;
    margin:0% 10% 5%;
    border: 15pt groove rgb(137, 108, 88);
}
#Butterfly{
    position:absolute;
    width:5%;
    margin-top:95%;
    margin-left:60%;
}
#Sky{
    height:40%;
    /* background-color:lightskyblue; */
    background-image:url('/media/miscPaintings/Sky.gif');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-origin:padding-box;
    padding: 1% 0 20%;
}
#SpotlightContainer{
    display:none;
    position:fixed;
    top:0.5%;
    width:0%;
    height:96%;
    margin-left:-7%;
    background-color:rgba(0, 0, 0, 0.75);
    z-index:0;
    border: 4pt solid white;
}
#CloseSpotlight{
    position:absolute;
    top:1%;
    left:1%;
    width:5%;
}
#SpotlightImage{
    width:100%;
    height:90%;
    margin-top:2%;
    background-position: center;
    background-repeat: repeat-y;
    background-size: contain;
    opacity:0;
    /* border:1pt solid white; */
}
#SpotlightDetails{
    position:absolute;
    width:20%;
    bottom:5%;
    right:2%;
    text-align:center;
    color:white;
}
#SpotlightDetails h3{
    background-color:black;
}
#Timeline{
    display:flex;
    width:85%;
    flex-direction:column;
    margin-left:2%;
    background-color:transparent;
    margin-top:-10%;
}
#TwentytwoTwentyFiveGrid{
    background-image:url("/media/miscPaintings/WonkyGreenHouse.png");  
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#TwentyTwentyoneGrid{
    background-image:url("/media/miscPaintings/FlagHouse.gif");  
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#SeventeenNineteenGrid{
    background-image:url("/media/miscPaintings/YellowHouse.png");  
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#SeventeenNineteenSign{
    margin-left:-10%;
}
#TwelveSixteenGrid{
    background-image:url("/media/miscPaintings/BrickHouse.gif");  
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#TwentyTwentyoneSign{
    width:90%;
}
.window{
    width:100%;
    height:100%;
}
.paintings-section{
    display:flex;
    width:100%;
    flex-direction:row-reverse;
    justify-content:flex-end;
}
.paintings-header{
    display:flex;
    width:45%;
    align-self:flex-end;
    text-align:center;
    color:white;
    margin-bottom:6%;
}
.paintings-grid{
    display:flex;
    width:65%;
    justify-content:space-evenly;
    flex-wrap:wrap-reverse;
    align-self:center;
    padding:11% 7% 7% 7%;
    margin-bottom:3%;
    margin-top:-6%;
    /* background-color:rgb(43, 6, 6); */
}
.painting-container{
    width:12%;
    overflow:visible;
    /* border:4pt solid rgb(39, 33, 33);
    border-bottom: 5pt solid rgb(27, 24, 24); */
    border-radius:10%;
    /* opacity:0.8; */
    margin:2%;
}
.hover-title{
    margin:0;
    color:rgb(0, 0, 0);
    font-style:italic;
    padding:5%;
    font-size:small;
    position: relative;
    background-color:rgb(255, 255, 255);
}
.hover-grow{
    box-sizing: border-box;
}
/* .house-sign{
    width:100%;
} */