* {font-family: Trebuchet MS , Lucida Console, gill sans,  arial; }
body { 
 box-shadow: -4px 4px 200px #975717; 
background-color: #573707; 
color: #D78307;
margin: 12.7% ;
padding: 5.7% 9%;
border: 10px #471727 double; 
border-radius:  .84em;

}
.title {text-align: center; }
h3{color: #bd9964;
margin: 0 0 5% 0%;}

p {text-indent: 7%;
}
strong { font-size: large;
}
li{  font-size:.8em;}


a:link{
color: #BD832D;
}
a:visited {
color: #445D82;
color: #BD832D;
color: #6394BD;
color: #2D7BBD;
color: #bd9964; 
}

a:focus {color: #BD832D;
}
a:hover {color: #6394BD;
}
a:active{color: #2D7BBD;
}
 	

/* For Navigation  */
#cornerLogo{ width: 22%; height: 22%;  margin: -5% -4% 0% -12% ;  float: left;  clear: left;}
#nav{ width: 100%;
margin: -5% -5% 20%  5%;
}
#nav a:link{
color: #BD832D;
}
#nav a:visited {color: #bd9964; 
}
#nav a:focus {color: #BD832D;
}
#nav a:hover {color: #6394BD;
}
#nav a:active{color: #2D7BBD;
}
.navigationBar { font-size: 95%; letter-spacing: .02em; word-spacing: .09em; margin: 0 0 0 -2%; max-width: 100%;} 

.navigationBar ul{ width: 100%;
margin: -55% 5% -8% 0;
display: flex;
}
.navigationBar  li {list-style-type: none;
 float: left;
min-width: 10%;
max-width: 30%;
height: 3em;
margin:  -2% 0% -4% 0% ;
padding: 5% 1.2% 2% 1.2%;
border: .17em #BD832D solid; 
text-align: center;
font-weight: bold;
}
#left {border-radius: .75em 0 0 .75em; }
#middle { border-radius: 0; }
#right { border-radius: 0 .75em .75em 0;}

.navigationBar li a{ font-size: 1.5em;
text-decoration: none;}



/*  For index.html  */
.tableContainer{
width:100%;
padding: 0 0 5% 0;}

.button {padding: 21% 0;   }
.button:hover {opacity: 92%; }
.button:active {opacity: 96%;   }
.buttonL {max-width: 55%;
border-radius: 2em; 
float: left;
}
h3.buttonL {margin: .5em;}

.shell {clear: left;  float: left;  margin: 2% -9% 8% 0;  border-radius: 1.3em; }
.shell:active {border: 3px #573707 solid; backgroun?d-color: #673707;}



h1#welcome{clear: left;
margin: 10% 0 0 0;
}
h1#revolutionary{text-indent: 5%;
}
#Asource{margin: 5% 0 11.7% 0;}


#logo {max-width: 87%; 
margin: 4% 6%;
}



.RecipeImg{ margin: 5% 5% 5% -10%;}
.RecipeImg p img{ max-width: 100%;
border-radius: 20px;

}

#recipemenu{text-align:  center;}

#recipe{ margin: 25% 0 0 0 ;
background-color:  #7E4F0A;
 box-shadow: -4px 4px 20px 2px #975717 ; 
border-radius: 30px;
padding: 10%;
line-height: 2.4em;
}
#recipe ul{list-style-type: none; }
#orangeAvocado { border-radius: 20px; }

/***************/
.trial { max-width: 15%; 
border-radius: 20px;
}
/**************/



#RecipeMenu a:link {color: #6394BD;
color: #2D7BBD;
color: #445D82;
color: #2A6FD7;
color: #BD832D;
font-weight: bold;
font-size: x-large;
}



#footer {background-color: #5E3B07 ;
border-radius: 30px;
margin: 1em;
padding: .9em;
clear: left;
height: 2em;
}
#footer h6{ margin: 0 1% 5% 2%; height: 1.5em;  float: left; padding: 1em 4.2em;}
#back{clear: left; float: left; text-indent: 0; margin: 1% 1% 1% -3%; padding: 1%; background-color: #5E3B07; border: 1px black solid; border-radius: 7px; box-shadow: 0px 0px 15px 1px  #aaa;}
/*                            Other Pages    */
#PrivacyNotice {font-size: 0.7em;
margin: 0 0 5% 0;}
#tips { padding: 7.7%;
background: url("images/voaltano750.webp") no-repeat center;
background-color: #573707; 
background-size: cover;
width: 95%;
margin: 2% 2% 2% -5%;
min-height: 460px;
color: #000;
 #4D6053;
border-radius: 25px;
box-shadow: 0 0 40px 8px #fff;
}
























/**************************************************************/



@media only screen and (min-device-width:300px) and (max-device-width:767px){
       <!--	h1, p {color: #772727;   } -->

body{ 
margin: -5% ;
padding: 1.7% 2%;
 box-shadow: -4px 4px 90px #975717; 
}


.navigationBar { font-size: 90%; letter-spacing: .02em; word-spacing: .2em; margin: 0 0 0 -2%; max-width: 100%;} 
.navigationBar  li {
 float: left;
min-width: 10%;
max-width: 30%;
height: 3em;
margin:  -2% 0% -4% 0% ;
padding: 5% 1% 2% 1%;
}

.navigationBar li a{ font-size: 1em;
text-decoration: none;}

.tableContainer{ width: 95%;
}
#footer {
margin: 0em;
padding: 1em;
}
#footer h6{  padding:  1em 4em;}
/**************************************************************/