/* Used fonts in this page */
@import url("http://fonts.googleapis.com/css?family=Carrois+Gothic");
@import url('https://fonts.googleapis.com/css?family=Bungee+Shade');
@import url('https://fonts.googleapis.com/css?family=Kumar+One');

/* base page CSS */

html, body {
    font: normal 14px "Carrois Gothic", sans-serif;
    
    margin: 0;
    overflow: hidden;
    
    color: #fff;
}

/* Container that holds the content of the page */
.container {
overflow: scroll;
    overflow-x: hidden;
    position: fixed;
    width: 80%;
    height: 98%;
    margin: 20px;
    top: 0px;
    left: 10%;
  
    background: #010101;
    border: 2px solid #9ecaed;
    border-radius: 2px;
    box-shadow: 0 0 50px hsla(145, 100%, 40%, 1);
}

/* Container Scrollbar Track */
.container::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #000000;
	border-radius: 10px;
}
/* Container Scrollbar */
.container::-webkit-scrollbar
{
	width: 10px;
	background-color: #000000;
}
/* Container Scrollbar Thumb */
.container::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-gradient(linear,
									   40% 0%,
									   75% 84%,
									   from(#4D9C41),
									   to(#19911D),
									   color-stop(.6,#54DE5D))
}

/* Navigation Menu */
nav {
   position:relative;
    top:20px;
    left:5%;
    text-align: center;
    width:90%;
    height:100px;
    font-size:1.5vw;
    line-height:2em;
    font-family: 'Source Code Pro';

  
}

nav ul li {
  display:inline-block;
  list-style:none;
}

nav ul li a {
  display:block;
  margin:0;
  padding:7px 20px;
  text-shadow: -12px 22px 10px hsla(145, 100%, 40%, 1);
  color:#ffffff;
  font-family: 'Kumar One', cursive;
  
  font-size:1.7em;
  text-decoration:none;
  
  border-bottom:2px solid transparent;
  box-shadow:0px 2px 0px transparent
  
 

}
/* Navigation Menu On Hover */
nav ul li a:hover {
    text-shadow: -12px 22px 10px hsla(53, 100%, 50%, 0.73);
}
/* Navigation Menu On Click */
nav ul li a:active {
    text-shadow: -12px 22px 10px hsla(53, 100%, 50%, 0.73);
    color: hsla(112, 100%, 50%, 0.87); 
}


/* The headline of each page*/
#headline {
     position:relative;
    top:20px;
    left:5%;
    text-align: center;
    width:90%;
    height:100px;
    font-size:4vw;
    line-height:2em;
}

/* base page CSS ends here */

#headline {
     position:relative;
    top:20px;
    left:5%;
    text-align: center;
    width:90%;
    height:100px;
    font-size:4vw;
    line-height:2em;
}
#text{
    position:relative;
    top:20px;
    left:5%;
    text-align: left;
    width:90%;
    height:100px;
    font-size:3vw;
    line-height:2em;
    
    
}

#cartButton{
    position: fixed;
    top: 10%;
	right: 1%;
    margin-right: 10%;
	width: 100px;
    height: 30px;
    font-family: cursive;
    z-index: 200;
	color: green;
	text-align: center;
    
}

#cartImg{
    width:20px;
    float: right;
}
table{
    margin-left: 4%;
}
table, th, td {
    border: 1px solid green;
    box-shadow: 0 0 50px hsla(145, 80%, 40%, 1);
    width: 50%;
}

.i0 {
    width:80%;
    
}



.imgObject0 { 
   position: relative; 
   
    width: 100%; /* size of the image */
   
    float: left;
    margin-right: 5%;
    margin-bottom: 5%;
}
.i0t{ 
   position: absolute; 
   top: -15px; 
   right: -40px;
   width: 100%;
    
}
.i0t2 {
   
  
   width: 100%; 
   
   /* user-select: none; */ 
   /* prevents the user from highlighting the text*/
   /* for some reason it doesnt recognize this property, even tho it works */
}
.i0t span { 
    float: right;
    margin-right: 12%;
   color: hsla(53, 100%, 50%, 0.73); 
   font: bold 25px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
  
   left: 2%;
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
   opacity:0; /* starts at zero, goes to 1 at hover*/
}
.i0t2 span{
    float: left;
    margin-left: 12%;
   color: darkgreen; 
   font: bold 25px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   
   background: rgba(0, 0, 0, 0.7);
    
   opacity:0; /* starts at zero, goes to 1 at hover*/
   
}

.imgObject0:hover .i0t span{ opacity:1; }
.imgObject0:hover .i0t2 span{ opacity:1; cursor: pointer;}
               

footer {
    position: fixed;
	bottom: 0;
	width: 79%;
	background-color: rgba(0, 0, 0, 0.7);
    font-family: cursive;
    font-size: 22px;
	color: hsla(53, 100%, 50%, 0.73);
    text-shadow: 2px 2px 10px hsla(53, 100%, 50%, 0.5);
	text-align: center;
    
}
footer:hover{cursor: pointer;}

#aside{
    margin-top: 50%;
    margin-left: 1%;
    color: red;
    font-size: 15px;
    line-height: 25px;
}
#aside a:visited {
    color: darkorange;
}
#aside a:hover  {
    color: green;
}

form{
    margin-left: 5%;
}