@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap'); /* Import a cursive font */
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');

/***
  Hinkstep - Aldrig Mer 
  Galaxy : Sombrero
  Layers : Osmo
  Mountains: Karen ***/

.date {
  display:block;
  color: #303030;
  margin:10px;
  font-size: 20px;
}

@keyframes handwritten {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }

  100% {
    opacity: 1;
    transform: translateX(-20px);
  }
}

.page {
  color: rgb(24, 246, 239); 
  font-family: 'Great Vibes', cursive; 
  font-size: 68px;
  position: fixed;
  left: 60px;
  z-index: 3;
  display: flex; 
  justify-content: center; 
  white-space: nowrap; 
}

.page span {
  opacity: 0; 
  display: flex;
  animation: handwritten 1.2s alternate infinite, rotateStar 5s linear infinite; 
}

.page span:nth-child(1) { animation-delay: 0s; }
.page span:nth-child(2) { animation-delay: 0.25s; }
.page span:nth-child(3) { animation-delay: 0.50s; }
.page span:nth-child(4) { animation-delay: 0.75s; }
.page span:nth-child(5) { animation-delay: 1s; }
.page span:nth-child(6) { animation-delay: 1.25s; }
.page span:nth-child(7) { animation-delay: 1.5s; }
.page span:nth-child(8) { animation-delay: 1.75s; }
.page span:nth-child(9) { animation-delay: 2s; }

.title{
  color: #1377BD;
  font-size: 16px;
  margin: 4px;
  font-weight:500;
  font-family: 'Cinzel', serif;
  animation: fadeInUp 30s alternate;
}

.title:hover {
  text-decoration: none !important;
}

.content{
  display:block;
  color: #303030;
  margin:4px;
  font-weight:300;
}

.container{
  max-width:100%;
  height: auto;

}

.icon-title{
    display: flex;
    align-items: center;
    animation: rotateStar 60s linear ;
}

@keyframes rotateStar {
  0%{
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.list {
  list-style-type:none;
}

.item {
    margin-top:10px;
    margin-bottom:10px;
    animation: rotateStar 60s linear infinite 10s;
    font-family: 'Cinzel', serif;
    font-weight: bold; /* This makes the text bold */
}

@keyframes fadeInUp {
  to {
      opacity: 1;
      transform: translateY(-40vh) ;
  }
}

#player{
    position: relative; /* Required for z-index to work */
    z-index: 0; /* Example z-index */
}