.item{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.item.active{
    display: block;
}

.item .fruit{
  font-size: clamp(20rem, 10vw, 8rem);
width: 100%;
position: absolute;
top: 100%;
z-index: 3;

position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
}

.item .refri{
 width: 95%;
  max-width: 800px;

position: absolute;
left: 50%;
top: 47%;
transform: translate(-50%, -50%);
}

#prev, #next{
position: absolute;
top: 50%;
transform: translateY(-50%);
  width: 8vw;
  height: 8vw;
  max-width: 50px;
  max-height: 50px;
background-color: #eee9;
border: 1px solid #eee9;
color: #eee;
font-size: x-large;
font-family: monospace;
cursor: pointer;
z-index: 4;
border-radius: 50%;

}

#prev{
left: 30px;
}

#next{
right: 30px;
}

@keyframes toActive{ 
    from{
        top: 100%;
        opacity: 0;
    }
}

.item.active img.fruit {
    animation: toActive 0.6s ease-in-out 1;
}
    
.item.active .title {
    animation: toActive 0.6s ease-in-out 1;
}

.nome {
  position: relative;
  font-size: clamp(1px, 3vw, 16px);
  color: rgb(0, 0, 0);
  overflow: hidden;
}

.nome :after {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, white, transparent);
  animation: brilho 3s infinite;
}

@keyframes brilho {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

footer {
  position: absolute;
  bottom: 2px;
  left: 10px;
  color: white;
  font-size: clamp(1px, 2.5vw, 14px);
}