@font-face {
  font-family: 'UP';
  src: url(/pages/Anime_Guru/up_and_down/Up\ and\ Down\ -\ Personal\ Use\ by.\ HIRO.std.ttf);
}
@font-face {
  font-family: 'MEZ';
  src: url(/pages/Anime_Guru/the_mezirane/THE\ MEZIRANE.ttf);
}
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  height: auto;
  min-height: 100vh;
  font-family: monospace;
  color: white;
  letter-spacing: .3rem;
  background-color: rgb(5, 6, 20);
}
a {
  color: white;
  letter-spacing: .4rem;
  font-family: 'MEZ', sans-serif;
  font-size: 1rem;
  font-weight: 100;
  text-decoration: none;
  text-shadow: 1px 3px 4px rgba(37, 37, 37, 1);
  transition: all 400ms ease-in-out;
}
a:visited {
  color: white;
}
a:hover {
  color: #f1683a;
  letter-spacing: .7rem;
}
header {
  width: 1140px;
  max-width: 80%;
  margin: auto;
  height: 50px;
  display: flex;
  align-items: center;
  /* this was hidden until position and z index was defined, it was behind carousel */
  position: relative;
  z-index: 100;
}
header a {
  margin-right: 40px;
}

/* CAROUSEL */
/* width and height should be equal to the screen/viewport */
.carousel {
  width: 100vw;
  height: 100vh;
  /* hide content outside of the frame */
  overflow: hidden;
  /* /* margin on header is 50px so we want to have carousel at the very top */
  margin-top: -50px;
  position: relative;
}
.carousel .list .item {
  /* the header has been covered by carousel, we just need to change the z index */
  /* by default it will be position to the parent which is the body so we add relative position to our selected parent which is the carousel  */
  position: absolute;
  inset: 0 0 0 0;
  /* using the property inset will have same effect as top bottom etc. properties */
}
.carousel .list .item img {
  /* the images inside the carousel will be the same size as the items themselves */
  /* using object fit property with value of cover will make it fit the parent item */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel .list .item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Specific Video/Image Styles */
#ricky_img {
  display: block;
  cursor: pointer;
}
#ricky_vid {
  display: none;
}
#itadori_img {
  display: block;
  cursor: pointer;
}
#itadori_vid {
  display: none;
}
#fma_img {
  display: block;
  cursor: pointer;
}
#fma_vid {
  display: none;
}
.carousel .list .item .content {
  /* using absolute position will position content in specific location on the item parent */
  position: absolute;
  top: 20%;
  /* content size */
  width: 1140px;
  max-width: 80%;
  left: 50%;
  /* we want to center the content element so we use transform property to center it */
  transform: translateX(-50%);
  /* shrink the element with padding */
  padding-right: 30%;
  /* a class that used width with padding needs box sizing to not change the size defined*/
  color: white;
  text-shadow: 0 5px 10px rgb(62, 62, 62);
}
.carousel .list .item .content .author {
  font-weight: bold;
  letter-spacing: 10px;
}
.carousel .list .item .content .title,
.carousel .list .item .content .topic {
  font-weight: bold;
  font-size: 5em;
  line-height: 1.3em;
}
.carousel .list .item .content .topic {
  color: orange;
}
.carousel .list .item .content .desc {
  max-width: 375px;
}
.carousel .list .item .content .buttons {
  display: grid;
  grid-template-columns: repeat(2, 130px);
  grid-template-rows: 40px;
  gap: 5px;
  margin-top: 20px;
}
.carousel .list .item .content button {
  border: none;
  background: white;
  letter-spacing: .4rem;
  font-family: 'MEZ', sans-serif;
  font-weight: 500;
  cursor: pointer;
}
.carousel .list .item .content button:nth-child(2) {
  background-color: transparent;
  color: white;
  border: 1px solid white;
}
/* Thumbnail */
.thumbnail {
  position: absolute;
  bottom: 50px;
  left: 50%;
  /* scale according to content inside */
  width: max-content;
  /* overlaps items in class list */
  z-index: 100;
  /* items inside are in same row and gap for distance */
  display: flex;
  gap: 20px;
}
.thumbnail .item {
  width: 150px;
  height: 220px;
  /* using flex shrink we avoid thumbnail shrinking during smaller viewport changes */
  flex-shrink: 0;
  /* content inside can rely on this parent when moving position */
  position: relative;
}
.thumbnail .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.thumbnail .item .content {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
}
.thumbnail .item .content .title {
  font-weight: bold;
}
/* Arrows */
.arrows {
  position: absolute;
  /* top distance of carousel class */
  top: 85%;
  right: 52%;
  width: 300px;
  max-width: 30%;
  display: flex;
  gap: 10px;
  align-items: center;
}
.arrows button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .4);
  border: none;
  font-family: monospace;
  color: white;
  font-weight: bold;
  font-size: large;
  transition: 500ms;
  z-index: 100;
}
.arrows button:hover {
  background-color: white;
  color: gray;
}
/* the item in the first position is going to be in the active state */
.carousel .list .item:nth-child(1) {
  z-index: 1;
}
/* content to make stand out */
/* this allows the start animation/transition...will be off screen */
.carousel .list .item:nth-child(1) .author,
.carousel .list .item:nth-child(1) .title,
.carousel .list .item:nth-child(1) .topic,
.carousel .list .item:nth-child(1) .desc,
.carousel .list .item:nth-child(1) .buttons {
  transform: translateY(50px);
  filter: blur(20px);
  opacity: 0;
  animation: showContent .5s 1s linear 1 forwards;
}
/* will start animation from active element to animation */
/* return content to original position */
@keyframes showContent {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
.carousel .list .item:nth-child(1) .title {
  animation-delay: 1.2s;
}
.carousel .list .item:nth-child(1) .topic {
  animation-delay: 1.4s;
}
.carousel .list .item:nth-child(1) .desc {
  animation-delay: 1.6s;
}
.carousel .list .item:nth-child(1) .buttons {
  animation-delay: 1.8s;
}
/* create effect for the slider when user clicks on the first button */
/* assign .carousel class next to enlarge the next thumbnail image*/
.carousel.next .list .item:nth-child(1) img{
  width: 150px;
  height: 220px;
  position: absolute;
  left: 50%;
  bottom: 50px;
  border-radius: 20px;
  animation: showImage .5s linear 1 forwards;
}
/* showImage change images size back to original */
/* gives illusion that thumbnail image has been enlarged */
@keyframes showImage {
  to {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: 0;
  }
}
/* create a thumbnail animation that moves element to last position to appear more beautiful  */
.carousel.next .thumbnail .item:nth-last-child(1) {
  width: 0;
  overflow: hidden;
  animation: showThumbnail .5s linear 1 forwards;
}
/* when user presses next button the current animation looks to be at the end of the list */
@keyframes showThumbnail {
  to {
    width: 150px;
  }
}
/* when user clicks it will move back 100px to the left */
/* runs animation to move back to the original position */
.carousel.next .thumbnail {
  transform: translateX(150px);
  animation: transformThumbnail .5s linear 1 forwards;
}
/* change width back to original */
@keyframes transformThumbnail {
  to {
    transform: translateX(0);
  }
}
/* the seocnd item is the item that has been deleted to the active state */
.carousel.prev .list .item:nth-child(2) {
  z-index: 2; 
}
.carousel.prev .list .item:nth-child(2) img {
  position: absolute;
  bottom: 0;
  left: 0;
  animation: outImage .5s linear 1 forwards;
}
@keyframes outImage {
  to {
    width: 150px;
    height: 220px;
    border-radius: 20px;
    left: 50%;
    bottom: 50px;
  }
}
.carousel.prev .thumbnail .item:nth-child(1) {
  width: 0;
  overflow: hidden;
  opacity: 0;
  animation: showThumbnail .5s linear 1 forwards;
}
.carousel.prev .list .item:nth-child(2) .author, 
.carousel.prev .list .item:nth-child(2) .title, 
.carousel.prev .list .item:nth-child(2) .topic, 
.carousel.prev .list .item:nth-child(2) .desc, 
.carousel.prev .list .item:nth-child(2) .buttons{
  animation:  contentOut 1.5s linear 1 forwards;
}
@keyframes contentOut {
  to {
    transform: translateY(-150px);
    filter: blur(20px);
    opacity: 0;
  }
}
.carousel.next .arrows button,
.carousel.prev .arrows button {
  pointer-events: none;
}
.time {
  width: 0%;
  height: 5px;
  background-color: #f1683a;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
}
.carousel.next .time,
.carousel.prev .time {
  width: 100%;
  animation: timeRunning 2s linear 1 forwards;
}
@keyframes timeRunning {
  to {
    width: 0;
  }
}
@media screen and (max-width: 720px) {
  .carousel .list {
    gap: 2rem;
  }
  .carousel .list .item .content {
    padding-right: 0;
    top: 10%
  }
  .carousel .list .item .content .topic {
    font-size: 30px;
  }
  .carousel .list .item .content .desc {
  max-width: 280px;
}
}