/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*
BASICS
*/

body {
  background-color: #333333;
  color: white;
  font-family: Verdana;
  font-size: 18px;
  margin: 0;
  image-rendering: optimizeSpeed;
  text-rendering: optimizeSpeed;
}

/*
IDS
*/

#rightSidebar {
  background-color: #99999900   ;
  width: 48%;
  padding: 20px;
  order: 1;
  font-size: smaller;
}

#leftSidebar {
  background-color: #99999900;
  width: 48%;
  padding: 20px;
  order: 3;
  font-size: smaller;
  height: 20rem;
}
#flex {
  display: flex;
}
#everything {
  max-width: 88%;
  margin: 0 auto;
}

/*
CLASSES
*/

.box {
  background-color: #111;
  padding: 10px;
}

.book {
  display: flex;
  position: absolute;
  justify-content: center;
  animation-name: book-perspective;
  animation-duration: 16s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform: perspective(1000px) rotate(-8deg) rotateY(-20deg);
  height: 500px;
  right: 500px;
  bottom: -32px;
  filter: drop-shadow(0px 8px 8px #0008);
}

.book-side {
  position: absolute;
  background-color: purple;
  width: 400px;
  height: 500px;
  align-content: center;
}

.book-cover {
  background-color: black;
  position: absolute;
  transform-origin: left;
  transform-style: preserve-3d;
  animation-name: book-open-cover;
  animation-fill-mode: forwards;
  animation-duration: 4s;
  animation-delay: 2s;
  z-index: 13;
  scale: 100.4%;
  translate: -1px;
}

.book-side-A {
  background-color: white;
  position: absolute;
  transform-origin: left;
  transform-style: preserve-3d;
  animation-name: book-open-page;
  animation-fill-mode: forwards;
  animation-duration: 4.2s;
  animation-delay: 2.8s;
  z-index: 12;
}

.arrows {
  animation-name: arrows-ani;
  animation-iteration-count: infinite;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
}

.front-image {
  filter: invert(100%);
  right: -8px;
  bottom: 40px;
  position: absolute;
}

.rainbow {
  color: red;
  animation-name: rainbow;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.float-icon {
  animation-name: floating-icon;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.float-default {
  animation-name: floating-default;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/*
ANIMATIONS
*/

@keyframes book-perspective {
  0%, 100% {transform: rotateZ(-8deg) rotateY(-10deg)}
  50% {transform: rotateX(2deg) rotateZ(-10deg) rotateY(-20deg)}
  
}

@keyframes book-open-cover {
  0% {transform: rotateY(0deg); z-index: 13}
  50% {z-index: 13}
  51% {z-index: 11}
  100% {transform: rotateY(-180deg); z-index: 11}
}

@keyframes book-open-page {
  0% {
    transform: rotateY(0deg);
    background-color: #9a8c80;
  }
  100% {
    transform: rotateY(-120deg);
    background-color: #917e6a;
  }
}

@keyframes arrows-ani {
  0%, 100% {transform: rotateY(-32deg); filter: brightness(0.9)}
  25% {transform: rotateX(32deg); filter: brightness(1)}
  50% {transform: rotateY(32deg); filter: brightness(0.8)}
  75% {transform: rotateX(-32deg); filter: brightness(0.6)}
}


@keyframes rainbow {
  0% {color: red;}
  25% {color: green}
  50% {color: cyan}
  75% {color: purple}
  100% {color: red;}
}

@keyframes floating-icon {
  0%, 100% {transform: translateY(8px) rotateX(8deg) rotateY(20deg) rotateZ(-8deg);}
  50% {transform: translateY(0px) rotateX(0deg) rotateY(20deg) rotateZ(-10deg);}
}

@keyframes floating-default {
  0%, 100% {transform: translateY(0px)}
  50% {transform: translateY(8px)}
}

main {
  background-color: black;
  padding: 20px;
  width: 100%;
  order: 2;
  text-align: center;
  position: relative;
  perspective: 1000px;
}

ul { list-style-type: none; 
  padding: 2px 2px 2px 2px;
}

ul li {
  position: relative;
  transition: 0.2s;
  background: transparent;
  padding: 2px 8px 2px 8px;
}

ul li:hover {
  padding: 2px 8px 2px 10px;
}

.checked { 
  text-decoration: line-through; 
  font-style: italic;
}