body {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 400;
  background-color: #000;
  color: #FFF;
  font-size: 1.2rem;
}


header {
  width: 1200px;
  max-width: 80%;
  margin: auto;
  height: 50px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 999;
}

header nav {
  display: flex;
  gap: 2rem;
}

header nav a {
  text-decoration: none;
  text-transform: uppercase;
  color: white;
  letter-spacing: 0.1rem;
}

/* Slider */

.slider {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin-top: -50px;
  position: relative;
}

.slider .list .item {
  position: absolute;
  inset: 0 0 0 0;
}

.slider .list .item>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider .list .item .detail {
  position: absolute;
  top: 20%;
  width: 1200px;
  max-width: 80%;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
  text-shadow: 0 5px 10px #000;
}

.slider .list .item .detail .title {
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6rem;
  margin-bottom: 0.6rem;
}

.slider .list .item .detail .name {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 3.5rem;
  letter-spacing: 0.1rem;
  line-height: 3.5rem;
  margin-bottom: 0.8rem;
  background: linear-gradient(#D3321D, #FFCF67);
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.slider .list .item .detail figure {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slider .list .item .detail figure img {
  width: 2.4rem;
}

.slider .list .item .detail figure figcaption {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
}

.slider .list .item .detail .desc {
  margin-top: 1rem;
  font-weight: 100;
  font-size: 1rem;
  max-width: 40rem;
  text-shadow: 1px 1px 1px #000;
}

.slider .list .item .detail .more {
  display: inline-block;
  margin-top: 1.4rem;
  text-decoration: none;
  background-color: #FFF;
  color: #000;
  padding: 0.6rem 0.8rem;
  border-radius: 0.3rem;
  text-shadow: none;
  font-size: 1rem;
}

.slider .list .item .detail .more:hover {
  color: #FFF;
  background-color: #D3321D;
}

/* Thumbnail */

.thumbnail {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: max-content;
  z-index: 999;
  display: flex;
  gap: 20px;
}

.thumbnail .item {
  width: 150px;
  height: 220px;
  flex-shrink: 0;
  position: relative;
}

.thumbnail .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.thumbnail .item .detail {
  position: absolute;
  bottom: 15px;
  left: 10px;
  right: 10px;
}

.thumbnail .item .detail .name {
  font-weight: 900;
  font-size: 1rem;
  text-align: right;
  margin-bottom: 5px;
  text-shadow: 1px 1px 1px #000;
}

.thumbnail .item .detail blockquote {
  font-size: 0.7rem;
  font-weight: 100;
  text-align: right;
  text-shadow: 1px 1px 1px #000;
}

/* Arrows */

.arrows {
  position: absolute;
  top: 80%;
  right: 52%;
  width: 300px;
  max-width: 30%;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.arrows button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  box-shadow: 1px 1px 1px #000;
  font-family: monospace;
  color: #D3321D;
  cursor: pointer;
  z-index: 100;
  transition: 0.3s;
}

.arrows button:hover {
  background-color: #D3321D;
  color: #FFF;
}

/* Starting Animation */

.slider .list .item:nth-child(1) {
  z-index: 1;
}

.slider .list .item:nth-child(1) .title,
.slider .list .item:nth-child(1) .name,
.slider .list .item:nth-child(1) figure,
.slider .list .item:nth-child(1) .desc,
.slider .list .item:nth-child(1) .more {
  transform: translateY(50px);
  filter: blur(50px);
  opacity: 0;
  animation: showDetail 0.4s 0.4s linear 1 forwards;
}

@keyframes showDetail {
  to {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
  }
}

.slider .list .item:nth-child(1) .title {
  animation-delay: 0.4s;
}

.slider .list .item:nth-child(1) .name {
  animation-delay: 0.6s;
}

.slider .list .item:nth-child(1) figure {
  animation-delay: 0.8s;
}

.slider .list .item:nth-child(1) .desc {
  animation-delay: 1s;
}

.slider .list .item:nth-child(1) .more {
  animation-delay: 1.2s;
}

/* Action Next */

.slider.next .list .item:nth-child(1)>img {
  width: 150px;
  height: 220px;
  position: absolute;
  left: 50%;
  bottom: 50px;
  border-radius: 15px;
  animation: growImage 0.5s linear 1 forwards;
}

@keyframes growImage {
  to {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: 0;
  }
}

.slider.next .thumbnail .item:nth-last-child(1) {
  width: 0;
  overflow: hidden;
  opacity: 0;
  animation: showThumbnail 0.5s linear 1 forwards;
}

@keyframes showThumbnail {
  to {
    width: 150px;
    opacity: 1;
  }
}

.slider.next .thumbnail {
  transform: translateX(150px);
  animation: transformThumbnail 0.5s linear 1 forwards;
}

@keyframes transformThumbnail {
  to {
    transform: translateX(0);
  }
}

/* Action Previous */

.slider.prev .list .item:nth-child(2) {
  z-index: 2;
}

.slider.prev .list .item:nth-child(2)>img {
  position: absolute;
  bottom: 0;
  left: 0;
  animation: shrinkImage 0.5s linear 1 forwards;
}

@keyframes shrinkImage {
  to {
    width: 150px;
    height: 220px;
    border-radius: 15px;
    left: 50%;
    bottom: 50px;
  }
}

.slider.prev .thumbnail .item:nth-child(1) {
  width: 0;
  overflow: hidden;
  opacity: 0;
  animation: showThumbnail 0.5s linear 1 forwards;
}

.slider.prev .list .item:nth-child(2) figure,
.slider.prev .list .item:nth-child(2) .name,
.slider.prev .list .item:nth-child(2) .title,
.slider.prev .list .item:nth-child(2) .desc,
.slider.prev .list .item:nth-child(2) .more {
  animation: hideDetail 0.4s linear 1 forwards;
}

@keyframes hideDetail {
  to {
    transform: translateY(-150px);
    filter: blur(20px);
    opacity: 0;
  }
}

.slider.next .arrows button,
.slider.prev .arrows button {
  pointer-events: none;
}

.loading-bar {
  width: 0%;
  height: 5px;
  background-color: #F80;
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
}

.slider.next .loading-bar,
.slider.prev .loading-bar {
  width: 100%;
  animation: loadingTime 2s linear 1 forwards;
}

@keyframes loadingTime {
  to {
    width: 0;
  }
}

/* Mobile Breakpoint */

@media screen and (max-width: 678px) {
  .slider .list .item .detail .name {
    font-size: 2.8rem;
    line-height: 2.8rem;
  }

  .slider .list .item .detail .desc {
    font-size: 0.8rem;
  }
}