@import url("https://fonts.googleapis.com/css2?family=Notable&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body#Credential {
  --theme-light: #fff;
  --theme-dark: #0c0c0c;
  --theme-gradient: blueviolet;
  background-color: black;
  padding: 2ch;
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
  flex-direction: column;
}

#Credential > nav {
  height: 5vh;
  width: 100%;
}

#Credential > h1 {
  font-family: "Notable", sans-serif;
}

body#Books {
  height: 100vh;
  width: 100Vw;
  background-color: #fefefe;
  background-image: radial-gradient(burlywood 20%, transparent 20%);
  background-repeat: repeat;
  background-size: 2vmin 2vmin;
  background-position: 0% 0%;
}
body#Books main {
  height: 40vh;
  width: 100vw;
}
body#Books .list {
  display: flex;
  flex-direction: row;
  gap: 2ch;
  padding-inline: 1ch;
}
body#Books .book {
  --blue: #ace5fb;
  --yellow: #edc032;
  --green: hsl(145, 51%, 37%);
  --green-dark: hsl(145, 65%, 22%);
  --brown: #eeb26a;
  background-color: var(--green);
  display: flex;
  flex-direction: column;
  gap: 1ch;
  height: 40vmin;
  aspect-ratio: 9/10;
  padding: 2ch;
  color: white;
  text-decoration: none;
  border-radius: 1rem;
  outline: none;
}
body#Books button {
  width: 70%;
  margin-inline: auto;
  border-radius: 3rem;
  border: 2px solid black;
  border-bottom: 5px solid black;
  border-right: 4px solid black;
  padding-inline: 2ch;
  padding-block: 1.57ch;
  font-size: medium;
  color: white;
  background-color: var(--green-dark);
}

.highlight_btn {
  z-index: 10;
  margin-top: 2ch;
  margin-left: 50%;
  width: 100px;
  aspect-ratio: 3/1;
  border-radius: 20px;
  background-color: #1a1a1a;
  outline: none;
  border: 0;
  position: fixed;
}

.read > .slider {
  transform: translateX(100%);
}

.visual > .slider {
  transform: translateX(-20%);
}

.highlight_btn > .slider {
  background-color: #1a1a1a;
  scale: 1.5;
  height: 40px;
  aspect-ratio: 1;
  border-radius: 100%;
  border: 5px solid var(--Feldgau);
  transition: all ease-in-out 500ms;
}

[data-state=visual].visual > .slider::before {
  content: "";
  background-color: var(--Feldgau);
  width: 40px;
  height: 13px;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-15%, -50%);
  animation: blink 2500ms linear infinite;
}

[data-state=visual].visual > .slider::after {
  content: "";
  background-color: #1a1a1a;
  height: 13px;
  aspect-ratio: 1/2;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-15%, -50%);
}

@keyframes blink {
  90% {
    height: 13px;
  }
  95% {
    height: 0;
  }
  100% {
    height: 13px;
  }
}
article.visual {
  background-color: black;
  overflow-y: hidden;
  padding: 5ch 2ch;
}

.poster-wrapper {
  display: none;
  width: 100%;
  gap: 2px;
  row-gap: 4px;
  height: 400vh;
  flex-direction: column;
  flex-wrap: wrap;
  transform: translateY(33%);
  animation: scrollThrough 20s linear 2s infinite;
  animation-play-state: paused;
}
.poster-wrapper img {
  max-width: 48%;
}

article.visual:hover {
  background-color: #444444;
}
article.visual:hover .poster-wrapper {
  animation-play-state: running;
}

@keyframes scrollThrough {
  to {
    transform: translateY(-133%);
  }
}
:root {
  --Feldgau: #3a4f41;
  --Rosa-red: #b9314f;
  --Rosy-brown: #D5a18e;
  --Pale-dogwood: #dec3be;
  --Platimun: #E1DEE3;
}

ul {
  padding: 2ch;
  display: flex;
  justify-content: space-between;
}

li {
  list-style: none;
  font-family: "Permanent Marker", cursive;
  color: #1a1a1a;
  background-color: #b9314f;
  border: #1a1a1a 2px solid;
  border-radius: 2%;
  position: relative;
}

body {
  background-color: var(--Feldgau);
  color: var(--Platimun);
  font-size: 2rem;
}

.card-wrapper {
  width: 100vw;
  height: -moz-fit-content;
  height: fit-content;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5vw;
  gap: 1ch;
}

.card {
  aspect-ratio: 10/3;
  max-height: 200vh;
  background-color: var(--Rosa-red);
  border: #1a1a1a 2px solid;
  border-radius: 2%;
  padding: 1ch;
  font-size: 3rem;
  text-decoration: none;
  color: var(--Platimun);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.card > p {
  font-size: 1.75rem;
  color: var(--Rosy-brown);
  margin-left: 2ch;
}

article {
  width: 100vw;
  height: 100vh;
}/*# sourceMappingURL=style.css.map */