/* BODY */
body {
    font-family: Verdana, "Lucida Sans", Arial, sans-serif; 
    font-size: 100%; 
    color: black; 
    background-color: black;
    display: grid;
    grid-template-areas: 
        "head"
        "main";
    grid-template-rows: 48px 1fr;
}

* { box-sizing: border-box; }
.hide { display: none; }

/* HEADER  */
.head, .head-48 { 
 position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font: 16px Verdana;
    padding: 16px; 
    margin: 0;
    text-align: center; 
    color: white; 
    background-color: #9933aa; 
    z-index: 4;
}
@media screen and (min-width: 600px) {.head-48 {height: 48px}}

.main {
    display: grid;
    grid-area: main;
    height: 100vh;
    overflow: auto;
}

/* IMAGES */
.main-grid {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 1fr;
    z-index: 1;
} 
/* pixels per inch = 93.09090909090909 */
@media screen and (min-width: 637px ) {.main-grid {grid-template-columns: repeat(2, 1fr) } }
@media screen and (min-width: 956px ) {.main-grid {grid-template-columns: repeat(3, 1fr) } }
@media screen and (min-width: 1274px ) {.main-grid {grid-template-columns: repeat(4, 1fr) } }
@media screen and (min-width: 1593px ) {.main-grid {grid-template-columns: repeat(5, 1fr) } }
@media screen and (min-width: 1912px ) {.main-grid {grid-template-columns: repeat(6, 1fr) } }
@media screen and (min-width: 2230px ) {.main-grid {grid-template-columns: repeat(7, 1fr) } }
@media screen and (min-width: 2549px ) {.main-grid {grid-template-columns: repeat(8, 1fr) } }
@media screen and (min-width: 2868px ) {.main-grid {grid-template-columns: repeat(9, 1fr) } }


@media screen and (max-width: 636px) {
    .grid-item {
        width: 100%;
        z-index: 2;
    }
    .image {
        width: 100%;
        z-index: 3;
    }
}

@media screen and (min-width: 637px) {
    .grid-item {
        height: 400px;
        overflow: auto;
        padding: 4px;
        border: solid 1px red;
        cursor: pointer; 
        z-index: 2;
    }
    .image {
        height: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.caption {
  position: relative;
  display: inline-block;
}

.caption .text {
  position: absolute;
  left: 0;
  bottom: 2%;
  width: 100%;
  background-color: lightyellow;
  font-size: 80%;
  color: black;
  text-align: center;
  border: 1px solid black;
  border-radius: 6px;
  padding: 5px 0;
  visibility: hidden;
  z-index: 1;
}

.caption:hover .text {
  visibility: visible;
}

.large-div {
    position: fixed; 
    top: 32px;
    left: 0; 
    width: 100vw; 
    height: 99vh; 
    overflow: scroll; 
    background-color: black; 
    z-index: 5;
}

.return-div {
    position: fixed; 
    width: 100%; 
    text-align: center; 
    padding: 4px; 
    background-color: tan; 
    border-radius: 6px; 
    z-index: 6;
}

.large-cap {
    position: fixed; 
    top: 56px;
    width: 100%; 
    text-align: center; 
    padding: 4px; 
    background-color: rgb(252, 247, 199); 
    font-size: 100%; 
    border: .5px solid black; 
    border-radius: 6px; 
    z-index: 6;
}

.side-left {
    position: fixed; 
    left: 0; 
    top: 50%; 
    font-size: 200%; 
    background-color: lightblue; 
    z-index: 6;
}

.large-img {
    position: relative; 
    top: 56px; 
    width: 100%;
    overflow: auto;
    z-index: 5;
}
@media screen and (min-width: 600px) {.large-img{display: block; margin: auto; max-width: 100%;}}
@media screen and (min-width: 1600px) {.large-img {
    width: 1600px;
    margin: auto;
}}

.side-right {
    position: fixed; 
    right: 0; 
    top: 50%; 
    font-size: 200%; 
    background-color: lightblue; 
    z-index: 6;
}
/* end */