a {
    text-decoration: none;
}

/* Carousel */
.carousel {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

}

.carousel .list .item {
    position: absolute;
    inset: 0;
    padding-bottom: -7em;
}

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

.carousel .list .item .content {
    position: absolute;
    top: 20%;
    width: 1140px;
    max-width: 80%;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 30%;
    box-sizing: border-box;
    color: white;
    text-shadow: 0 5px 10px rgba(0, 0, 0, 0.874);
}

.carousel .list .item .content .author {
    font-weight: bold;
    font-size: 3em;
    line-height: 1.3em;
}

.carousel .list .item .content .title {
 font-weight: bold;
    letter-spacing: 10px;
    text-transform: uppercase;
}

.carousel .list .item .content .topic {
    color: #e84d1a;
    font-weight: bold;
    font-size: 2em;
}

.carousel .list .item .content .des {
    font-size: 20pt;
    margin-top: 10px;
}

.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 .buttons button {
    border: none;
    background-color: #eee;
    letter-spacing: 3px;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel .list .item .content .buttons button:hover {
    background-color: #ccc;
}

.carousel .list .item .content .buttons button.second {
    background-color: transparent;
    color: #e84d1a;
    border: 1px solid #e84d1a;
}

.carousel .list .item .content .buttons button.second:hover {
    background-color: rgba(232, 77, 26, 0.1);
}



.arrows {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 101;
}

.arrows button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e84e1a;
    border: none;
    font-family: monospace;
    color: #fff;
    font-weight: bold;
    font-size: large;
    cursor: pointer;
    transition: background-color 0.5s;
    padding-bottom: 7px;
    padding-top: 0.5em;
}

.arrows button:hover {
    background-color:#e84e1aba;
    color: #555;
}

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

.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) .des,
.carousel .list .item:nth-child(1) .buttons {
    filter: blur(20px);
    transform: translateY(50px);
    opacity: 0;
    animation: showContent 0.5s 1s linear 1 forwards;
}

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

.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) .des {
    animation-delay: 1.6s;
}

.carousel .list .item:nth-child(1) .buttons {
    animation-delay: 1.8s;
}

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

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

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

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



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

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

.carousel.prev .list .item:nth-child(2) img {
    position: absotue;
    left: 0;
    bottom: 0;
    animation: outImage 0.5s linear 1 forwards;
}

@keyframes outImage {
    to {
        width: 150px;
        height: 220px;
        border-radius: 20px;
        left: 50%;
        bottom: 80px;
    }
}



.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) .des,
.carousel.prev .list .item:nth-child(2) .buttons {
    animation: contentOut 1.5s linear 1 forwards;
}

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

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

.time {
    width: 0%;
    height: 5px;
    background-color: #e84d1a;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
}

.carousel.next .time,
.carousel.prev .time {
    width: 100%;
    animation: timeRunning 3s linear 1 forwards;
}

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

@media screen and (max-width: 678px) {
    .carousel .list .item .content {
        padding-right: 10%;
        top: 15%;
    }

    .carousel .list .item .content .title {
        font-size: 2.5em;
    }

    .carousel .list .item .content .topic {
        font-size: 1.5em;
    }

    .carousel .list .item .content .des {
        font-size: 1em;
    }

    .carousel .list .item .content .buttons {
        grid-template-columns: repeat(2, 100px);
        grid-template-rows: 30px;
    }

   .thumbnail {
        bottom: 60px;
        right: 10px;
        left: 10px;
        flex-direction: row;   /* horizontal thumbnails */
        justify-content: center;
    }


       .thumbnail .item {
        width: 80px;
        height: 110px;
    }
    .arrows {
        bottom: 10px;
        left: 10px;
        max-width: 50%;
    }
    .arrows {
    position: absolute;
    margin-top: 1em;
    bottom: 20px;
margin-left: 23em;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 101;
}

    .arrows button {
        width: 30px;
        height: 32px;
        font-size: medium;
    }

    .carousel.next .list .item:nth-child(1) img,
    .carousel.prev .list .item:nth-child(2) img {
        bottom: 60px;
    }
}

/* new */
/* =======================
   RESPONSIVE DESIGN
======================= */
@media (max-width: 992px) {
  .carousel .content {
    max-width: 90%;
    padding: 20px;
    margin-top: -3.5em;
    margin-left: -2.5em;
  }

  .carousel .content .author {
    font-size: 1.5rem;
  }

  .carousel .content .des {
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .carousel {
    height: 80vh;
  }

  .carousel .content {
    padding: 15px;
  }

  .carousel .content .author {
    font-size: 1.3rem;
  }

  .carousel .content .des {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .buttons button{
    font-size: 12px;
  }
  .carousel .list .item .content .author {
    font-weight: bold;
    font-size: 2.5em;
    line-height: 1.3em;
}

}

/* The cool Nav button design */

    .switch input[type=checkbox]{
        display: none;
    }
    .switch input[type=checkbox]:checked + label{
        border-color: #ffffff;
    }
    .switch input[type=checkbox]:checked + label .pumpkin-container{
        left: calc(100% - 5px);
        transform: translateX(-100%);
        opacity: 0;
    }

    .switch input[type=checkbox]:checked + label .vampire-container{
        left: calc(100% - 5px);
        transform: translateX(-100%);
        opacity: 1;
    }
    .switch label{
        border: 3px solid #ff6600;
        cursor: pointer;
        height: 36px;
        border-radius: 200px;
        width: 60px;
        transition: .5s ease-in-out;
          display: none; /* hidden on desktop */
  cursor: pointer;
  position: absolute;
  top: 2.9em;
  right: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* keeps above */
  margin-top: -1.2em;
    }
    .pumpkin-container{
        background: #ff6600;
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 190px;
        left: 5px;
        top: 5px;
        overflow: hidden;
        transition: .5s ease;
        opacity: 1;
    }
    
    .vampire-container{
background: #ffffff;
width: 20px;
height: 20px;
position: absolute;
border-radius: 190px;
left: 5px;
top: 5px;
overflow: hidden;
transition: .5s ease;
opacity: 0;
    }
       @keyframes pseudo-move {
        0% {opacity: 0}
        100%{opacity: 1}
       }
/* End of nav  */