body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
}
.ww{
 background: linear-gradient(120deg, #f6d365, #fda085);
 list{
  color: black;
 }
}
.yy{
  background-color: black;
  .container{
    color: white;
    background-color: transparent;
  }
  li{
    color: orchid;
  }
}
.container{
    background-color: aliceblue;
    max-width: 500px;
    text-align: center;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 4px 4px 36px orange;
     animation: box-slide 2s ease-in 0s 1 reverse, waves 5s ease-in 0s infinite alternate-reverse ;

}
h1 {
  margin-bottom: 20px;
}

#quote-box {
   border-radius: 25px;
  margin-bottom: 30px;
  box-shadow: 4px 4px 36px #ff00d4;
  
}

.extraclass{
   animation: bounce 2s ease-in 0s 1 reverse ;
}
@keyframes bounce {
   from{
  
 transform: translateY(0px);    
  }
  to{

  
      transform: translatey(-800px);
  }

}
button{
     height: 45px;
    width: 150px;
    padding: 10px;
    font-size: 16px;
    color: white;
     background-color: #ff6b6b;
     border-radius: 5px;
     border-color: yellow;
}
button:hover{
    background : linear-gradient(300deg,#ff0055cd,#ff00d4,#6f00ff);
}
#saved-quotes{
  list-style-type: square;
  font-size: 16px;
} 

@keyframes box-slide{
  from{
    transform: translatex(0px);
  }
  to{
    transform: translatex(-1500px);
  }
  
}

@keyframes waves {
  
  from{
     box-shadow: 4px 4px 36px orange;;
  }
  to{
    box-shadow:8px 8px 65px orange ;
  }
}