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

  --h1-text: #94e2d5; /* h1 text */
  --underline: #9399b2; /* button outline */
  --bg2: #313244; /* box backgrounds */
  --border: #000;

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

  --text: #cdd6f4; /* book title text */
  --text2:#bac2de; /* author text */
  --text3:#a6adc8; /* series text */

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


:root {
/* fonts */
  --header: serif;
  --body: "Mansalva";
  --title: "DM Sans"; /* book title */
  --author: "Walter Turncoat";
  --series: 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://sadhost.neocities.org/images/tiles/whtbrickwallbg.gif");
  background-attachment: fixed;
  position: relative;
  margin: 0 auto;
  font-family: var(--body);
    font-size: 18pt;
    color: #c0c0c0;
  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: 20pt;
    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);
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover{color:var(--link2);}
a:visited {color:var(--link3);}
a:visited:hover {color: var(--link4);}

time { /*author formatting*/
  font-family: var(--author);
  font-size: 11pt;
  letter-spacing: 0.5px;
  color: var(--text2);
  border:1px dashed red;
}

time.subtitle{ /* series formatting */
  font-family: var(--series);
  color: var(--text3);
  font-size: 10pt;
  border: 1px dashed blue;
}

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);
  opacity: 0.9;
}

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

/* button theme colors*/
:root {
  --green: #a6e3a1;
  --yellow: #f9e2af;
  --blue: #74c7ec;
}

/* specific theming for buttons */

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

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

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

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


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

.button:hover {
  background-color: var(--bg2);
  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 {
}

.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 {
  width: 8.5rem;
  height: 12.75rem;
  margin-bottom: 1.1rem;
  overflow: clip;
  border: var(--border-style);
  filter: var(--drop-shadow-style);
}

.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;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 98;
  font-size: 1rem;
  line-height: 1.25;
  
  text-align: left;
  color: var(--text);
  background: var(--bg2);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-letter-spacing);
  padding: 1em;
  height: 100%;
  width: 100%;
}


.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 98;
  font-size: 1rem;
  line-height: 1.25;
  font-family: var(--title);
  text-align: left;
  color: var(--text);
  background: var(--bg2);
  padding: .75rem;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}

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

/* HIDDEN STUFF */

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