* {
  margin: 0; padding: 0; 
  box-sizing: border-box;
  
/* colors */

  --h1-text: #0099BC; /* h1 text */

  --bg2: #4A5459; /* box backgrounds */
  --border: #000000;

  --link:  #e78284; /* link text */
  --link2: #fab387; /* link :hover text */
  --link3: #f38ba8; /* link has been visited */
  --link4: #ef9f76; /* link visited :hover */

  --text: #8E8CD8; /* title text */
  --text2:#0d36c8; /* year text */
  --text3:#a6adc8;

  --black: #11111b;
  --mantle: #181825;
  --base: #1e1e2e;
  --surface1: #45475a;
  --surface2: #585b70;
  --overlay1: #6c7086;
  --overlay2: #7f849c;
  --overlay3: #9399b2;
}

:root {
/* fonts */
  --header: serif;
  --body: "Mansalva";
  --title: monospace;
  
/* border formatting */
  --border-style: 1px solid var(--border);
  --drop-shadow-style: drop-shadow(.3rem .3rem 0rem var(--border));
}

/* basic formatting */
main {
  position: relative;
  max-width: 95%;
  margin: 0 auto;
}

body {
  background-image: url("https://i.postimg.cc/tJYkH76H/040ddd559411fd819f240d217d32421273a78165.jpg");
  background-attachment: fixed;
  position: relative;
  margin: 0 auto;
  font-family: var(--body);
    font-size: 18pt;
    color: var(--text);
  line-height: 1.5;  
}

#main {
  padding: calc(3rem + .1vw) 5vw 5vw 5vw;
  position: absolute;
  top: 0;
  min-height: 100vh;
  width: 100%;

}

h1 {
  font-family: "Mansalva";
    font-size: 30pt;
    color: var(--h1-text);
    font-weight: bold;
  letter-spacing: 0.5px;
  width: auto;
  margin: -1rem -1rem .75rem -1rem;
  padding: .55rem 1rem;
  border-bottom: var(--border-style);
  background: var(--h1-bg);
}

time { /*year*/
  font-family: var(--title);
  font-size: 11pt;
  letter-spacing: 0.5px;
  color: var(--text2);
}

hr {
  height: 1px;
  border: .5px solid var(--border);
  background: none;
  margin: 0.75em auto;
}

p {
  margin: 0.5rem 0;
}
/* box formatting */
.box {
  padding: 1rem;
  margin-bottom: 1.25rem;
  background: var(--bg2);
  border: var(--border-style);
  filter: var(--drop-shadow-style);
}

/* misc */
img, svg, video, audio {
  display: block;
  max-width: 100%;
  height: auto;
}

.gear-photos {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin: .75rem 0;
}

.vcr-photo,
.rewinder-photo {
  display: inline-block;
  vertical-align: middle;
  width: 36%;
}

/* button theme colors*/
:root {
  --green: #00cc6a;
  --yellow: #FFB900;
  --blue: #0063b1;
}

/* specific theming for buttons */

/*
button[data-filter=".clamshell"]:hover,
.button[data-filter=".owned"]:active,
.button[data-filter=".owned"].is-checked {
  background-color: var(--black);
  color: var(--black);
}
*/

button[data-filter="*"]:hover, /*all*/
.button[data-filter="*"]:active,
.button[data-filter="*"].is-checked {
  background-color: var(--blue);
  color: var(--black);
}

button[data-filter=".sleeve"]:hover,
.button[data-filter=".sleeve"]:active,
.button[data-filter=".sleeve"].is-checked {
  background-color: var(--green);
  color: var(--black);
}

button[data-filter=".clamshell"]:hover,
.button[data-filter=".clamshell"]:active,
.button[data-filter=".clamshell"].is-checked {
  background-color: var(--yellow);
  color: var(--black);
}


/* button formatting */
.button {
  display: inline-block;
  padding: .25rem .5rem;
  background: var(--base);
  border: 3px outset var(--surface1);
  filter: none;
  color: var(--text);
  font-size: 1rem;
  font-family: monospace;
  cursor: crosshair;
}

.button:hover {
  background-color: var(--base);
  color: var(--text3);
  border: 3px inset var(--surface1);
}

.button:active,
.button.is-checked {
  border: 3px inset var(--base);
  color: var(--black);
}

/* button group */
.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin: 0rem .5rem .5rem 0rem;
}

#sorts {
  margin-bottom: -.5rem;
}

/* GRID */
.grid-iso {
  display: grid;
  margin: 0 auto;
  grid-gap: 1.3em;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); /* 150px = minimum image size */
  grid-auto-flow: dense;
  padding: 0em;
}

/* ITEM */

.item {
  position: relative;
  width: 8.5rem;
  height: 14.2rem; /* standard VHS sleeve, ~1.67:1 */
  margin-bottom: 1.1rem;
  overflow: clip;
  border: var(--border-style);
  filter: var(--drop-shadow-style);
}

.item.clamshell {
  height: 12.2rem; /* clamshell cases run more square, ~1.43:1 */
}

.item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: inline-block;
}
.item:hover .overlay {
  opacity: 1;
}

/* ITEM INFO */

.overlay {
  opacity: 0;
  transition: 0.25s;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 98;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;

  font-family: var(--title);
  font-size: .8rem;
  line-height: 1.3;
  text-align: left;
  color: var(--text);
  background: var(--black);
  padding: .5em .6em;
}

.overlay-title {
  font-weight: bold;
  margin: 0;
}

.overlay time {
  display: block;
  font-size: .7rem;
  color: var(--text2);
  margin: .15em 0;
}

.overlay .quip {
  font-style: italic;
  color: var(--text3);
  margin: .25em 0 0 0;
}

.item > * {
  margin: 0;
  padding: 0;
}

/* HIDDEN STUFF */

.item .name, .item .date {
  display: none;
}

/* BOOKSHELF */
.shelf-wall {
  display: grid;
  width: -webkit-fit-content;
  width: fit-content; /* never wider than one row of 25 tapes */
  max-width: 100%; /* still shrinks instead of overflowing on narrow windows */
  grid-template-columns: repeat(25, minmax(0, .95rem)); /* fixed number of tapes per row, caps at natural width, shrinks to fit */
  grid-auto-flow: row;
  align-items: flex-end;
  column-gap: .35rem;
  row-gap: 1.6rem;
  padding: 0 .25rem 1.6rem; /* room for the last row's shelf board to render */
  margin: 1rem 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0rem, transparent 6.5rem,
    #6b4b30 6.5rem, #6b4b30 6.65rem,
    #4a3423 6.65rem, #4a3423 7rem,
    #2e2015 7rem, #2e2015 7.15rem,
    transparent 7.15rem, transparent 8.1rem
  );
}

.spine {
  width: 90%;
  justify-self: center;
  height: 6.5rem;
  overflow: clip;
  background: var(--base);
  border: 1px solid rgba(0,0,0,.5);
  border-radius: 1px 1px 0 0;
  box-shadow: inset -3px 0 4px rgba(0,0,0,.25), 2px 3px 3px rgba(0,0,0,.35);
  /* grow, adapted from code snippets/hover.css .hvr-grow */
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  transform-origin: 50% 100%; /* pivot on the shelf so it rises up, not through it */
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-property: transform, box-shadow;
  transition-property: transform, box-shadow;
}

.spine:hover, .spine:focus {
  -webkit-transform: perspective(1px) translateZ(0) scale(3);
  transform: perspective(1px) translateZ(0) scale(3);
  z-index: 50;
  box-shadow: inset -3px 0 4px rgba(0,0,0,.25), 4px 12px 20px rgba(0,0,0,.55);
}

.spine.clamshell {
  width: 100%; /* ~7:1 h:w, measured from real clamshell spine photos */
}

.spine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}