style.txt

.first_photo{
    width: 100%;
    vertical-align: middle;
}

.the_name{
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 15%;
    left: 37%;
    color: white;
    font-size: 80px;
    font-family: 'Cookie', cursive;
}

.welcome{
    text-align: center;
    position: absolute;
    top: 35%;
    left: 45%;
    color: white;
    font-size: 35px;
}

.logo{
  width: 100%;
  height: 30%;
  margin-left: 0%;
  margin-top: -20%;
}


.sidebar {
  height: 100%;
  width: 27%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  font-size: 36px;
}

.closebtn{
  margin-left: 80%;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.openbtn{
    background-color: transparent;
    color: white;
    text-align: center;
    position: absolute;
    top: 66%;
    left: 47%;
    width: 100px;
    height: 50px;
    text-transform: uppercase;
    border-color: white;
}

.openbtn:hover{
  background-color:rgb(63, 54, 54);
  }
  
#main{
    transition: margin-left .5s;
    padding: 20px;
  }

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }

.breakfast{
    width: 100%;
    height: 19.2%;
    background-color: rgb(38, 38, 38);
    margin-top: -20%;
}

.b{
  color: white;
  text-transform: uppercase;
  font-size: 170%;
  font-family: 'Varela Round', sans-serif;
  padding-top: 18%;
  padding-left: 21%
}

.img_br{
  width: 45%;
  height: 150%;
  transform: rotate(330deg);
  padding-left: 65%;
  margin-top: -30%;
}

.lunch{
  width: 100%;
  height: 19.7%;
  background-color: rgb(237, 174, 0);
  display: block;
}

.l{
  color: white;
  text-transform: uppercase;
  font-size: 170%;
  font-family: 'Varela Round', sans-serif;
  padding-top: 18%;
  padding-left: 34%;
  margin-block-start: 0;
  margin-block-end: 0;
}

.img_l{
  width: 40%;
  height: 135%;
  margin-left: -4%;
  margin-top: -34%;
}

.desserts{
  width: 100%;
  height: 19.3%;
  background-color: rgb(219, 219, 219);
  display: block;
}

.d{
  color: black;
  text-transform: uppercase;
  font-size: 170%;
  font-family: 'Varela Round', sans-serif;
  padding-top: 18%;
  padding-left: 27%;
  margin-block-start: 0;
  margin-block-end: 0;
}

.img_ds{
  width: 40%;
  height: 140%;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  margin-left: 66%;
  margin-top: -34%;
}

.drinks{
  width: 100%;
  height: 21.5%;
  background-color: rgb(255, 255, 255);
  display: block;
}

.r{
  color: black;
  text-transform: uppercase;
  font-size: 170%;
  font-family: 'Varela Round', sans-serif;
  padding-top: 18%;
  padding-left: 34%;
  margin-block-start: 0;
  margin-block-end: 0;
}

.img_dr{
  width: 37%;
  height: 80%;
  margin-left: -2%;
  margin-top: -27%;
  transform: rotate(-4deg);
}

.pumpkin{
    width: 105%;
    height: 357%;
    border-radius: 50%;
    grid-column-start: 11;
    grid-column-end: 15;
    grid-row-start: 3;
    grid-row-end: 2;
}

.grid-container{
    display: grid;
    grid-template-columns: repeat(25, 4%);
    grid-template-rows: repeat(25, 4%);
}

.first_title{
    font-size: xx-large;
    width: 350px;
    grid-column-start: 17;
    grid-column-end: 22;
    grid-row-start: 2;
    grid-row-end: 4; 
}

.first_text{
    grid-column-start: 17;
    grid-column-end: 25;
    grid-row-start: 3;
    grid-row-end: 9; 
}

.button{
    background-color: rgb(237, 174, 0);
    color: black;
    width: 110px;
    height: 27px;
    text-transform: uppercase;
    text-decoration: none;
    padding-left: 8%;
    padding-top: 2.4%;
    border: none;
    grid-column-start: 17;
    grid-column-end: 20;
    grid-row-start: 5;
    grid-row-end: 7; 
}

.table{
    width: 79%;
    height: 94%;
    border-radius: 50%;
    grid-column-start: 2;
    grid-column-end: 9;
    grid-row-start: 6;
    grid-row-end: 11; 
}

.table_2{
    width: 140%;
    height: 150%;
    border-radius: 50%;
    grid-column-start: 6;
    grid-column-end: 12;
    grid-row-start: 7;
    grid-row-end: 12; 
}

.dot {
    height: 200px;
    width: 200px;
    background-color: rgb(237, 174, 0);
    border-radius: 50%;
    grid-column-start: 13;
    grid-column-end: 18;
    grid-row-start: 10;
    grid-row-end: 15; 
  }

  .circle{
    grid-column-start: 18;
    grid-column-end: 25;
    grid-row-start: 13;
    grid-row-end: 20;   
  }

  .party{
    width: 100%;
    height: 719px;
    background-color: rgb(219, 219, 219);
    grid-column-start: 1;
    grid-column-end: 27;
    grid-row-start: 16;
    grid-row-end: 22;
    }

  .second_title{
    color: rgb(15, 83, 89);
    font-size: xx-large;
    margin-left: 500px;
    grid-column-start: 2;
    grid-column-end: 20;
    grid-row-start: 16;
    grid-row-end: 22;
  }

  .check_mark{
    color: rgb(15, 83, 89);  
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row-start: 17;
    grid-row-end: 22;
  }

  .third_title{
    text-transform: uppercase;
    color: black;
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 17;
    grid-row-end: 22;
  }

  .second_text{
    color: black; 
    grid-column-start: 3;
    grid-column-end: 11;
    grid-row-start: 18;
    grid-row-end: 22; 
  }

  .check_mark2{
    color: rgb(15, 83, 89);  
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row-start: 20;
    grid-row-end: 22;
  }

  .fourth_title{
    text-transform: uppercase;
    color: black;
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 20;
    grid-row-end: 22;
  }

  .third_text{
    color: black; 
    grid-column-start: 3;
    grid-column-end: 11;
    grid-row-start: 21;
    grid-row-end: 23; 
  }

  .check_mark3{
    color: rgb(15, 83, 89);  
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row-start: 23;
    grid-row-end: 24;
  }

  .fifth_title{
    text-transform: uppercase;
    color: black;
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 23;
    grid-row-end: 24;
  }

  .fourth_text{
    color: black; 
    grid-column-start: 3;
    grid-column-end: 11;
    grid-row-start: 24;
    grid-row-end: 25; 
  }
  
  .check_mark4{
    color: rgb(15, 83, 89);  
    grid-column-start: 16;
    grid-column-end: 20;
    grid-row-start: 17;
    grid-row-end: 22;
  }

  .sixth_title{
    text-transform: uppercase;
    color: black;
    grid-column-start: 17;
    grid-column-end: 20;
    grid-row-start: 17;
    grid-row-end: 22;
  }

  .fifth_text{
    color: black; 
    grid-column-start: 17;
    grid-column-end: 25;
    grid-row-start: 18;
    grid-row-end: 22; 
  }

  .check_mark5{
    color: rgb(15, 83, 89);  
    grid-column-start: 16;
    grid-column-end: 20;
    grid-row-start: 20;
    grid-row-end: 22;
  }

  .seventh_title{
    text-transform: uppercase;
    color: black;
    grid-column-start: 17;
    grid-column-end: 25;
    grid-row-start: 20;
    grid-row-end: 22;
  }

  .sixth_text{
    color: black; 
    grid-column-start: 17;
    grid-column-end: 25;
    grid-row-start: 21;
    grid-row-end: 23; 
  }

  .check_mark6{
    color: rgb(15, 83, 89);  
    grid-column-start: 16;
    grid-column-end: 20;
    grid-row-start: 23;
    grid-row-end: 24;
  }

  .eighth_title{
    text-transform: uppercase;
    color: black;
    grid-column-start: 17;
    grid-column-end: 25;
    grid-row-start: 23;
    grid-row-end: 24;
  }

  .seventh_text{
    color: black; 
    grid-column-start: 17;
    grid-column-end: 25;
    grid-row-start: 24;
    grid-row-end: 25; 
  }

  .grid-container_2{
    display: grid;
    grid-template-columns: repeat(25, 4%);
    grid-template-rows: repeat(30, 4%);
  }

  .about_us{
    width: 100%;
    height: 740px;
    background-color: rgb(38, 38, 38);
    grid-column-start: 1;
    grid-column-end: 27;
    grid-row-start: 1;
    grid-row-end: 25; 
  }

  .yellow_block{
    background-color: rgb(237, 174, 0);
    width: 100%;
    height: 150px;
    grid-column-start: 2;
    grid-column-end: 25;
    grid-row-start: 7;
    grid-row-end: 9; 
  }

  .img_party{
    width: 88%;
    height: 102%;
    grid-column-start: 6;
    grid-column-end: 12;
    grid-row-start: 3;
    grid-row-end: 11; 
  }

  .img_people{
    width: 113%;
    height: 130%;
    grid-column-start: 14;
    grid-column-end: 20;
    grid-row-start: 4;
    grid-row-end: 9; 
  }

  .text{
    color: rgb(237, 174, 0);
    grid-column-start: 14;
    grid-column-end: 20;
    grid-row-start: 2;
    grid-row-end: 4; 
  }

  .f_title{
    color: rgb(237, 174, 0);
    grid-column-start: 6;
    grid-column-end: 12;
    grid-row-start: 11;
    grid-row-end: 13; 
  }
  
  .m_text{
    color: white;
    grid-column-start: 6;
    grid-column-end: 12;
    grid-row-start: 12;
    grid-row-end: 17; 
  }

  .s_text{
    color: white;
    font-size: 15px;
    grid-column-start: 14;
    grid-column-end: 21;
    grid-row-start: 11;
    grid-row-end: 16; 
  }

  .btn2{
    background-color: rgb(237, 174, 0);
    color: black;
    width: 110px;
    height: 27px;
    text-transform: uppercase;
    text-decoration: none;
    padding-left: 6%;
    padding-top: 2%;
    border: none;
    grid-column-start: 14;
    grid-column-end: 18;
    grid-row-start: 12;
    grid-row-end: 16; 
  }

  .s_title{
    color: rgb(15, 83, 89);
    grid-column-start: 10;
    grid-column-end: 18;
    grid-row-start: 16;
    grid-row-end: 18; 
  }

  .t_text{
    font-family: 'Anton', sans-serif;
    grid-column-start: 11;
    grid-column-end: 20;
    grid-row-start: 17;
    grid-row-end: 20; 
    background: -webkit-linear-gradient(#e26407,#241c17);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40px;
  }

  .btn3{
    background-color: rgb(237, 174, 0);
    color: black;
    width: 120px;
    height: 30px;
    text-transform: uppercase;
    text-decoration: none;
    padding-left: 9.3%;
    padding-top: 2.2%;
    border: none;
    grid-column-start: 12;
    grid-column-end: 16;
    grid-row-start: 19;
    grid-row-end: 21; 
  }

  .snack{
    width: 100%;
    height: 70%;
    border-radius: 50%;
    grid-column-start: 9;
    grid-column-end: 17;
    grid-row-start: 22;
    grid-row-end: 34; 
}

  .mix{
    width: 58%;
    height: 202%;
    border-radius: 50%;
    grid-column-start: 7;
    grid-column-end: 14;
    grid-row-start: 21;
    grid-row-end: 23; 
}

.dot_2 {
  height: 150px;
  width: 150px;
  background-color: rgb(237, 174, 0);
  border-radius: 50%;
  grid-column-start: 15;
  grid-column-end: 21;
  grid-row-start: 27;
  grid-row-end: 30; 
}

.circle_2{
  grid-column-start: 5;
  grid-column-end: 10;
  grid-row-start: 27;
  grid-row-end: 29;   
}

.grid-container_3{
  display: grid;
  grid-template-columns: repeat(25, 4%);
  grid-template-rows: repeat(15, 4%);
}

.light_grey_block{
  width: 100%;
  height: 350%;
  background-color: rgb(219, 219, 219);
  grid-column-start: 1;
  grid-column-end: 27;
  grid-row-start: 6;
  grid-row-end: 8;
  }

  .yellow_block_2{
    background-color: rgb(237, 174, 0);
    width: 450%;
    height: 133%;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 7;
    grid-row-end: 10; 
  }

  .sweets{
    width: 82%;
    height: 200%;
    grid-column-start: 13;
    grid-column-end: 24;
    grid-row-start: 7;
    grid-row-end: 9; 
  }

  .t_title{
    color: black;
    grid-column-start: 5;
    grid-column-end: 13;
    grid-row-start: 7;
    grid-row-end: 8; 
  }

  .f_text{
    color: black;
    font-size: 15px;
    grid-column-start: 5;
    grid-column-end: 12;
    grid-row-start: 8;
    grid-row-end: 10; 
  }

  .btn4{
    background-color: rgb(237, 174, 0);
    color: rgb(38, 38, 38);
    width: 100px;
    height: 27px;
    text-transform: uppercase;
    text-decoration: none;
    padding-left: 5%;
    padding-top: 1.6%;
    border: solid 2px;
    grid-column-start: 5;
    grid-column-end: 9;
    grid-row-start: 10;
    grid-row-end: 12; 
  }

  .dark_grey_block{
    width: 100%;
    height: 1100px;
    background-color: rgb(38, 38, 38);
    grid-column-start: 1;
    grid-column-end: 27;
    grid-row-start: 12;
    grid-row-end: 19;
    }

  .sweets_2{
    width: 60%;
    height: 35%;
    grid-column-start: 4;
    grid-column-end: 14;
    grid-row-start: 11;
    grid-row-end: 19; 
  }

  .dark_grey_block_2{
    width: 120%;
    height: 20%;
    background-color: rgb(38, 38, 38);
    grid-column-start: 10;
    grid-column-end: 15;
    grid-row-start: 11;
    grid-row-end: 18;
  }

  .e_title{
    color: white;
    font-size: xx-large;
    font-size: 32px;
    grid-column-start: 10;
    grid-column-end: 21;
    grid-row-start: 11;
    grid-row-end: 13;
  }

  .e_text{
    color: white;
    width: 340px;
    height: 30px;
    grid-column-start: 10;
    grid-column-end: 14;
    grid-row-start: 12;
    grid-row-end: 15;
  }

  .pasta{
    width: 75.3%;
    height: 64%;
    grid-column-start: 16;
    grid-column-end: 24;
    grid-row-start: 11;
    grid-row-end: 18; 
  }

  .scary_pumpkin{
    width: 45%;
    height: 488%;
    grid-column-start: 4;
    grid-column-end: 24;
    grid-row-start: 15;
    grid-row-end: 15; 
  }

  .white_block{
    width: 82%;
    height: 488%;
    background-color: white;
    grid-column-start: 13;
    grid-column-end: 24;
    grid-row-start: 15;
    grid-row-end: 15;
    }

  .n_title{
    color: rgb(38, 38, 38);
    font-size: 28px;
    grid-column-start: 14;
    grid-column-end: 25;
    grid-row-start: 15;
    grid-row-end: 16;
  }

  .n_text{
    color: rgb(38, 38, 38);
    width: 410px;
    height: 30px;
    grid-column-start: 14;
    grid-column-end: 25;
    grid-row-start: 17;
    grid-row-end: 18;
  }

  .btn5{
    background-color: rgb(38, 38, 38);
    color: white;
    width: 110px;
    height: 30px;
    text-transform: uppercase;
    padding-left: 8.5%;
    padding-top: 2.2%;
    border: none;
    text-decoration: none;
    grid-column-start: 14;
    grid-column-end: 18;
    grid-row-start: 16;
    grid-row-end: 17;
  }

  input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }
  
  .btn6{
    background-color: rgb(237, 174, 0);
    color: black;
    width: 100px;
    height: 30px;
    text-transform: uppercase;
    border: none;
  }
  
  .container {
    border-radius: 5px;
    padding: 20px;
  }
 
  .form_group {
    display: flex;
    width: 80%;
    margin: 0 auto;
    }
    form {
      width: 50%;
      background: white;
      padding: 2%;
    }
    .form_info {
      width: 50%;
      background: white;
      padding: 2%;
    }
  input[type=text], select, textarea {
    padding: 12px;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #000;
}
hr {
  border: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
input, textarea#subject {
  outline: none;
}