@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@1,200&family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;0,6..12,1000;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700;1,6..12,800;1,6..12,900;1,6..12,1000&family=Orbitron:wght@400;500;600;700;800;900&display=swap');

body{
    background-color: black;
    overflow-x: hidden;
}
/* Body tag ends */

#logo{
    width: 200px;
    height: 200px;
    position: relative;
    left: 550px;
}
/* logo tag ends */

h1{
    color: red;
    font-family: 'Orbitron', sans-serif;
    position: absolute;
    left: 440px;
    top: 170px;
}
/* Description TAG ENDS */

h4{
    color: aliceblue;
    font-size: 20px;
    position: absolute;
    top: 230px;
    font-family: 'Orbitron', sans-serif;
    left: 80px;
    font-style: italic;
}
/* welcome quote ends. */

#search{
    outline: none;
    margin-left: 420px;
    margin-top: 100px;
    padding: 10px;
    border-radius: 10px;
    border-color:  red ;
}
/* search bar ends */
#line{
    background-color: red;
}
/* line tag ends */

.box {
    width: 1380px;
    height: 1px;
}

.box .line {
    position: absolute;
    width: 1380px;
    height: 5px;
    top: 360px;
    left: 0;
}
/* Box,line tag ends */
.image {
    width: 300px;
    height: 150px;
}

.image .rectangle {
    position: relative;
    width: 250px;
    height: 250px;
    top: -240px;
    left: 590px;
    border-radius: 5px;
    object-fit: cover;
}
/* Image tag ends. */

#menufood{
    position: relative;
    left: 890px;
    height:250px;
    width: 250px;
    border-radius: 10px;
    top: -400px;
}
/* menu food complete */
#line1{
    background-color: red;
}
/* line tag ends */
.box1 {
    width: 1380px;
    height: 5px;
}

.box1 .line1 {
    position: relative;
    width: 1380px;
    height: 5px;
    top: -705px;
    left: 0;
}
/* line1 and box1 ends. */

/* Gallery starts */
div.gallery {
    border: 1px ;
    position: absolute;
    top: 700px;
  }
  
  div.gallery:hover {
    border: 1px  ;
  }
  
  div.gallery img {
    width: 300px;
    height: 150px;
  }
  
  div.desc {
    padding: 15px;
    text-align: center;
    color: white;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .responsive {
    padding: 15px;
    float: left;
    width: 24.99999%;
  }
  /* Gallery ends. */
  
  @media only screen and (max-width: 700px) {
    .responsive {
      width: 49.99999%;
      margin: 6px 0;
    }
      body{
        background-color: black;
        overflow-x: hidden;
    }
    #logo{
      width: 200px;
      height: 200px;
      position: relative;
      left: 150px;
  }
  h1{
    color: red;
    font-family: 'Orbitron', sans-serif;
    position: absolute;
    font-size: x-large;
    left: 55px;
    top: 170px;
}
h4{
  color: aliceblue;
  font-size: 15px;
  font-family: 'Orbitron', sans-serif;
  position: absolute;
  top: 210px;
  left: 20px;
  font-style: italic;
}
#search{
  outline: none;
  margin-left: 10px;
  margin-top: 100px;
  padding: 9.9px;
  border-radius: 10px;
  border: color red 10px;  ;
}
    }
  
  @media only screen and (max-width: 500px) {
    .responsive {
      width: 100%;
    }
  }
  
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
  /* clear fix ends */

  /* Gallery 1 starts. */
  div.gallery1 {
    border: 1px solid red;
    position: absolute;
    top: 999px;
  }
  
  div.gallery1:hover {
    border: 1px solid;
  }
  
  div.gallery1 img {
    width: 300px;
    height: 200px;
  }
  
  div.desc1 {
    padding: 15px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    color: white;
  }
  
  * {
    box-sizing: border-box;
    
  }

  /* desc1 and gallery1 */

  #grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 20px;
    top: 280px;
  }
  .meal-image {
    max-width: 100%;
    height: auto;
  }
  .meal-details {
    width: 300px;
    height: 300px;
    position: relative;
    top: 100px;
    left: 100px;
    font-family: 'Orbitron', sans-serif;
    font-size: large;
    color: rgb(238, 240, 233);
  }
  h2{
    position: relative;
    font-style: italic;
    font-family: 'Orbitron', sans-serif;
  }

  /* footer starts. */
  .fooo{
    color: hsl(335, 93%, 61%);
    font-size:x-large;
    position: relative;
    text-transform: capitalize;
    margin-left: -6px;
    font-style: italic;
    text-align: left;
    top: 2490px;
    cursor: pointer;
    height: 5%;
    width: 150%;
    font-family: 'Orbitron', sans-serif;
    background-color: rgb(51, 0, 51);
    padding: 10px 10px;
  }
  a{
    color: hsl(335, 93%, 61%);
  }
/* footer ends */