.container
    {
    display: grid;
    align-self: center;
    justify-items: center;
    align-items: center;
    margin-top: 30px;
  
    grid-template-columns: 1fr 1fr repeat(10, minmax(96px, 96px)) 1fr 1fr;
    grid-template-rows: minmax(90px,100px) repeat(auto, minmax(10px, 400px)) 30px;
    xxbackground-color: #8cffa0;
    }
    
  
  .xxcontainer > div 
    {
    background-color: #8ca0ff;  border: thin red solid;  padding: 5px;
    }
  
  .menuitem      { background: black; color: white; }
  .menubackground{ grid-column: 2/-2; grid-row: 1/2; height: 50px; background: black; justify-self: stretch; content:""; z-index: -1;}
  .menulogo      { grid-column: 3/4; grid-row: 1/2; justify-self: stretch; }
  .menuhome      { grid-column: 5/6; grid-row: 1/2; justify-self: stretch; text-align: center;}
  .menuinstagram { grid-column: 6/7; grid-row: 1/2; justify-self: stretch; text-align: center;}
  .menucontact   { grid-column: 7/8; grid-row: 1/2; justify-self: stretch; text-align: center;}
  .menuabout     { grid-column: 8/9; grid-row: 1/2; justify-self: stretch; text-align: center;}
  .menuproducts  { grid-column: 9/10; grid-row: 1/2; justify-self: stretch; text-align: center;}
  .menucart      { grid-column: -4/-3; grid-row: 1/2; justify-self: stretch; text-align: center;}
  
  .maincontent   	 			 { grid-column: 3/7;  
  background-color: #eeeeee;
  text-align: center;
  align-items: center;
  align-self: stretch;2
  }
  .maincontent:nth-child(even) { grid-column: 7/11; 
  background-color: #eeeeee;
  text-align: center;
  align-items: center;
  align-self: stretch;
  }

  
  .blogcontent   	 			 { grid-column: 3/5;
  grid-row: 0/-2;
  background-color: #eeeeee;
  text-align: center;
  align-items: center;
  align-self: stretch;
  border-right: thin #999999 solid;
  xmin-height: 600px;
  min-width: 95%;

  padding-bottom: 10px;
  padding-right: 2px;
  }
  .blogcontent:nth-child(even) { grid-column: 5/12; 
  grid-row: 0/-2;
  background-color: #eeeeee;
animation-timing-function:  text-align: center;
  align-items: center;
  align-self: stretch;
  xmin-height: 600px;
  min-width: 95%;
  
  padding-bottom: 10px;
  }

.blogby {
  color: #999999;
  font-size: 10pt;
  font-style: italic;
  text-align: left;
  margin-top: 0.5em;
   }
  
.foot {grid-column: 2/-2; grid-row: 0/-1; background:black; color: white;justify-self: stretch; text-align:right; width: 100%;}




@media (max-width: 850px)
{
  .container
    {
    display: grid;
    align-self: center;
    justify-items: center;
    align-items: center;
    margin-top: 30px;
  
    grid-template-columns: 125px 125px repeat(6, minmax(50px, 50px)) 125px 125px;
    grid-template-rows: minmax(80px,100px) minmax(80px,100px) repeat(auto, minmax(10px, 400px)) 30px;
    }
    
  
  .xxcontainer > div 
    {
    background-color: #8ca0ff;  border: thin red solid;  padding: 5px;
    }

  .menuitem      { background: black; color: white; width:100%; }
  .menubackground{ grid-column: 1/-1; grid-row: 1/3; height: 50px; background: black; justify-self: stretch; content:""; z-index: -1;}
  .menulogo      { grid-column: 2/3; grid-row: 1/3; justify-self: stretch; }
  .menuhome      { grid-column: 3/6; grid-row: 1/2; justify-self: stretch; text-align: center;}
  .menuinstagram { grid-column: 6/9; grid-row: 1/2; justify-self: stretch; text-align: center;}
  .menucontact   { grid-column: 3/6; grid-row: 2/3; justify-self: stretch; text-align: center;}
  .menuabout     { grid-column: 6/9; grid-row: 2/3; justify-self: stretch; text-align: center;}
  .menuproducts  { grid-column: 9/10; grid-row: 1/2; justify-self: stretch; text-align: center;}
  .menucart      { grid-column: 9/10; grid-row: 2/3; justify-self: stretch; text-align: center;}

  .maincontent   	 			 { grid-column: 1/6;  
  background-color: #eeeeee;
  text-align: center;
  align-items: center;
  align-self: stretch;
  }
  .maincontent:nth-child(even) { grid-column: 6/11; 
  background-color: #eeeeee;
  text-align: center;
  align-items: center;
  align-self: stretch;
  }
}


.title
{
font-family: 'Tangerine', serif;		font-size: 65px;	color: #481214;		text-shadow: 4px 4px 3px #888;	letter-spacing: normal;
padding: 10px 0px 5px 0px;
}

.subtitle
{
font-family: 'Lato', serif;				font-size: 16pt;   color: #933b68;   letter-spacing: normal;  
margin: auto;  margin-bottom: 5px;
width: 90%;
padding-bottom: 5px;
border-bottom: 1px;   border-top: 0px;   border-left: 0px;   border-right: 0px;   border-style: dotted;   border-color: #481214;
}


.nerdcontent
{
width: 100%;
margin-top: 2em;      margin-bottom: 2em;
border: thin solid red;
background-color: #00eeee;
}

.nerdtitle
{
font-family: 'Lato', serif;				font-size: 16pt;   color: #933b68;   letter-spacing: normal;  
margin: auto;  margin-bottom: 5px;      margin-top: 2em;
margin-left: 2em;       margin-right: 2em; 
padding-bottom: 5px;
border-bottom: 1px;   border-top: 0px;   border-left: 0px;   border-right: 0px;   border-style: dotted;   border-color: #481214;
}

.recommendcontent
{
margin-top: 2em;      margin-bottom: 2em;
border-bottom: 0px;   border-top: 1px;   border-left: 0px;   border-right: 0px;   border-style: solid;   border-color: #481214;
background-color: #f5f5f5;
}

.recommendtitle
{
font-family: 'Lato', serif;				font-size: 16pt;   color: #933b68;   letter-spacing: normal;  
margin: auto;  margin-bottom: 1em; margin-bottom: 3px;
width: 90%;
padding-bottom: 5px;
border-bottom: 1px;   border-top: 0px;   border-left: 0px;   border-right: 0px;   border-style: dotted;   border-color: #481214;
}

.para
{
font-family: 'Poppins', sans-serif;		 font-size: 11pt;	 text-align: justify;  letter-spacing: normal;
width: 90%; 
padding-left: 2em;		padding-right: 2em; 
}


.nerdpara
{
font-family: 'Poppins', sans-serif;		 font-size: 11pt;	 text-align: justify;  letter-spacing: normal;
padding-left: 2em;		padding-right: 2em;
margin-left: 1em;       xmargin-right: 1em; 
}

.recommendpara
{
font-family: 'Poppins', sans-serif;		 font-size: 11pt;	 text-align: justify;  letter-spacing: normal;
padding-left: 2em;		padding-right: 2em;         padding-bottom: 20px;       padding-top: 10px; 
margin-left: 2em;       margin-right: 2em; 

border-bottom: 0px;   border-top: 0px;   border-left: 1px;   border-right: 0px;   border-style: dotted;   border-color: #481214;
}


p.halfspacing
{
margin-top: 0.75em; margin-bottom: 0px;
}

p.doublespacing
{
margin-top: 2em; margin-bottom: 0px;
}




#xxnerd
{
visibility: hidden; 
transition: width .35s ease-in-out;
width:1px;
}



a.menu:link, a.menu:visited
{
font-size: 10pt; 
color: white; 
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
}


H1
{
font-family: 'Tangerine', serif;		font-size: 65px;	color: #481214;		text-shadow: 4px 4px 3px #888;	letter-spacing: normal;
font-weight: normal;
margin-top: 0.1em;
margin-bottom: 0.1em;
}

H2
{
font-family: 'Lato', serif;				font-size: 16pt;   color: #933b68;   letter-spacing: normal;  
font-weight: normal;
margin: auto;  margin-bottom: 5px;
width: 90%;
padding-bottom: 5px;
border-bottom: 1px;   border-top: 0px;   border-left: 0px;   border-right: 0px;   border-style: dotted;   border-color: #481214;
}

H3
{
font-family: 'Lato', serif;				font-size: 14pt;   color: #933b68;   letter-spacing: normal;  
font-weight: bold;
text-align:left;
}

H4
{
font-family: 'Lato', serif;				font-size: 12pt;   color: #933b68;   letter-spacing: normal;  
font-weight: bold;
text-align:left;
}

HR
{
 margin-left: 2em; margin-top: 0px; margin-bottom:0px; height: 1px; border-style: dotted;   border-color: #481214;
}



.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}



#Character {
  border-radius: 25px; background: white; padding: 20px;  border: 2px solid #666666;
    box-shadow: 3px 3px 6px #444444;
margin-top: 2em;
margin-bottom: 2em;
}

#FlavorAroma {
  border-radius: 300px; background: white; padding: 20px;  border: 2px solid #666666;
    box-shadow: 3px 3px 6px #444444;
margin-top: 2em;
margin-bottom: 2em;

}

#FlavorAromaPST {
  border-radius: 5px; background: white; padding: 20px;  border: 2px solid #666666;
    box-shadow: 3px 3px 6px #444444;
margin-top: 2em;
margin-bottom: 2em;

}



/* this is all a test section

#aromaflavor {
  position: relative;
  max-width: 50px;
  max-height: 60px;
  max-width: 100px;
  max-height: 120px;
  border: 2px solid #666666;
  padding: 10px 0px 5px 0px;
}

.imageAF {
  opacity: 1;
  xxwidth: 50px;
  xxmax-width: 100px;
  xxdisplay: block;
  xxwidth: 100%;
  xxheight: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}


.imageAF:hover .tooltipAF {
opacity: 0.5;
transform: scale(5,5);
xxposition: relative; 
xxbottom: 100%; 
xxright: 50%;
}

.tooltipAF {
  font-family: 'Lato', serif;
  font-size: 6pt;
  background-color: white;
  color:black;
  position: absolute; 
  bottom: 0%;
  left: 0%;
  text-align: center;
}*/