*{
  box-sizing:border-box;
  --white: #f7f4eb;
  --light: #FFE4ED;
  --med: #d55a3e;
  --dark: #FF7DA9;
  --black: #141317;
}

@font-face {
  font-family: 'EB Garamond';
  src: url(https://hillhouse.neocities.org/shrines/hauntings/EBGaramond08-Regular.otf);
}

@font-face {
  font-family: 'EB Garamond';
  font-style:italic;
  src: url(https://hillhouse.neocities.org/shrines/hauntings/EBGaramond08-Italic.otf);
}

#covers {
 display:block;
 width:100%;
 margin:0 auto;
 padding:0;
 text-align:center;
 padding-right:100px
}
h3{  
  margin:0px;
   font-family:EB garamond;
  filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(1px 1px 1px #451E0C);
  font-size: 14px;
  background-size:cover;
 background-repeat:no-repeat;
background-position:center;
color:#FC3A7B;
}
.cover {
 display:inline-flex;
justify-content:flex-start;
flex-flow:column;
 text-align:center;
 padding:10px;
 filter:drop-shadow(0 0 5px black);

}

.cover img {
 object-fit:contain;
 height:400px;
 /* height:100px; */
 margin:3px 10px;
 filter: brightness(105%);

}
.cover .info {
 background:white;
 color:black;
 line-height:1.3em;
 padding:5px 15px;
 max-width:270px;
 margin:10px auto;
 position:relative;
 text-transform:lowercase
}
.cover.double .info {
  max-width:400px;
}
article.intro {
  margin-right:100px;
  max-width:900px;
  font-size:1.1em

}

article#sort {
  position:fixed;
  top:0px;
  right:10px;
  min-width:0px;
  width:150px;
  max-width:150px;
  padding:0;
  margin:0;
  text-align:center;
  z-index:100
}

#sort a {
  display:block;
  background:white;
  color:black;
  margin:3px auto
}
#sort a:hover {
  background:var(--med);
  color:white
}
#sort a:active {
  background:var(--dark);
  color:white
}
body {
  min-height:100vh;
  padding:10px 5%;
  font-size:17px;
  line-height:1.4em;
  font-family:'EB Garamond';
  background-image:url(images/BG-2024-penguin.png);
  background-repeat:repeat;
  background-position:bottom;
  background-attachment:fixed;
  background-color:var(--black);
  color:var(--white);


  align-content: center;align-items: center;
  justify-content: center
}

.info b {
  color:var(--dark);

  font-size:.9em
}
.info a.link, .info a {
  color:var(--med);
  font-style:italic;
  /* position:absolute;
  right:0;
  bottom:0 */
}

main {
  display:flex;
  flex-flow:row wrap;
  justify-content: center;
}

article {
  background:var(--light);
  padding:20px;
  outline:1px dashed var(--med);
  outline-offset:3px;
  width:fit-content;
  margin:25px;
  border:1px solid var(--dark);
  max-width:fit-content;
  text-align:left;
  color:var(--black);
  box-shadow:0 0 20px rgba(0,0,0,.5);
  min-width:250px;
}
img {
  max-width:100%;
}

h1 {
  font-family:'Abril Fatface';
  font-size:45px;
  line-height:.8em;
  text-align:center;
}
h2 {
  background:var(--med);
  color:var(--white);
  display:inline-block;
  padding:10px;
  text-align:left;
  outline:2px solid var(--med);
  outline-offset:1px;
}
.big {
    flex:1 1 100%
}

a, summary {
  color:var(--white)
}
a:hover:not(a.returnhome:hover), summary:hover, article.intro details[open] summary {
  color:var(--dark);
  background:var(--white);
  text-decoration:none !important
}

a.returnhome {
  text-decoration:none;
  position:fixed;
  top:0px;
  left:0px;
  padding:10px;
}
a.returnhome:hover img {
  transform:rotate(-5deg)
}
summary {
  display:inline
}
#sort a.totop {
  /* background:transparent;
  color:white;
  font-size:20px;
  font-weight:bold */
}

@media only screen and (max-width: 600px) {
  #covers {
    padding-right:0;
    width:100%
  }
  article#sort {
    position:sticky
  }
  article#sort, article.intro {

    width:100%;
    max-width:100%;
    margin:10px auto;
    right:0
  }
  #sort a {
    display:inline-block;
    padding:5px;
  }
  }


  .img-popup {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(38, 40, 52, 0.9);
      text-align: center;
      display: none;
      z-index: 9999999999999;
      animation: pop-in;
      animation-duration: .2s;
      -webkit-animation: pop-in .2s;
      -moz-animation: pop-in .2s;
      -ms-animation: pop-in .2s;

  }

  .img-popup img {
      position: absolute;
      top: 50%;
      max-width: 80vw;
      max-height: 90vh;
      min-height:60vh;
        object-fit:contain;
      display: inline-block;
      transform: translate(-50%, -50%);
          box-shadow:15px 15px var(--dark);
           filter: brightness(105%);

  }

  .close-lightbox {
      position: absolute;
      top: 20%;
      right: 20%;
      color: var(--pale);
      font-size: 5em;
      border-radius: 50%;
      z-index: 99;
      cursor: pointer;
      text-shadow: 1px 1px 5px black;
 
  }
  .lightboxfadeout{
      animation: fadeout;
      animation-duration: .2s;
      -webkit-animation: fadeout .2s;
      -moz-animation: fadeout .2s;
      -ms-animation: fadeout .2s;
  }