/* yellow --> red */
image {
  display: block;
}

/* This is very messy. I'll clean it up later but my MO for this was "style over substance" (lit.) */
img {
  image-rendering: crisp-edges;
  mix-blend-mode: normal;
  transition: all ease-in-out 0.3s;
}

body {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-family: "Cormorant Infant";
  background-color: #f6c0ab;
  color: #9b433f;
}

h1 {
  font-size: 3em;
}

h1, h2 {
  text-shadow: 0 0 3px #1d0100, 0 0 5px #8a6156, 0 0 10px #d6c0ab;
}

h3, h4, h5, p, ul, ol {
  text-shadow: 0 0 3px #1d0100;
  text-align: center;
}

h1, h2 {
  font-family: "EB Garamond";
  font-weight: 600;
  text-align: center;
}

footer, nav, header {
  text-align: center;
}

header h1 {
  margin-bottom: 1rem;
}

h5 {
  font-size: 1.5rem;
  margin: 0.25rem 1rem 0.25rem 1rem;
}

p, ul {
  margin: 0.25rem auto 1.125rem auto;
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 150;
}

hr {
  margin: 2% 25% 2% 25%;
  color: inherit;
}

ul {
  list-style-type: circle;
  list-style-image: url("../img/listico.png");
  list-style-position: inside;
}

a {
  text-decoration-line: none;
  color: #b17070;
  text-shadow: 0 0 3px #3b0f0e;
}

a:hover, a:focus {
  color: #5e5043;
}

a:visited {
  color: #1d0100;
  text-shadow: none;
}

a:active {
  color: #955c55;
  text-shadow: 0 0 7px #955c55;
}

/* Paper overlay start 
Halftone effect implementation based from https://leanrada.com/notes/pure-css-halftone/
But the end result is a malformed child of all the evil in this world and has nothing in common with her implementation. */
.overlay-effect {
  padding: 2% 2% 5% 2%;
  position: relative;
  filter: brightness(0.75) blur(0.5px) contrast(3) brightness(0.9) sepia(0.5) saturate(0.33);
  overflow: hidden;
  background-color: #f6c0ab;
}

.overlay-effect::after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  inset: 0;
  background: radial-gradient(circle at center, black, #d6c0ab), radial-gradient(circle at 45% 45%, cyan, #d6c0ab), radial-gradient(circle at 55% 45%, magenta, #d6c0ab), radial-gradient(circle at 50% 55%, yellow, #d6c0ab);
  background-size: 2px 2px;
  transform: rotate(88deg);
  scale: 2;
  background-blend-mode: multiply;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}

.overlay-effect::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.image-render-overlay {
  filter: sepia(1) hue-rotate(10deg) contrast(0.3) brightness(1.22);
}

/* Paper overlay end */
footer a, nav a {
  font-family: "EB Garamond";
  text-decoration: none;
  cursor: pointer;
  font-weight: 450;
}

nav a {
  font-size: 1.5rem;
}

footer a {
  font-size: 1.25rem;
}

::selection {
  color: #f6c0ab;
  border-radius: 15px;
  background: #955c55;
}

#main {
  padding: 0 5% 0 5%; /* 
border-radius: 2px;
border: 2px solid #000;
border-spacing: 2rem; */
}

#footer {
  padding: 2% 12% 0 12%;
  font-size: 16px;
  bottom: 0;
  height: 2em;
  position: sticky;
  height: 20px;
  z-index: 2;
}

#footer a {
  font-family: "Cormorant Infant";
}

.sticky-bottom-stat {
  position: fixed;
  bottom: -5%;
  filter: brightness(1.5) grayscale(100%);
  rotate: -15deg;
  mix-blend-mode: multiply;
  image-rendering: auto;
  right: -12%;
  pointer-events: none;
}

.centergrid {
  display: grid;
  grid-template-columns: 31.33333% 31.33333% 31.33333%;
  grid-auto-rows: max-content;
  column-gap: 3%;
  row-gap: 3%;
  text-align: center;
  padding-bottom: 2%;
}

.centergrid div:nth-child(3n) {
  text-align: center;
}

.centergrid div:nth-child(3n-2) {
  text-align: center;
}

.albumimg {
  width: 67%;
  box-shadow: 0px 0px 0px #3b0f0e;
  z-index: 0;
}

.titleimg {
  height: 5vw;
}

.albumdesc i {
  font-size: 1.25rem;
}

.shrineplayer {
  position: relative;
  width: 0px;
  top: -10vw;
  border-radius: 15px;
  transition: all ease-in-out 0.3s;
  z-index: -1;
}

/* .albumimg {
    rotate: calc(math.random($limit: 14) * 1deg - 7deg);
} */