:root { --bg-color: #000; --font-color: #fff; --bgrgb-color: 0,0,0,; --fontrgb-color: 255,255,255,;}
[data-theme="dark"] { --bg-color: #fff; --font-color: #000; --bgrgb-color: 255,255,255,; --fontrgb-color: 0,0,0,;}

* {margin:0;padding:0;box-sizing:border-box;}
:not(:root):fullscreen {overflow:scroll;background:var(--bg-color);}

@keyframes fade-in {0%{opacity:0;}50%{opacity:0;}100%{opacity:1;}}

html {background:var(--bg-color);color:var(--font-color);}
body {font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:16px;line-height:1.45;background:var(--bg-color);color:var(--font-color);}
h1 {font-size:1em;font-weight:normal;margin-bottom:.8em;}
h1 a {font-weight:bold;}
a {text-decoration:none;color:currentColor;}
a:hover, .selected {text-decoration:underline;}
:focus {outline-color:var(--font-color);}

.header {padding:1em 1em 0 1em;display:inline-block;}
.header ul {list-style:none;padding:0 1em;}
.header ul li a {display:inline-block;padding:.025em 0;}
.header ul li span {opacity:.4;}
.header ul li img {width:1em;height:.9em;object-fit:cover;margin-right:.3em;position:relative;top:.1em;}

.default ul {max-height:0;overflow:hidden;transition:max-height .6s ease-out;}
.header:hover ul {max-height:1000px;transition:max-height .8s ease-in;}

.modified {position:absolute;bottom:.6em;left:1em;opacity:.1;}
.modified:hover {opacity:.4;}

input {float:left;font-size:1em;line-height:1.1;font-family:inherit;padding:.3em .4em;margin:0 .5em .5em 0;border:1px solid var(--font-color);border-radius:2px;}
input[type=submit] {color:var(--font-color);background:none;border:1px solid var(--font-color);padding:.3em .5em;}
input[type=submit]:hover {cursor:pointer;}
input[type=checkbox] {display:none;}
label {position:absolute;top:1.3em;right:1em;cursor:pointer;display:block;width:13px;height:13px;border:1px solid currentColor;border-left:6.5px solid;border-radius:50%;transform:rotate(45deg);}
input[type=checkbox]:checked + label {border-left:1px solid;border-right:6.5px solid;}

.grid {padding:0 1em 1em 1em;display:grid;grid-gap:0;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));grid-auto-flow:dense;counter-reset:section;animation:fade-in .5s;}
figure {display:flex;align-items:center;justify-content:center;position:relative;}
img, video {width:100%;height:100%;object-fit:contain;}

figcaption {display:none;opacity:0;z-index:1;background:var(--bg-color);color:var(--font-color);font-size:.85em;pointer-events:none;position:absolute;bottom:0;left:0;right:0;top:0;padding:.85em 1.1em;}
figcaption * {opacity:.7;}

figure:before {content:'';display:block;padding-top:100%;}
figure:after {counter-increment:section;content:counter(section);position:absolute;bottom:.95em;right:1.3em;color:var(--font-color);font-size:.75em;opacity:.4;z-index:1;pointer-events:none;}
figure a {padding:1em;border-radius:4px;position:absolute;top:0;left:0;height:100%;width:100%;}

figure:hover:after, figure:hover .figcaption {opacity:1;color:#fff;text-shadow:0 0 1px #000;}

figure a.video:after {content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url(../img/video.png) no-repeat center center;background-size:40% 40%;}

@media (hover: hover) and (pointer: fine) {
figure a:hover {background:currentColor;}
figure a.video:hover {background:#181712;}
/*figure a.image:hover img, figure a.video:hover video {mix-blend-mode:luminosity;}*/
}

input[type=range] {width:150px;position:absolute;top:1.125em;right:4em;-webkit-appearance:none;height:1.2em;background:transparent;border:0;}
input[type=range]:focus {outline:0;}
input[type=range]::-webkit-slider-runnable-track {height:1px;background:rgba(var(--fontrgb-color).25);border-radius:0;border:0;}
input[type=range]::-webkit-slider-thumb {cursor:grab;border:2px solid var(--bg-color);height:15px;width:15px;border-radius:50%;background:var(--font-color);-webkit-appearance:none;margin-top:-7px;}
input[type=range]::-webkit-slider-thumb:active {cursor:grabbing;}
input[type=range]::-moz-range-track {height:1px;cursor:pointer;background:rgba(var(--fontrgb-color).25);border-radius:0;border:0;}
input[type=range]::-moz-range-thumb {cursor:grab;border:2px solid var(--bg-color);height:13px;width:13px;border-radius:50%;background:var(--font-color);}
input[type=range]::-moz-range-thumb:active {cursor:grabbing;}
input::-moz-focus-outer {border: 0;}

@media only screen and (max-width:600px) {
  .grid {padding:.5em;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr))!important;}
  figure a {padding:1em .5em;}
  figure:after {bottom:.45em;right:.65em;}
  #resize {display:none;}
}