#title {
        text-align: left;
        color:white;
        padding: 25px;
        position: relative;
        top: 60px;
        font-family: "Times New Roman", Times, serif;
        font-style: italic;
}
body {
        /* background-color:rgba(211, 211, 211, 0.685); */
      
}

h1 {
        font-size: 4vw;
        padding-left:25px;
        text-align:center;

}


.top-left {
        position: absolute;
        text-align:left;
        top: 25px;
        left: 25px;
        font-size: 4vw;
        width:100%;
      }

.nav-container {
        position: relative;
        text-align: center;
        color: white;
        font-family: "Times New Roman", Times, serif;
        font-style: italic;
 }
.footer-container p{
         text-align: center;
         color:black;
         font-family: Arial, Helvetica, sans-serif;
}


.g-container{
        width:100%,
}
.r-container{
         display:inline-block;
         word-wrap: break-word;
 }
.r-image img{
         width:50%;
         min-width:500px;
         height:auto;
         box-shadow: 3px 3px 6px lightgrey;
         border-style: solid;
         border-color: rgb(223, 221, 221);
         border-width: 1px;
         margin-left: 10px;
 }

.food-image{
        float:right; 
        width:50%;
        max-width:400px;
        height:auto;
        position:absolute;
        left:50%;
        padding-right:50px;
        padding-left:150px;
 }
 .top-left{
        position: absolute;
        top: 8px;
        right: 16px;
 }

 /* img{ 
         max-width:100%;
         max-height:auto;
         margin-bottom:25px;
 }*/
.r-text{
         width:50%;
         min-width:500px;
         padding-left:25px;
         font-size:2vw;
 }

 th{
         text-align:left;
 }

 #ingredients tr td{
        border-collapse: collapse; 
        text-align:left;
        width:5%;
        padding-right:5px;
        padding-left:5px;
        white-space:nowrap;
} 
ul li { 
        background-color:none;
        list-style-type: none;
} 
.favorite-links ul li a {
        padding-left:25px;
        padding-bottom:25px;
        font-size:calc(8px + 1.5vw);
        text-decoration: none;

}
.formated-text{
        font-family: "Times New Roman", Times, serif;
        width:75%;
        font-size:calc(8px + 1.5vw);
        padding-left:25px;
        margin-right:25%;
        overflow-x: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
}
.formated-text a{
        font-size:calc(2px + 1.5vw);
        text-decoration:none;
        font-style: italic;

}
hr { 
         height:1px;
         border-width:1px;
         color:rgb(143, 18, 18);
         background-color:gray;
         margin-left:25;
         text-align:left;
 }

.home-text{
        font-family: "Times New Roman", Times, serif;
        width:90%;
        margin-right:50px;
        margin-left:25px;
        font-size:calc(6px + 1.25vw);
        position:relative; 
        }

h2{
        font-family: "Times New Roman", Times, serif;
        font-size:calc(12px + 1.5vw);
        
}       
#myBtn {
        display: none; /* Hidden by default */
        position: fixed; /* Fixed/sticky position */
        top: 20px; /* Place the button at the bottom of the page */
        right: 25px; /* Place the button 30px from the right */
        z-index: 99; /* Make sure it does not overlap */
        border: none; /* Remove borders */
        outline: none; /* Remove outline */
        background-color: #29b0bd94; /* Set a background color */
        color: white; /* Text color */
        cursor: pointer; /* Add a mouse pointer on hover */
        padding: 8px; /* Some padding */
        border-radius: 10px; /* Rounded corners */
        font-size: 2vw; /* Increase font size */
      }
      
#myBtn:hover {
        background-color: red;
         /* Add a dark-grey background on hover */
        box-sizing: border-box;
        
      /* body { */
       { margin: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
      
      /* .topnav */
        overflow: hidden;
        background-color: #e9e9e9;
      }
      
      /* .topnav a { */
        float: left;
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
      }
      
      /* .topnav a:hover { */
        background-color: #ddd;
        color: black;
      }
      
      /* .topnav a.active { */
        background-color: #2196F3;
        color: white;
      }
      
      /* .topnav input[type=text] { */
        float: right;
        padding: 6px;
        margin-top: 8px;
        margin-right: 16px;
        border: none;
        font-size: 17px;
      }
      
      /* @media screen and (max-width: 600px) { */
        /* .topnav a, .topnav input[type=text] { */
          float: none;
          display: block;
          text-align: left;
          width: 100%;
          margin: 0;
          padding: 14px;
        }
        
        /* .topnav input[type=text] { */
          border: 1px solid #ccc;  
        }
      }