@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap');
#main-body{
    background-color: rgb(228, 228, 228);
}
#main-page{
    box-sizing: border-box;
    width: 1349px;
    height: 1400px;
    background-color: rgb(228, 228, 228);
    padding: 15px;
    margin: auto;
}
#logo{
    box-sizing: border-box;
    height: 80px;
    width: 100%;
    background-color: rgb(236, 47, 47);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 0px 0px 100px;
  
   
}
#image-logo{
    width:40px;
   float:left;
 
}
#logo-mealPlanner{
  font-size: 30px;
  font-weight: lighter;
  float: left;
  color: white;
  font-family: Georgia, serif;
    letter-spacing: 1.5px;
  padding-left:10px;
  padding-top:15px;
}
.app-content{
    background: #fff;
    width: 100%;
text-align: center;
margin-top: 20px;

color: #000;
font-family: serif;

}
.app-content h1{
    font-size: 70px;
    text-transform:uppercase ;
    font-weight: 800;
      }
  .app-content p{
    margin: 20px 100px;
    font-weight: 100;
    line-height: 25px;
    color: rgb(104, 100, 100);

  }
#user-info{
    box-sizing: border-box;
    width: 100%;
    margin: 15px 0px 0px 0px;
    padding: 30px 100px 30px 100px;
    height: 1275px;
    background-color: white;
    display: grid;
    grid-template-rows: 1fr 1.5fr 1fr;
    grid-gap: 50px;
}
 
#user-form{
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    justify-items: center;
}
/* #user-form .logo{
    width: 100%;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(to bottom,#fff,#000);
  
    opacity: 0.3;
    position: absolute;
  
  } */

#inputType{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 100px;
    align-items: center;
}
#selectType{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 100px;
    align-items: center;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#height{
    background-color: rgb(228, 228, 228);
    border-radius: 15px;
    width: 200px;
}
#heightRed{
    background-color: rgb(228, 228, 228);
    border-radius: 15px;
    width: 200px;
    box-shadow: 0px 0px 5px 1px red;
}
#heightRed::placeholder{
    color: red;
}

#weight{
    background-color: rgb(228, 228, 228);
    border-radius: 15px;
    width: 200px;
}
#weightRed{
    background-color: rgb(228, 228, 228);
    border-radius: 15px;
    width: 200px;
    box-shadow: 0px 0px 5px 1px red;
}
#weightRed::placeholder{
    color: red;
}

#age{
    background-color: rgb(228, 228, 228);
    border-radius: 15px;
    width: 200px;
}
#ageRed{
    background-color: rgb(228, 228, 228);
    border-radius: 15px;
    width: 200px;
    box-shadow: 0px 0px 5px 1px red;
}
#ageRed::placeholder{
    color: red;
}

#gender{
    background-color: rgb(228, 228, 228);
    border-radius: 15px;
    width: 200px;
}
#genderRed{
    background-color: rgb(228, 228, 228);
    border-radius: 15px;
    width: 200px;
    color: red;
    box-shadow: 0px 0px 5px 1px red;
}

#activity-level{
    background-color: rgb(228, 228, 228);
    border-radius: 15px;
    width: 200px;
    text-overflow: ellipsis;
}
#activity-levelRed{
    background-color: rgb(228, 228, 228);
    border-radius: 15px;
    width: 200px;
    text-overflow: ellipsis;
    color: red;
    box-shadow: 0px 0px 5px 1px red;
}

#generate-meals-btn{
    border-radius: 15px;
    width: 200px;
    height: 40px;
    color: white;
    background-color: rgb(236, 47, 47);
    font-weight: 500;
}
#generate-meals-btn:active{
    background-color: rgb(180, 36, 36);
    font-size: 15px;
}

/* Meals */
#meals{
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px;
    text-align: justify;
    /* background-color: rgb(49, 228, 228); */
}

.meal{
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    text-align: center;
}
.mealType{
    color: rgb(236, 47, 47);
    font-size: large;
    font-weight: 500;
}
.mealDescription{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 345px;
    height: 434px;
    padding-bottom: 20px;
    background-color: rgb(236, 47, 47);
    border-radius: 20px;
    border: 3px solid rgb(236, 47, 47);
}
.mealImage{
    width: 100%;
    border-radius: 20px 20px 0px 0px;
}
.mealTitle{
    color: rgb(255, 255, 255);
    font-size: medium;
    font-weight: 500;
}
.mealCalories{
    color: rgb(255, 255, 255);
    font-size: 15px;
}
.mealButton{
    height: 30px;
    width: 150px;
    border: 1px solid white;
    background-color: transparent;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    font-size: medium;
    font-weight: 500;
}
.mealButton:active{
    background-color: rgb(180, 36, 36);
    font-size: 15px;
}

/* Recipe */
.recipe{
    display: flex;
    justify-content: center;
    background-color: rgb(228, 228, 228);
    border-radius: 10px;
    padding: 20px;
    overflow: auto;
    box-shadow: 2px 2px 5px black;
    height: 318px;
}
.display{
    display: none;
}

#recipe::-webkit-scrollbar {
    display: none;
}
#stepsBtn{
    margin: auto;
    border-radius: 15px;
    width: 150px;
    height: 40px;
    color: white;
    background-color: rgb(236, 47, 47);
    font-weight: 500;
    border: none;
}
#stepsBtn:hover{
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.973);
}
#stepsBtn:active{
    background-color: rgb(180, 36, 36);
    font-size: 15px;
    box-shadow: none;
}
table{
    width: 80%;
    /* border: 2px solid; */
    line-height: 40px;
    letter-spacing: 1px;
}
thead{
    font-size: larger;
    color: rgb(236, 47, 47);
}
tbody{
    font-size: large;
    font-weight: 500;
}
td, th{
    width:80%;
}
.ingredients{
    text-transform: capitalize;
}
.equipment{
    text-transform: lowercase;
}

/* media screen */
@media (max-width:800px) {
    #page{
        width: auto;
        height: auto;
    }
    #user-work{
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #user-form, #user-form section{
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-gap: 5px;
    }
    #meals{
        display: flex;
        flex-direction: column;
    }
    .recipe{
        padding: 5px;
    }
    table{
        font-size: medium;
    }
}

@media(max-width: 620px){
    #logo{
        justify-content: center;
        padding: 0px;
    }
    #image-logo{
        display: none;
    }
    /* table{
        width: 100%;
        letter-spacing: 0px;
    } */
}
footer{
    position: relative;
    width: 100%;
    height: auto;
    padding: 50px 100px;
    background: #111;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
footer .container{
    display:flex ;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
}
footer .container .sec{
    margin-right: 30px;
}
footer .container .sec.aboutus{
    width: 40%;
}
footer .container h2{
    position: relative;
    color: #fff;
    font-weight: 500;
    margin-bottom: 15px;
}
footer .container  h2::before{
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 50px;
    height: 2px;
    background: #f00;
}
footer p{
    color: #999;
}
.sci{
    margin-top: 20px;
    display: flex;
}
.sci li{
    list-style: none;
}
.sci li a{
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    text-decoration: none;
    border-radius: 4px;

}
.sci li a:hover{
    background: #f00;
}
.sci li a .fa{
    color: #fff;
    font-size: 20px;
}
.quickLinks{
    position: relative;
    width: 25%;
}
.quickLinks ul li{
    list-style: none;
}
.quickLinks ul li a{
    color: #999;
    text-decoration: none;
    margin-bottom: 10px;
    display: inline-block;
}
.quickLinks ul li a:hover{
    color: #fff;
}
.contact{
    width: calc(35% - 60px);
    margin-right: 0 !important;
    color: #999;
    text-decoration: none;
    position: relative;
    list-style: none;

}
.contact i{
    color: #fff;
}
.contact .info{
    position: relative;
}
.contact .info li{
    display: flex;
    margin-bottom: 16px;
}
.contact .info li span:nth-child(1){
    color: #fff;
    font-size: 20px;
    margin-right: 10px;
}
.contact .info li span{
    color: #999;
}
.contact .info li span p a{
    color: #999;
    text-decoration: none;
}
.contact .info li p a:hover{
    color: #fff;
}
@media(max-width: 520px){
    #recipe{
        width: 345px;
    }
    table{
        line-height: 30px;
    }
    thead{
        font-size: medium;
        /* color: rgb(236, 47, 47); */
    }
    tbody{
        font-size: medium;
    }
}
@media(max-width: 420px){
    #image-mealPlanner{
        display: none;
    }
    #image-logo{
        display: block;
    }
}
@media(max-width: 395px){
    #page{
        height: 395px;
        width: 395px;
    }
    .app-content h2{
        height: 395px;
        width: 395px; 
    }
}