.recipe-pic {
    height:30%;
}

.recipe-pic:hover {
    transform: scale(1.1);
}

body {
    position: relative; 
    background-image: url("../images/background.jpeg");
    background-size: cover;
}

#query-div{  background-image: linear-gradient(to bottom, orange, red);
    color: white;
}

#jumbo {
    background-image: linear-gradient(to bottom, red, orange);
    color: white;
}

#title {
    font-size: 72px;
}

footer {
    background-image: linear-gradient(to bottom, orange, red);
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0px;
    top: 98%;
    width: 100%;
    height: 100px;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 50px;
}

.card-header {
    color: white;
    background-image: linear-gradient(to top, orange, red);
    height: 70px;
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
}

.card{
margin-top: 37px;
position: float right ;
}

.search {
color: white;
background-color:goldenrod;
margin-top: 10px; 
float:inline-end;

}

.search:hover{
    
    color: orange;
    background-color:black;

}

.imgPort{
/* width: 320px; */
border: 0 none;
/* display: inline-block; */
margin-bottom: 50px;
clear: both;
}


.submit {
    font-size: 20px;  
color: white;
background-color:black;
padding-bottom: 7px;
}

.submit:hover{
    color: black;
    background-color:orange;

}

.youtube {
    background-color:red;
    color: white;
    font-size: 20px;
}

.youtube:hover{
    background-color: black;
    color: white;

}


iframe{
    display: none;
}

.index-card {
    margin-right: -15px;
    margin-left: -15px;
}

.card-body{
    padding-bottom: 0px !important;
    background-color: white;
}

.main {
  
    width: 100%;
    /* rgb stands for red, green, blue using a combination of these three colors, you can make ANY color. Play around with th numbers a little bit! */
    /* position: relative; */
  }
  .secondary {
 
    width: 100vw;
    position: relative
  }

  #recipe-views {
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
  }

  .recipe-container {
      display: inline-block;
      /* width: 30%; */
  }

  .recipe-link {
    font-size: 20px
  }

#video {
    
    height: 300px;
    width: 100%;
    /* height: auto;
    margin-top: 10px;
    margin-right: 25px; */
}
@media only screen and (max-width:640px){
    *{
        max-width:100%;
    }

    #video {
        width:200px;
        height:200px;
    }
}
@media only screen and (max-width:768px){
    *{
        max-width:100%;
    }

    #video {
        width:300px;
        height:200px;
    }
}
@media only screen and (max-width:980px){
    *{
        max-width:100%;
    }

    #video {
        width:400px;
        height:300px;
    }
}