body {
    margin:0;
    font-size:1.1em;
}

#return {
    z-index:1;
    position:sticky;
    top:0;
    background:url('/images/backgrounds/art_gallery_bar.jpg') repeat;
    background-size:40px 40px;
    border-bottom:4px solid pink;
    height:40px;
    text-align:center;
    font-size:1.4em;
}

#filter {
    display:inline;
    position:relative;
    left:25;
}
#filter button {
    width:10%;
}
#filter .filter_content {
    display:none;
    position:absolute;
    background:url('/images/backgrounds/art_gallery_bar.jpg') repeat;
    min-width:150px;
    padding:2%;
    border:4px solid pink;
}
#filter:hover .filter_content {
    display:block;
}

#gallery {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    align-items:center;
    column-gap:1%;
    margin:1%;
}

.tall {
    grid-row:auto/span 2;
}
        
.art {
    max-width:100%;
    transition:transform 1.5s;
}
.art:hover {
    transform: scale(1.05, 1.05);
}

#modal {
    display:none;
    position:fixed;
    z-index:2;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background-color:rgb(0,0,0);
    background-color:rgba(0,0,0,0.5);
}

.modal_content {
    display:block;
    position:relative;
    top:3.5%;
    width:90%;
    height:100%;
    margin:auto;
    text-align:center;
}

#modal_image {
    max-width:75%;
    max-height:90%;
    margin:1%;
}

#modal_description {
    background-color:rgba(255,255,255,0.7);
    float:right;
    width:18%;
    min-height:20%;
    margin:4% 0;
    padding:1%;
    font-family:'Handjet', monospace;
    font-size:1.6em;
    font-weight:bold;
}

#close {
    float:left;
    width:40px;
    height:40px;
    margin:5px;
}

* {
    box-sizing:border-box;
}

@media only screen and (min-width: 1921px) {
    .gallery > div {flex-basis:480px;}
        }