@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=WindSong:wght@500&display=swap');


.square {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  animation: square 10s linear infinite;
  animation-delay: calc(-1s * var(--i));
}

@keyframes square {
  0%,100% {
    transform: translateY(-20px);
  }
  
  50% {
    transform: translateY(20px);
  }
}

.square:nth-child(1) {
  width: 100px;
  height: 100px;
  top: 50px;
  right: 50px;
  z-index: -1;
}

.square:nth-child(2) {
  width: 150px;
  height: 150px;
  top: 105px;
  left: 14px;
  z-index: -2;
}

.square:nth-child(3) {
  width: 60px;
  height: 60px;
  bottom: 85px;
  right: 135px;
  z-index: -1;
}

.square:nth-child(4) {
  width: 50px;
  height: 50px;
  bottom: 35px;
  left: 95px;
}

.square:nth-child(5) {
  width: 50px;
  height: 50px;
  top: 485px;
  left: 125px;
}

.square:nth-child(6) {
  width: 85px;
  height: 85px;
  top: 165px;
  right: 955px;
  z-index: 2;
}






body {
  padding: 2.5rem;
  margin: 0;
  background: #edc0bf;
  background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
  font-family: 'Inter', sans-serif;
  font-family: 'Inter', sans-serif;
}

 
    .form {
      height: 590px;
      width: 400px;
      background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
      margin: auto auto;
      border-radius: 10px;
    
      padding: 0px 0px;
      box-shadow: 2px 2px 4px rgb(0, 0, 0, .25);
    }
    
    .info {
      padding: 10px;
    }
    
    h1, h2, p {
      text-align: center;
      padding: 0px;
      margin: 5px 5px;
      font-family: 'Dancing Script', cursive;
      font-size: x-large;
    }
    #new-pg{
      font-family: 'Great Vibes', cursive;
      font-size: 1.2em;
    }
    
    h2 {
      font-family: 'Great Vibes', cursive;
      font-weight: 100;
    }
    
    p.line {
      margin: 0px auto 20px auto;
      color: #999;
    }
    
    .form input {
      font-size: 15px;
      color: #666;
      padding: 6px;
      margin: 25px auto 20px;
      display: block;
      width: 75%;  
    }
    textarea{
      font-size: 15px;
      color: #666;
      padding: 6px;
      margin: 25px auto 20px;
      display: block;
      width: 50%; 
      justify-content: center;
    }
   
    .button button {
      display: inline-block;
      width: 400px;
    }
    button {
      color: #666;
      background-color: #ffbdc7;
      border: none;
      font-family: 'Raleway';
      font-size: 18px;
      font-weight: 600;
      padding: 15px 32px;
      width: 200px;
      margin: 20px auto 0px auto; 
      float:left;
    }
    
    button.accept {
      border-radius: 0px 0px 0px 10px;
      border-right: solid 1px #cc919a;
    }
    
    button.regret {
      border-radius: 0px 0px 10px 0px;
    }
    
    button:hover {
      background-color: #cc919a;
      transition: .5s;
    }
    
    button:focus {
      outline: 0;
    }

      /* Styling the Form (Color, Padding, Shadow) */
      form {
          background-color: #fff;
          max-width: 500px;
          margin: 50px auto;
          padding: 30px 20px;
          box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
      }

      /* Styling form-control Class */
      .form-control {
          text-align: left;
          margin-bottom: 25px;
      }

      /* Styling form-control Label */
      .form-control label {
          display: block;
          margin-bottom: 10px;
      }

    

      .Meal{
        display: flex;
        flex-direction: row;
        padding: -30px;
        justify-content: space-evenly;
        
      }
      .button-bottom{
        display: flex;
        flex-direction: row;
      }