@charset "utf-8";
/*@import url("https://www.w3schools.com/w3css/4/w3.css") screen;*/
/* CSS Document */

*{
    /*this resets the margin on the html page to 0*/
    margin:0;
}

body, html {
    height: 100%;
    background-color: hsla(0,100%,1%,0.86);
	
}


html{
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}



img {
	max-width: 100%;
}


.discription {
    color:#600; 
    
}

h1.page{
		
		display: block;
		clear: both;
	font-family: 'Ysabeau Infant', sans-serif;
	font-size: 1em;
	} 



	   #white, #white03, #white05, #white06, #white07 {
		   
		   background-color: black;
		   color: white;
		  font-family: 'Ysabeau Infant', sans-serif;
	   }

h3 {
	
	
	font-size: .8em;
	/*color:hsla(0,0%,48%,0.81);*/
	color:hsla(53.95deg 3.69% 77.56%);

}

#buy{
	
	color: aliceblue;
}
.wrapper {
	list-style: none;
	margin: 0 auto 0 auto;
	padding: 0;
	display: grid;
	max-width: 960px;
	grid-template-columns: 1fr;
	grid-template-rows:auto;
	grid-auto-flow: dense;	
	
	color:white;
	background-color: rgba(19,19,19,0.80); /*opacity: 0.6;*/
}


.wrapper li {
	margin:10px;
	border:1px solid hsla(0,93%,6%,0.38);
	padding:10px;
}

.wrapper li img:hover {
	opacity: 0.80;
}

a {
		color:hsla(0,56%,98%,0.88);
		text-decoration: none;
	}
		a:hover {
			color: #81B29A;
           text-decoration: underline; 
            text-decoration-style: dotted;
		}


.bg-text h1{
		
		display: block;
		clear: both;
	font-family: 'Ysabeau Infant', sans-serif;
	}

h1.student{
	font-family: 'Ysabeau Infant', sans-serif;
	
}




	  @media (min-width: 200px) {
      h1.student{
	font-family: 'Ysabeau Infant', sans-serif;
	position: static;
		  margin-top: 50px;
		  font-size: 1em;
}
	 	.wrapper {
	 		grid-template-columns:  1fr;
             
    background-image:url(../images/linen2.png);
	min-height: 30%;
	background-attachment: fixed;
	background-position:center;
	background-repeat: no-repeat;
	background-size: cover;
           

	
	 	} 
          
        
        .label, .labelb  {
        text-align: right;
        color:hsla(0,0%,97%,0.76);
               margin-top:30px;
			   
			   font-family: 'Raleway', sans-serif;
font-family: 'Ysabeau Infant', sans-serif;
          }
          
         

         #wide {
        border:none;  
	    }

		.text {
	 		grid-column: 1;

	 	}
          
          
           .dropbtn { 
        visibility: visible;
	}
    
    .w3-container{
        visibility: visible;
        top:-10px;
    }
       /*  h1#logo{
              top:-15px;
          }*/
          
          h2.label{
              font-size: .5em;
          }
          .parallax {
	
	
}
		  
	 .fa{
		border-radius: 50%;
		
	}	
		  
		  	.fa-align-center:before {
  display: none;
}
		  
	 }	



@media (min-width: 660px){
  
	.wrapper {
		grid-template-columns: 1fr 1fr 1fr;
		background-color: hsla(0,0%,0%,0.00);
        background-image: none;
		
	}
    
	
    /* #wide section.........*/
	#wide {
		grid-column: auto /span 3;
        grid-row: 1;
        border:none;
        padding-top:10px;
       
	}
     h2.label{
              font-size: .5em;
          }
    
     .label, .labelb  {
        text-align: right;
        color:hsla(0,0%,97%,0.76);
     padding-right:10px;
         padding-top:10px; 
    }
     /* .....end of #wide section*/
    
    #lightbox {
		margin-top: 100px;
        grid-column: auto /span 3;
        grid-row: 2;
		margin-top:100px;
        
    }
    #a {
	 		grid-column: 1;
	 		grid-row: 3;	
    }
     #b {
	 		grid-column: 2;
	 		grid-row: 3;	
    }
    
      #c {
	 		grid-column: 3;
	 		grid-row: 3;	
    }
    
	
	
	
	
	
    #MovieNight {
        grid-column: auto /span 3;
        grid-row: 4;
        
    }
	
	  #youtubet{
        grid-column: auto /span 3;
        grid-row: 4;
		  height: 165%;
		  clear:both;
		  padding-bottom: 100px;
        
    }
 
	  #carlos {
        grid-column: auto /span 3;
        grid-row: 7;
		  margin-top: 250px;
		  
    }
 
	#carlos-d {
	 		grid-column: 1;
	 		grid-row: 8;	
    }
     #carlos-e {
	 		grid-column: 2;
	 		grid-row: 8;	
    }
    
      #carlos-f {
	 		grid-column: 3;
	 		grid-row: 8;	
    }
	
	
	
    #d {
	 		grid-column: 1;
	 		grid-row: 5;	
    }
     #e {
	 		grid-column: 2;
	 		grid-row: 5;	
    }
    
      #f {
	 		grid-column: 3;
	 		grid-row: 5;	
    }
    
	#footerCopyright {
		
	 		grid-column: 1 / 4;
	 		grid-row: 5;	
   
	}
    
    #DateNight {
        grid-column: auto /span 3;
        grid-row: 6;
        
    }
    
    
    #g {
	 		grid-column: 1;
	 		grid-row: 7;	
    }
     #h {
	 		grid-column: 2;
	 		grid-row: 7;	
    }
    
      #i {
	 		grid-column: 3;
	 		grid-row: 7;	
    }     
   

 
    #Hades{ 
        grid-column: auto /span 3;
        grid-row: 8;
        
    }
    
    
    #j {
	 		grid-column: 1;
	 		grid-row: 9;	
    }
     #k {
	 		grid-column: 2;
	 		grid-row: 9;	
    }
    
      #l {
	 		grid-column: 3;
	 		grid-row: 9;	
    } 
    
    #HERMES{ 
        grid-column: auto /span 3;
        grid-row: 10;
        
    }
    
    
    #m {
	 		grid-column: 1;
	 		grid-row: 11;	
    }
     #n {
	 		grid-column: 2;
	 		grid-row: 11;	
    }
    
      #o {
	 		grid-column: 3;
	 		grid-row: 11;	
    }     
    
     #ATHENA{ 
        grid-column: auto /span 3;
        grid-row: 12;
        
    }
    
	#Icaria{ 
        grid-column: auto /span 3;
        grid-row: 12;
        
    }
    
    #p {
	 		grid-column: 1;
	 		grid-row: 13;	
    }
     #q {
	 		grid-column: 2;
	 		grid-row: 13;	
    }
    
      #r {
	 		grid-column: 3;
	 		grid-row: 13;	
    } 
    
     #CHRONOS{ 
        grid-column: auto /span 3;
        grid-row: 14;
        
    }
    
    
    #s {
	 		grid-column: 1;
	 		grid-row: 15;	
    }
     #t {
	 		grid-column: 2;
	 		grid-row: 15;	
    }
    
      #u {
	 		grid-column: 3;
	 		grid-row: 15;	
    } 
    
    
    #HEPHAESTUS{ 
        grid-column: auto /span 3;
        grid-row: 16;
        
    }
    
    
    #v {
	 		grid-column: 1;
	 		grid-row: 17;	
    }
     #w {
	 		grid-column: 2;
	 		grid-row: 17;	
    }
    
      #x {
	 		grid-column: 3;
	 		grid-row: 17;	
    } 
    
     /*  #labela{ 
        grid-column: auto /span 3;
        grid-row: 18;    
    }*/
	 #E-MICHIGAN { 
      
        grid-column: auto /span 3;
        grid-row: 18;
        
    }
    
	
    
    #aa {
	 		grid-column: 1;
	 		grid-row: 19;	
    }
    #ab {
	 		grid-column: 2;
	 		grid-row: 19;	
    }
    
    #ac {
	 		grid-column: 3;
	 		grid-row: 19;	
    } 
	
	
	
		 #E-MICHIGAN02 { 
      
        grid-column: auto /span 3;
        grid-row: 20;
        
    }
	
	  #aa02 {
	 		grid-column: 1;
	 		grid-row: 21;	
    }
    #ab02 {
	 		grid-column: 2;
	 		grid-row: 21;	
    }
    
    #ac02 {
	 		grid-column: 3;
	 		grid-row: 21;	
    } 
	
	
	#Nine{
		grid-column: auto /span 3;
        grid-row: 20;
    }
    
	 #a91 {
	 		grid-column: 1;
	 		grid-row: 21;	
    }
    #a92 {
	 		grid-column: 2;
	 		grid-row: 21;	
    }
    
    #a93 {
	 		grid-column: 3;
	 		grid-row: 21;	
    } 
	
	
	
	  #Zeus{ 
        grid-column: auto /span 3;
        grid-row: 20;
        
    }
    
    
    #ad {
	 		grid-column: 1;
	 		grid-row: 21;	
    }
    #ae {
	 		grid-column: 2;
	 		grid-row: 21;	
    }
    
    #af {
	 		grid-column: 3;
	 		grid-row: 21;	
    } 
    
	 #91 {
	 		grid-column: 1;
	 		grid-row: 22;	
    }
    #92 {
	 		grid-column: 2;
	 		grid-row: 22;	
    }
    
    #93 {
	 		grid-column: 3;
	 		grid-row: 22;	
    } 
	
	
	  #TEN{ 
        grid-column: auto /span 3;
        grid-row: 23;
        
    }
    
    
    #T1 {
	 		grid-column: 1;
	 		grid-row: 24;	
    }
    #T2 {
	 		grid-column: 2;
	 		grid-row: 24;	
    }
    
    #T3 {
	 		grid-column: 3;
	 		grid-row: 24;	
    } 
	
    
	
	 #ELEVEN{ 
        grid-column: auto /span 3;
        grid-row: 25;
        
    }
    
    
    #E1 {
	 		grid-column: 1;
	 		grid-row: 26;	
    }
    #E2 {
	 		grid-column: 2;
	 		grid-row: 26;	
    }
    
    #E3 {
	 		grid-column: 3;
	 		grid-row: 26;	
    } 
	
	#TWELVE{ 
        grid-column: auto /span 3;
        grid-row: 27;
        
    }
    
    
    #TW1 {
	 		grid-column: 1;
	 		grid-row: 28;	
    }
    #TW2 {
	 		grid-column: 2;
	 		grid-row: 28;	
    }
    
    #TW3 {
	 		grid-column: 3;
	 		grid-row: 28;	
    } 
	
	
	
	
	
		#Fourteen{ 
       grid-column: auto /span 3;
        grid-row: 29;
        
    }
    
    
    #TW4 {
	 		grid-column: 1;
	 		grid-row: 30;	
    }
    #TW5 {
	 		grid-column: 2;
	 		grid-row: 30;	
    }
    
    #TW6 {
	 		grid-column: 3;
	 		grid-row: 30;	
    } 
	
	
	
	
	
		#Fifteen{ 
        grid-column: auto /span 3;
        grid-row: 33;
        
    }
    
    
    #TW10 {
	 		grid-column: 1;
	 		grid-row: 34;	
    }
    #TW11 {
	 		grid-column: 2;
	 		grid-row: 34;	
    }
    
    #TW12 {
	 		grid-column: 3;
	 		grid-row: 34;	
    } 
	
	
	
	
    #footer{
        grid-column: auto /span 3;
        grid-row: 40;
    }
    
    #rights{
        grid-column: auto /span 3;
        grid-row: 41;
    }
    
    
	.icons{
		text-align:center;
		
	}
		
	
	.menu-icons{
		
		
	}
	
	 .fa{
		border-radius: 50%;
		
	}
	
	.fa-align-center:before {
  display: none;
}
	
	
   } /*end of @media (min-width: 660px) section*/



  


@media screen and (min-width: 450px){
    
    .wrapper {

       
	}
    

    

	
	
    h2.label{
              font-size: 1em;
          }
    
}
 

 .fa{
		border-radius: 50%;
		
	}
	.fa-align-center:before {
  display: none;
}

 
  /***********cell starts here********************/  
@media screen and (max-width: 450px){
   /* general style*/
	
	    
    h1.student {
        position: relative; /* Change the position to relative or another suitable value */
        margin-top: 25px; /* Adjust the margin as needed */
    }

  
    
      .label, .labelb  {
    
        color:hsla(0,0%,97%,0.76);
          
    }
	
	 #lightbox {
		margin-top: 100px;
	}
      
  
        #logo,h1:hover {
       
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

    
    .dropdown #menu{
    display: none;
}
    /*cell menu starts here********************/
    
    #wide{
        
        visibility:hidden;
    }
	
	 .fa{
		border-radius: 50%;
		
	}
	
		.fa-align-center:before {
  display: none;
}
}
   
@media screen and (max-width: 500px){
   /* general style - .bg-text img is visible */
    
	    

	
	
	.lightbox{
		
		margin-top: 350px;
	}
	
      .label, .labelb  {
       
        color:hsla(0,0%,97%,0.76);
    }
    
    
	
	.bg-text img{
		visibility:visible;
		z-index:9999;
	}
	
	 .fa{
		border-radius: 50%;
		
	}
	
	
		.fa-align-center:before {
  display: none;
}
    } 
	

.parallax {
	background-image:url(../images/linen2.png);
	min-height: 5%;
	background-attachment: fixed;
	background-position:top;
	background-repeat: no-repeat;
	background-size: cover;
    padding-bottom: 20px;
	
	
}