body {
  font-family: 'Yeseva One', serif;
}

input,
textarea,
button {
  font-family: 'Yeseva One', serif;
}

.section {
  padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #0E0B2B;
}

.welcome-section {
  height: 700px;
  background-color: #0E0B2B;
}

@media (min-width: 768px) {
  .welcome-section {
    height: 1100px; /* or bigger if needed */
  }}

#tray-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

.midnight {
  display: none;
}

  @media (min-width: 768px) {
    .midnight {
      position: absolute;
      display: block;
      top: 40%;
      left: -80%;
      width: 600px;
      z-index: 10; /* ensure it shows above background/tray */
      transform: rotate(-15deg);
    }
  }

.spread {
  display: none;
}

@media (min-width: 768px) {
  .spread {
    position: absolute;
    display: block;
    top: 10%;
    left: 5%;
    width: 600px;
    z-index: 10; 
    transform: rotate(45deg)
  }}












  #tray {
    width: 100%;
    height: auto;
    display: block;
  
  }

  @media (min-width: 768px) {
    #tray {
      transform: scale(1.6);
      transform-origin: center top;
    }
  
    #tray-container {
      margin-top: -230px; /* shift the entire tray up */
    }
  }
  #title {
    position: absolute;
    height: 90%;
    top: 3%;
    left: 5%;
  }


 @media (min-width: 768px) {
  #title{
    display: none;
 }
 }

 
























  
.jello {
    position: absolute;
    top: -13%;
    left: -10%;
    width: 120%;
}

@media (min-width: 768px) {
  .jello {
    width: 170%;
    left: -35%;
    top: -6%;
    
  }}


#enter-button {
  all: unset;
  position: absolute;
  top: 45%;   
  left: 25%;
  width: 200px;
  height: 200px;
  background: none;
  cursor: pointer;
  z-index: 100;
}


@keyframes jello-wiggle {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.05, 0.95) rotate(-2deg); }
  50%  { transform: scale(0.95, 1.05) rotate(2deg); }
  75%  { transform: scale(1.03, 0.97) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.jello.animate-wiggle {
  animation: jello-wiggle 0.6s ease;
}

@media (min-width: 768px) {
  #enter-button {
  width: 250px;
  height: 250px;
  left: 20%;
  top: 80%;
  }}








  
.bread {
    width: 110%; 
    position: absolute;
}  
.bread1 {
    top: 0%;
    left: -18%;
    transform: rotate(-8deg);
  }

  .bread2 {
    top: 4%;
    left: -22%;
    transform: rotate(-50deg);
  }

  @media (min-width: 768px) {
    .bread {
      width: 160%;
      
    }
    .bread1 {
      left: -45%;
      top: 10%;
    }
    .bread2{
      left: -55%;
      top: 22%;
    }
  }






  .croissant {
    width: 80%;
    position: absolute;
  }

  .croissant1 {
    top: 19%;
    left: -4.5%;
    transform: rotate(-20deg);
  }

  .croissant2 {
    top: 11%;
    left: 3.5%;
    transform: rotate(9deg);
  }

  @media (min-width: 768px) {
    .croissant {
      width: 140%;
    }
    .croissant1{
      left: -37%;
      top: 24%; 
    }
    .croissant2{
      left: -25%;
      top: 13%;
    }
  }











  .cupcake {
    width: 83%;
    position: absolute;
  }
  
  .cupcake1 {
    left: 18%;
    top: 21%;
  }

  .cupcake2 {
    left: 23%;
    top: 33%;
    transform: rotate(50deg);
  }

  @media (min-width: 768px) {
    .cupcake {
      width: 127%;
    }
    .cupcake1 {
      left: 7%;
      top: 38%;
    }
    .cupcake2 {
      left: 12%;
      top: 58%;
    }
  }













  .cake {
    position: absolute;
    width: 80%;
    top: 10%;
    left: 15%;
    transform: rotate(-8deg);
  }
  @media (min-width: 768px) {
    .cake {
      width: 130%;
      left: -6%;
      top: 20%;
    }
    
  }










  .egg {
    position: absolute;
    width: 80%;
  }

  .egg1 {
    left: 30%;
    top: 10%;
    transform: rotate(30deg);
  }

  .egg2 {
    left: 2.5%;
    top: -6%;
    transform: rotate(190deg);
  }

  .egg3{
    left: 6%;
    top: 7%;
  }

@media (min-width: 768px) {
    .egg {
      width: 125%;
    }
    .egg1{
      left: 20%;
      top: 20%;
    }
    .egg2{
      left: -23%;
      top: -8%;
    }
    .egg3{
      left: -15%;
      top: 15%;
    }
  }





.menu-section {
  height:780px;
  background-color: #0E0B2B;
}

@media (min-width: 768px) {
  .menu-section {
    height: 900px; /* or bigger if needed */

  }}

#menu-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

#checkerboard {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  #checkerboard {
    transform: rotate(90deg);
    transform-origin: center center;

    width: 600px;           /* override width: 100% */
    height: 1100px;          /* make it stretch to the section height */
    max-height: 1100px;    /* match your .menu-section height */
    display: block;
    margin: 0 auto;
    margin-left: -100px;
    margin-top: -230px;
  }}



#about-btn {
  position: absolute;
  width: 97%;
  top: 1%;
  left: 2%;
}

@media (min-width: 768px) {
  #about-btn {
  width: 150%;
  top: 25%;
  left: -70%;
  }}


#about-link {
  position: absolute;
  top: 35px;     
  left: 35px;     
  width: 140px;   
  height: 140px;  
  z-index: 10;
  cursor: pointer;
}

@media (min-width: 768px) {
  #about-link {
  width: 70%;
  height: 30%;
  top: 25%;
  left: -65%;
  }}


#contact-btn {
  position: absolute;
  width: 100%;
  top: 0%;
  left: -2%;
}

@media (min-width: 768px) {
  #contact-btn {
  width: 140%;
  left: 13%;
  }}

#contact-link {
  position: absolute;
  top: 170px;     
  left: 210px;     
  width: 130px;   
  height: 200px;  
  z-index: 10;
  cursor: pointer;
}

@media (min-width: 768px) {
  #contact-link {
  top: 380px;
  left: 450px;
  width: 150px;
  height: 240px;
  }}


#ticket-btn {
  position: absolute;
  width: 100%;
  top: 5%;
  left: 0%;
}

@media (min-width: 768px) {
  #ticket-btn {
 width: 140%;
 left: 30%;
 top: 12%;
  }}

#ticket-link {
  position: absolute;
  top: 340px;     
  left: 25px;     
  width: 140px;   
  height: 170px;  
  z-index: 10;
  cursor: pointer;
}

@media (min-width: 768px) {
  #ticket-link {
  top: 500px;
  left: 100px;
  width: 200px;
  height: 270px;
  }}

  @keyframes soft-glow {
    0%, 100% {
      filter: drop-shadow(0 0 6px #b799ff) drop-shadow(0 0 12px #d4c2ff);
    }
    50% {
      filter: drop-shadow(0 0 14px #d4c2ff) drop-shadow(0 0 28px #f0e6ff);
    }
  }

  @media (min-width: 768px) {
    #about-btn,
    #contact-btn,
    #ticket-btn {
      animation: soft-glow 3s ease-in-out infinite;
    }
  }




















.about-section{
  height: 800px;
  background-color: #0E0B2B;
  position: relative;
}


#about-container{
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.moon{
  display: none;
}

@media (min-width: 768px) {
  .moon {
  position: absolute;
  top: 3%;
  left: 5%;
  width: 70%;
  display: block;
  animation: moon-glow 3s ease-in-out infinite,
               moon-pulse 6s ease-in-out infinite;
  }
  }

  @keyframes moon-pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  @keyframes moon-glow {
    0%, 100% {
      filter: drop-shadow(0 0 5px #c8b8ff);
    }
    50% {
      filter: drop-shadow(0 0 25px #f0e6ff);
    }
  }













.mountain1 {
  display: none;
}
@media (min-width: 768px) {
  .mountain1 {
    width: 80%;
    position: absolute;
    bottom: 0%;
    left: -3%;
    display: block;
  }}

  .mountain2 {
    display: none;
  }

  @media (min-width: 768px) {
    .mountain2 {
      width: 80%;
      position: absolute;
      bottom: 0%;
      left: -3%;
      display: block;
    }}

    .mountain3 {
      display: none;
    }

@media (min-width: 768px) {
    .mountain3 {
      width: 80%;
      position: absolute;
      bottom: 0%;
      left: 42%;
      display: block;
    }}

.hblurb1 {
  display: none;
}

@media (min-width: 768px) {
  .hblurb1 {
    width: 80%;
    position: absolute;
    display: block;
    top: -2%;
    left: 6%;
    z-index: 100;
  }}

  .hblurb2 {
    display: none;
  }

  @media (min-width: 768px) {
    .hblurb2 {
      width: 60%;
      position: absolute;
      display: block;
      top: 27%;
      left: 30%;
   
    }}

    .hblurb3 {
      display: none;
    }
  
    @media (min-width: 768px) {
      .hblurb3 {
        width: 28%;
        position: absolute;
        display: block;
        top:50%;
        left: 62%;
     
      }}












#aboutimage{
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  #aboutimage {
 display: none;
  }}

.ticket-section{
  height: 800px;
  background-color: #0E0B2B;
}


#ticket-container{
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

#ticketimage {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  #ticketimage {
 width: 130%;

  }}

.tickets {
  display: none;
}

@media (min-width: 768px) {
  .ticket1 {
    position: absolute;
  display: block;
  width: 125%;
  left: -120%;
  top: 2.5%;
  }}

  .ticket2 {
    display: none;
  }

  @media (min-width: 768px) {
    .ticket2 {
      position: absolute;
    display: block;
    width: 125%;
    left: 120%;
    top: 2.5%;
    }}

.lottery-form {
  position: absolute;
  top: 64%; 
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  z-index: 2;
  text-align: center;
  font-family: 'Georgia', serif;
  color: #f5e9f0;
}

@media (min-width: 768px) {
  .lottery-form {
    left:65%;
  }}



.form-wrapper {
  display: flex;
  justify-content: center;
  max-width: 300px; 
  margin: 0 auto;
  border-radius: 2rem;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.08);
}


input[type="email"] {
  flex: 1;
  padding: 0.8rem 1.2rem;
  font-size: 1rem;
  background: linear-gradient(to right, #bca8f5, #dbb8ec);
  border: none;
  color: #1b0033;
  border-radius: 0;
}

input::placeholder {
  color: #4d2b77;
}

button[type="submit"] {
  padding: 0.8rem 1.2rem;
  font-size: 1rem;
  font-weight: bold;
  background: linear-gradient(to right, #f9cce5, #f7cdd5);
  border: none;
  color: #2f1040;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 transparent;
}

button[type="submit"]:hover {
  background: linear-gradient(to right, #f7b3da, #f5b4ca);
  box-shadow:
    0 0 12px #f7cdd5,
    0 0 24px #f7cdd5,
    0 0 36px #f7cdd5;
}

button[type="submit"]:focus,
button[type="submit"]:active {
  background: linear-gradient(to right, #f9cce5, #f7cdd5);
  box-shadow: none;
  outline: none;
}

@keyframes glow-pulse {
  0% {
    box-shadow: 0 0 6px #f7cdd5, 0 0 12px #f7cdd5;
  }
  50% {
    box-shadow: 0 0 12px #f7cdd5, 0 0 24px #f7cdd5;
  }
  100% {
    box-shadow: 0 0 6px #f7cdd5, 0 0 12px #f7cdd5;
  }
}

button[type="submit"] {
  animation: glow-pulse 2s ease-in-out infinite;
}


.contact-section {
  height: 800px;
  background-color: #0E0B2B;
}




#contact-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}





#contact-container {
  position: relative;
  width: fit-content;
}

#contact-image {
  display: block;
  width: 100%;
  max-width: 300px; /* or whatever fits your layout */
  height: auto;
}



#contact-form {
  position: absolute;
  top: 80%; /* adjust based on where you want the form to sit */
  left: 10%;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 768px) {
  #contact-form {
 width: 150%;
 left: -23%;

  }}


#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 1.5rem;
  border: none;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.3);
  outline: none;
  backdrop-filter: blur(6px);
}

#contact-form textarea {
  height: 80px;
  resize: none;
  border-radius: 1.2rem;
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

#contact-form button {
  background: linear-gradient(145deg, #b79cff, #dbcfff);
  border: none;
  padding: 0.6rem 1.8rem;
  border-radius: 2rem;
  font-size: 1rem;
  color: white;
  cursor: pointer;
  animation: pulseGlow 2s infinite;
  box-shadow: 0 0 10px #b799ff;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 10px #b799ff, 0 0 20px #b799ff;
  }
  50% {
    box-shadow: 0 0 25px #d4c2ff, 0 0 35px #d4c2ff;
  }
  100% {
    box-shadow: 0 0 10px #b799ff, 0 0 20px #b799ff;
  }
}