.text {
  color: #f1f1f1;
  letter-spacing: .05em;
  text-shadow: 
    4px 4px 0px #111111, 
    7px 7px 0px rgba(0, 0, 0, 0.2);
 font-size:2.3em;
 font-family:  sans-serif;
 -webkit-animation: shift 2s ;
 animation: shift 2s ;
 margin-top:125px;
 text-align:center;
}

h2 {
 animation: appear 3.2s;
 text-align:center;
}

@keyframes shift {
 0% {opacity:0;}
 33% {margin-top:0px;opacity:0;}
 100% {margin-top:125px;opacity:1;text-shadow: 
     4px 4px 0px #d5d5d5, 
     7px 7px 0px rgba(0, 0, 0, 0.2);}
}

@keyframes appear {
 0% {opacity:0;}
 50% {opacity:0;}
 100% {opacity:1;}
}

ul {
  animation: appear 3.8s;
  display: flex;
  gap: .8em;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 20vw;
  padding: 5px
}

ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  text-align: center;
  border-radius: 25px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
}

ul li:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

ul li.active {
  background-color: #001F54;
  border: 2px solid white;
}

#next-page {
  margin: 100px;
}

#next-page h3 {
  margin-bottom: 40px;
}