body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #171a1f;
    background-image: none; /* Default background image */
    background-size: cover;
    background-repeat: no-repeat;
}






.container {
    text-align: center;
}
button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #c2c549;
    color: #171a1f;
    border: none;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}
/* Add styling for the image */
#logo {
    height: auto;
    margin-bottom: 20px;
   /* Adds spacing between the image and button */
}
.meme {
    text-align: center;
    display: none;
}
.monkes{
    top: 0;
    left: 0;
    position: absolute;
    width: 250px;
    animation-name: zoom;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.meme img {
    display: block;
    margin: 0 auto;
}
h1.hometown{
    color: wheat;
}
img {
    max-width: 100%;
    max-height: 100%;
}
.rainbow {
    text-align: center;
    text-decoration: underline;
    font-size: 55px;
    font-family: monospace;
    letter-spacing: 5px;
}
.rainbow_text_animated {
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 6s ease-in-out infinite;
    background-size: 400% 100%;
}
.rainbow_text_animated:hover {
    font-size: 60px;
   /* You can adjust the size as needed */
}
@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
   }
    50% {
        background-position: 100% 0;
   }
}
@keyframes moveImage {
    0% {
        transform: translate(0, 0);
   }
    25% {
        transform: translate(1600px, 0);
   }
    50% {
        transform: translate(1600px, 750px);
   }
    75% {
        transform: translate(0, 750px);
   }
    100% {
        transform: translate(0, 0);
   }
}
/* Apply the animation to the image */
.monek1 {
    animation: moveImage 2s linear infinite;
}
.monek2 {
    animation: moveImage 8s linear infinite;
}
.monek3 {
    animation: moveImage 7s linear infinite;
}
.monek4 {
    animation: moveImage 6s linear infinite;
}
.monek5 {
    animation: moveImage 5s linear infinite;
}
.monek6 {
    animation: moveImage 4s linear infinite;
}
.monek7 {
    animation: moveImage 3s linear infinite;
}
.monek8 {
    animation: moveImage 7s linear infinite;
}
.monek9 {
    animation: moveImage 2s linear infinite;
}
.monek10 {
    animation: moveImage 8.5s linear infinite;
}

.monek11 {
    animation: moveImage 5.5s linear infinite;
}

.monek12 {
    animation: moveImage 2s linear infinite;
}



.musicmonke {
    animation: zoom-in-zoom-out 0.65s ease infinite;
}
@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
   }
    50% {
        transform: scale(2, 1.5);
   }
    100% {
        transform: scale(1, 1);
   }
}



.rotate {
    animation: rotation 2s infinite linear;
  }
  
  @keyframes rotation {
    0% {
        transform: translate(0, 1300px);
   }
    100% {
        transform: translate(300px, 0);
   }
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }
  

  .msp1{
    top: 50%;
    right: 10%;
    position: fixed;
    transform: translate(0, 50%);
    width: 250px;
}


.msp2{
    top: 40%;
    left: 10%;
    position: fixed;
    transform: translate(0, -50%);
    width: 250px;
}

.msp3{
    top: 60%;
    left: 20%;
    position: fixed;
    transform: translate(0, -50%);
    width: 250px;
}

.msp4{
    top: 50%;
    left: 50%;
    position: fixed;
    transform: translate(-50%, 50%);
    width: 500px;
}

.msp5{
    top: 30%;
    right: 10%;
    position: fixed;
    transform: translate(-50%, 50%);
    width: 200px;
}


.msp6{
    top: 70%;
    left: 10%;
    position: fixed;
    transform: translate(50%, -50%);
    width: 200px;
}


@keyframes firework {
    0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
    50% { width: 0.5vmin; opacity: 1; }
    100% { width: var(--finalSize); opacity: 0; }
  }

  .firework,
  .firework::before,
  .firework::after
  {
    --initialSize: 1vmin;
    --finalSize: 100vmin;
    --particleSize: 10vmin;
    --color1: yellow;
    --color2: khaki;
    --color3: white;
    --color4: lime;
    --color5: gold;
    --color6: mediumseagreen;
    --y: -30vmin;
    --x: -50%;
    --initialY: 60vmin;
    content: "";
    animation: firework 2s infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, var(--y));
    width: var(--initialSize);
    aspect-ratio: 1;
    background: 
      /*
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
      */
      
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
      radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
      radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
      
      /* bottom right */
      radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
      radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
      radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
      
      /* bottom left */
      radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
      radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
      radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
      radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
      
      /* top left */
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
      radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
      radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
      radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
      radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
      radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
      
      /* top right */
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
      radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
      ;
    background-size: var(--initialSize) var(--initialSize);
    background-repeat: no-repeat;
  }
  
  .firework::before {
    --x: -50%;
    --y: -50%;
    --initialY: -50%;
  /*   transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
    transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
  /*   animation: fireworkPseudo 2s infinite; */
  }
  
  .firework::after {
    --x: -50%;
    --y: -50%;
    --initialY: -50%;
  /*   transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
    transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
  /*   animation: fireworkPseudo 2s infinite; */
  }
  
  .firework:nth-child(2) {
    --x: 30vmin;
  }
  
  .firework:nth-child(2),
  .firework:nth-child(2)::before,
  .firework:nth-child(2)::after {
    --color1: pink;
    --color2: violet;
    --color3: fuchsia;
    --color4: orchid;
    --color5: plum;
    --color6: lavender;  
    --finalSize: 40vmin;
    left: 30%;
    top: 60%;
    animation-delay: -0.25s;
  }
  
  .firework:nth-child(3) {
    --x: -30vmin;
    --y: -50vmin;
  }
  
  .firework:nth-child(3),
  .firework:nth-child(3)::before,
  .firework:nth-child(3)::after {
    --color1: cyan;
    --color2: lightcyan;
    --color3: lightblue;
    --color4: PaleTurquoise;
    --color5: SkyBlue;
    --color6: lavender;
    --finalSize: 35vmin;
    left: 70%;
    top: 60%;
    animation-delay: -0.4s;
  }
  
  
  @-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
  }