main.css

*{margin: 0; padding: 0;  box-sizing: border-box;}
html { scroll-behavior: smooth;}
body {min-height: 100vh; scroll-behavior: smooth;}
main .thumbs {display: flex; flex-wrap: wrap; width: 100vw; min-height: 100vh; align-items: center; justify-content: space-around;}
.thumbnail {max-width: 50vw; height: auto; align-self: center;}
.thumbnail.max30 {max-width: 30vw; height: auto;}
.thumbnail.max60 {max-width: 60vw; max-height: 100vh;height: auto;}
.thumbnail.max85 {max-width: 85vw; height: auto;}
.lightbox { display: none; position: fixed; top:0; left: 0;
width: 100vw; height: 100vh; background: #000; overflow-y: scroll;
/* v-align top; because flex direction row > */ align-items: flex-start;
justify-content: center;
}
.lightbox img {width: 100%; height: auto; max-width: 100%; margin-top: auto; margin-bottom: auto;}
.lightboxes.fit2screen .lightbox img {height: 100vh; width: 100vw; margin-top: auto; margin-bottom: auto; object-fit: contain;}
.lightbox:target {display: flex;}
/* body *, a, img { overflow: hidden; } */
body.debugMode .thumbnail_container:nth-last-child(2) {/*display: block;*/border: 3px solid red;}
.thumbnail_container { display: flex; justify-content: center; margin-bottom: 5%;}

header, .fade-out { animation: fadeOut ease 2s;}
@keyframes fadeOut {0% {color: #ccc; opacity:1;}}
@-moz-keyframes fadeOut {0% {color: #ccc; opacity:1;}}
@-webkit-keyframes fadeOut {0% {color: #ccc; opacity:1;}}
@-o-keyframes fadeOut {0% {color: #ccc; opacity:1;}}
@-ms-keyframes fadeOut {0% {color: #ccc; opacity:1;}}


header,footer { height: 10vh; display: flex; align-items: center; justify-content: center; text-align: center; color: #ccc5; /* x55 = 33% */ flex-direction: column; width: 100%;}
h1, nav {font-weight: normal; font-size: 2em;}
nav a {text-decoration: underline; color: orange}

header span {display: block;}
header {position: fixed; height: auto; color: #ccc0; user-select: none;}
header nav#animode {right:0;}
header nav#langopt {left:0;}
header nav {position: fixed;top:0; opacity: .25;}
header:hover{ color: #cccb;cursor: default;} /* xBF = 75% x9E = 62% */
header:hover nav { opacity: .75; transition: ease .5s;}
header nav:hover {opacity: 1}

header, .fade-out, header nav {
  transition: ease 2s;
}
header:hover, header nav:hover, .fade-out {
  transition: 0s;
}