.page {
  min-height: 100vh;
  background-color: #0c0b0c;
  background-size: 60px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', Arial, sans-serif;
  gap: 20px;
}

    
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%; 
}


.headerBackButton {
  position: absolute;
  left: 80px;
  top: 50%;
  transform: translateY(-285px);
  background: none;
  border: none;
  font-size: 4rem;
  cursor: pointer;
  color: #f5f0f0;
  font-weight: bold;
  animation: pulsate-left-to-right 4s infinite ;
}
@keyframes pulsate-left-to-right {
  0% {
    left: 0;
    
  }
  25% {
    left: 1%;
    
  }
  50% {
    left: 0%;
    
  }
  75% {
    left: 1%;

  }
  100% {
    left: 0%;
    
  }
}

.main-header h1 {
    margin: 0 auto; 
    width: 100%;
    animation: colorChange 6s ease-in-out infinite; 
    z-index: 1000;
    font-family: 'Space Grotesk', Arial, sans-serif;
    font-size: 5em;
    font-weight: bold;
    position: relative;
    top: -30px;
}
.togglecontainer{
    background-image: url('gif.gif');
    background-position: center center;
    background-size: cover;
}
.star{
      
      position: fixed;
      top: 10px;
      right: 80px;
      width: 50px;              
      height: 50px;
      background: transparent;
      background-image: url('image3.png');
      background-size: cover;
       
      background-repeat: no-repeat;
      background-position: center;
      transform: translateY(14px);
      border: none;
      cursor: pointer;
      z-index: 9999;
      
}

.button1{
    background-image: linear-gradient(to right, #264aeb, #6610f2);
    color: white;
    border:none;
    padding: 60px 80px;
    border-radius:12px;
    font-family: 'Trebuchet MS';
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    top: 100px;
    right: 100px;
    box-shadow: 
        0px 8px 0px #554d4d,
        0px 3px 8px rgb(255, 255, 255);
    transition: all 0.2s ease;
    margin-top: 105px;

}
.button2{
    background-image: linear-gradient(to right, #B8860B, #DAA520);
    color: white;
    border:none;
    padding: 60px 92px;
    border-radius:12px;
    font-family: 'Trebuchet MS';
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    top: 100px;
    right: 100px;
    margin-right: 700px;
    margin-top: -37px;
    box-shadow: 
        0px 8px 0px #554d4d,
        0px 3px 8px rgb(255, 255, 255);
    transition: all 0.2s ease;
}
.button3{
    background-image: linear-gradient(to right, #f54a06, #f10707);
    color: white;
    border:none;
    padding: 60px 83px;
    border-radius:12px;
    font-family: 'Trebuchet MS';
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    top: 100px;
    right: 100px;
    margin-right: -720px;
    margin-top: -181px;
    box-shadow: 
        0px 8px 0px #554d4d,
        0px 3px 8px rgb(255, 255, 255);
    transition: all 0.2s ease;


}
.button4{
   background-image: linear-gradient(to right, #036cdd, #6610f2);
    color: white;
    border:none;
    padding: 60px 80px;
    border-radius:12px;
    font-family: 'Trebuchet MS';
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    top: 100px;
    right: 100px;
    box-shadow: 
        0px 8px 0px #554d4d,
        0px 3px 8px rgb(255, 255, 255);
    transition: all 0.2s ease;
    margin-top: 105px;
}
.button5{
       background-image: linear-gradient(to right, #062381, #10f2d4);
    color: white;
    border:none;
    padding: 60px 92px;
    border-radius:12px;
    font-family: 'Trebuchet MS';
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    top: 100px;
    right: 100px;
    margin-right: 700px;
    margin-top: -37px;
    box-shadow: 
        0px 8px 0px #554d4d,
        0px 3px 8px rgb(255, 255, 255);
    transition: all 0.2s ease;
}
.button6{
       background-image: linear-gradient(to right, #000000, #6438ac);
    color: white;
    border:none;
    padding: 60px 83px;
    border-radius:12px;
    font-family: 'Trebuchet MS';
    font-size: 20px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    top: 100px;
    right: 100px;
    margin-right: -720px;
    margin-top: -181px;
    box-shadow: 
        0px 8px 0px #554d4d,
        0px 3px 8px rgb(255, 255, 255);
    transition: all 0.2s ease; 
}
body {
    margin-top: auto;
}
.top-left-button {
      position: fixed;
      top: 10px;
      right: 10px;
      width: 60px;              
      height: 60px;
      background: transparent;
      background-image: url('image.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      transform: translateY(10px);
      border: none;
      cursor: pointer;
      z-index: 9999;
    }
@keyframes colorChange {
    0% {
        color: rgb(255, 0, 0);
    }
    20% {
        color: rgb(255, 165, 0);
    }
    40% {
        color: rgb(255, 255, 0);
    }
    60% {
        color: rgb(0, 128, 0);
    }
    80% {
        color: rgb(0, 0, 255);
    }
    100% {
        color: rgb(255, 0, 0);
    }
}