/* deprecated (for now:) $backpad-color: #f9e9b8; */
/* don't forget to adjust base.njk imports in the head if you're going to change the fonts! */
/* mainly used for text */
/* mainly used for titles, headers, etc. */
/* for a lack of a better solution for now, we declare EACH shadow part for each element separately: */
/* think if you can declare them at the same time, through commas | maybe it could me easier if we store the whole shadow val along with s-size in one var*/
/*
Having declared the vars above, migrate them to src/_data/color-scheme.scss
*/
image {
  display: block;
}

body {
  background-image: url("../img/aj-bgimg.png");
  background-repeat: no-repeat;
  padding: 2% 2% 5% 2%;
  font-size: 2rem;
  font-family: "Sour Gummy";
  background-color: #fff5ec;
  color: #873b50;
}

h1, h2 {
  font-family: "Rancho";
  font-weight: 500;
  text-shadow: 0 0 7px #c96985, 0 0 10px #b18a92, 0 0 21px #d1b7c2;
}

/* scrapped "retro"-ish envelope wrapper stuff. it broke more than it made sense to fix.
#backpad {
    position: relative;
    bottom: 5%;
    background-color: theme.$header-shadow-in;
    margin-bottom: -100%;
    padding-top: 2%;
    z-index: -1;

    filter: drop-shadow(10px 10px theme.$header-shadow-out);
}

header {
    position: relative;
    bottom: -80px;
    margin-top: -5%;
} */
footer, nav, h1, h2 {
  text-align: center;
}

p, ul {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 100;
  text-shadow: 0 0 3px #fff5ec;
}

hr {
  margin: 0 35% 0 35%;
  color: inherit;
}

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

/* 
TODO: on .gallery img:hover implement a darkening effect: create a 0-opacity layer of black that you 
transition into on :hover.
 */
img {
  image-rendering: auto;
  mix-blend-mode: normal;
  transition: all ease-in-out 0.3s; /* its the default but can be overwritten */
}

a {
  font-family: "Rancho";
  text-decoration: none;
  cursor: alias;
  font-weight: 350;
  color: #d8766b;
  text-shadow: 0 0 7px #cf644e;
}

a:hover, a:focus {
  color: #8a7567;
}

a:visited {
  color: #873b50;
}

a:active {
  color: #95a46b;
  text-shadow: 0 0 3px #95a46b;
}

::selection {
  color: #fff5ec;
  border-radius: 15px;
  background: #95a46b;
  text-shadow: none;
}

/* TODO: "3D" body with duplicated darker rectangle behind as its "shadow". Tilted, perhaps, slightly?
Header text can stick out. Footer?*/
/* 
    Remember, Nova! .classes are (can be) *applied* to a lot of stuff, while #ids MUST BE UNIQUE!

    From StackOverflow: n general, use id whenever you want to refer to a specific element and class when you have a number of things that are all alike. 
    For instance, common id elements are things like header, footer, sidebar. Common class elements are things like highlight or external-link.
*/
nav {
  padding-bottom: 0%;
}

nav a {
  /* todo: BORDER-IMAGE (maybe like a cool grapevine?) */
  padding: 2px 3px 2px 3px;
  border: 2px double #d8766b;
  border-radius: 10px;
}

nav a:visited {
  border-color: #873b50;
}

nav a:active {
  border-color: #95a46b;
}

#markbg { /* cutiemark goes here */
  position: absolute;
  bottom: 425px;
  left: 78%;
  margin-bottom: 150px;
  rotate: 15deg;
  content: url("../img/aj-mark.png");
  filter: drop-shadow(5px 2px #873b50);
  z-index: -1;
}

#main {
  padding: 2% 12% 2% 12%;
}

#main h5 {
  text-indent: 1%;
  line-height: 75%;
  margin: 2.5rem 0 1rem 0;
}

#main img {
  border-radius: 15px;
}

#index img {
  image-rendering: pixelated;
  mix-blend-mode: multiply;
}

/* YOU CAN CLIP STUFF TO OTHER STUFF BTW */
#footer {
  padding: 2% 12% 0 12%;
  font-size: 16px;
  bottom: 0;
  height: 2em;
  position: sticky;
  height: 20px;
  /* through '.footer im {} implement a nice bottom triangle' */
}

#footer a {
  font-family: "Sour Gummy";
}

.sticky-bottom {
  transition: cubic-bezier(0.895, 0.03, 0.685, 0.22) 0.5s;
  position: fixed;
  bottom: 0;
  z-index: 1000;
}

.sticky-bottom img {
  overflow-y: visible;
  margin-bottom: -225px;
  margin-left: 95rem;
}

.sticky-bottom img:hover {
  margin-bottom: -35px;
}

#gallery {
  text-align: center;
  margin-top: 1rem;
  padding-left: 20px;
}

#gallery img {
  width: 33%;
  height: 33%;
}

#audio-pagedesc {
  padding-bottom: 4%;
}

#audiobook {
  display: grid;
  grid-template-columns: repeat(3, 400px);
  gap: 88.5px;
  box-shadow: 0, 0, 0;
  transition: all ease 0.5s;
}

/* .audiobook p {
    text-decoration: underline double;
} */
#audiobook div {
  padding: 20px 20px 20px 20px;
  text-align: center;
}

#audiobook audio {
  background-color: #d8766b;
  box-shadow: 0 0 12px #873b50;
  border-radius: 10px;
}

.img-glow img:hover {
  box-shadow: 0 0 5px #c96985, 0 0 15px #b18a92, 0 0 25px #d1b7c2;
}