a {
  color: #5B9BFF;
}
ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  display: flex;
  overflow: visible;
  justify-content: flex-end;
  position: relative;
}

ul.nav li.left {
  margin-right: auto;
}

ul.nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.nav li a:hover {
  background-color: #111111;
}

.dropdown { 
  position: relative; 
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #333333;
  list-style: none;
  padding-top: 4px;
  margin: 0;
  z-index: 999;
  min-width: 160px;
}

.dropdown::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
}

.dropdown:hover .dropdown-menu { 
  display: block; 
}

.dropdown-menu li {
  list-style: none;
}

.dropdown-menu li a { 
  display: block; 
  padding: 8px 16px; 
  white-space: nowrap; 
}

.dropdown-menu li a:hover {
  background-color: #111111;
}

.leaderboard-wrapper {
  text-align: center;
  width: 100%;
  padding: 10px 0;
}

.rainbow-shine {
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  font-size: 100px; 
  font-weight: 700;
  margin: 0;
  display: inline-block;
  background: linear-gradient(
    to right, 
    #8a00ff 0%,
    #d159ff 25%,
    #ff77e9 50%,
    #ff5b5b 75%,
    #8a00ff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: flow 4s linear infinite;
  filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.15));
}

@keyframes flow {
  to {
    background-position: 200% center;
  }
}

@media (max-width: 800px) {
  .rainbow-shine { font-size: 50px; }
}

div.lr {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  background-image: url('waveshit.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body {
  font-family: 'Comic Sans MS', Arial;
  overflow: scroll;
  margin: 0;
  padding: 0;
  background: 
    radial-gradient(ellipse at 80% 10%, rgba(0, 200, 180, 0.4) 0%, transparent 40%),
    radial-gradient(ellipse at 20% 80%, rgba(0, 150, 160, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 50%, rgba(120, 0, 160, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 40%, rgba(80, 0, 120, 0.3) 0%, transparent 40%),
    linear-gradient(160deg, #0a0e1a 0%, #0d1225 40%, #0a0e1a 100%);
  color: #FFFFFF;
}

body.index {
  font-family: 'Comic Sans MS', Arial;
  overflow: scroll;
  margin: 0;
  padding: 0;
  color: #FFFFFF;
  background-image: none;
}

.light {
  background-color: #1E0B3E;
}

.dark {
  background-color: #1B0B38;
}

.banner {
  background-image: url('banner.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

#madeby {
  font-family: 'Pacifico', cursive;
  color: #CC91FF;
  background: linear-gradient(to right, #CC91FF, #FF8F8F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

#name {
  font-family: 'Comic Sans MS', Arial;
  color: #8803FF;
  background: linear-gradient(to right, #8803FF, #FF3333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

#unlocked {
  font-family: 'Comic Sans MS', Arial;
  color: #BA6BFF;
  background: linear-gradient(to right, #BA6BFF, #FF6363);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  font-size: 30px;
}

#yt {
  font-family: 'Comic Sans MS', Arial;
  color: #DD7E6B;
  background: linear-gradient(to right, #DD7E6B, #EA9192);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  font-size: 30px;
}

#dc {
  font-family: 'Comic Sans MS', Arial;
  color: #3D78D8;
  background: linear-gradient(to right, #3D78D8, #A4C2F4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  font-size: 30px;
}

#merch {
  font-family: 'Comic Sans MS', Arial;
  color: #CC91FF;
  background: linear-gradient(to right, #CC91FF, #FF3454);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  font-size: 30px;
}

#kofi {
  font-family: 'Comic Sans MS', Arial;
  color: #FFFFFF;
  background: linear-gradient(to right, #FFFFFF, #E69138);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  font-size: 30px;
}

#tp {
  font-family: 'Comic Sans MS', Arial;
  color: #FE033F;
  background: linear-gradient(to right, #FE033F, #03FF00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  font-size: 30px;
}

#geo {
  font-family: 'Comic Sans MS', Arial;
  color: #FFFFFF;
  background: linear-gradient(to right, #FFFFFF, #FFD965);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  font-size: 30px;
}