/****************lay out*************/

body ul,li {
    margin: 0;
	padding:0px;
	
}
main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    height: 100vh;
}

#left-side {
    grid-column: 1/5;
    grid-row: 1/9;
    background-color: #FFCC66;
}

#right-side {
    grid-column: 5/9;
    grid-row: 1/9;
    background-color: rgba(0,153,204,1.00);
}
#top-left {
    grid-column: 1/4;
    grid-row: 1/5;
    background-color: rgba(242,65,148,1.00);
	
}

#center {
    grid-column: 2/8;
    grid-row: 2/8;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position:relative;
    background-color: #FFFFFF;
	
}
#logo{
    grid-column: 2/4;
    grid-row: 2/3;
    background-color: #0099CC;
    display: flex;
   position:relative;
	z-index: 100;
}

#assignments{
    background-color: #F24194;
}

/*********************typography***************/
h1,h2{font-family: 'Merienda', cursive;}


/*******************header*********************/

main{
	position:relative; 
	font-family:'Roboto', 'Open Sans';
}

h1{
	position:absolute;
	left:0px;
	bottom:-50px;
    font-size:4vw;
	margin:0px;
	transform-origin: top left;
	transform: rotate(-90deg);
	color:#0099CC;
    
}


/****************assignment**************/

#assignments{
    position: relative;
	overflow-y:scroll;
   
}

#assignments h2{
	color:#fff;
	padding:15px 0px;
	font-size:2.2rem;
	position: absolute;
	right:100px;
	top:15px;
	margin:0px;
	
}


#assignments ul{
	position: absolute;
	right:60px;
	top:120px;
}

#assignments ul li {
	
	list-style-type: none;
    border: 2px solid #020202;
    background-color: #FFFFFF;
    border-radius: 6px;
	padding:5px;
	margin:8px 0px;
	width:150px;
	text-align: center;

}
  

#assignments li a{
    text-decoration: none;	
   
	
}

a:link, a:visited{
	color:#000;
}

a:hover, a:active{
	color:#01B2DC;
}

/****************final**************/

#final{
    position: relative;

}

#final ul{position: absolute;
	left:5vw;
	top:20vh;
	
}
#final ul li {
	
    list-style-type: none;
    border: 2px solid #020202;
    border-radius: 6px;
	padding:20px;
	margin: 30px 0px;
	width:7.5vw;
	height: 11.5vh;
	text-align: center;
	

}
.front{
	line-height:45px;
	font-size:1.2rem
}

.back{
	font-size:0.9rem;
	padding:0px;
	margin:5px;
}
#pink{background-color: #F24194;}
#yellow{background-color: #FFCC66;}

/******************logo******************/
#logo{
	
}
#logo img{
	padding:10px 20px;
	padding-left:10px;
   }

#logo h2{
	color:#fff;
	font-size:1.8rem;
	
	
}
/****************center*******************/

#center img{
    position: absolute;
    top: 0px;
    left: 26vw;
	height:75vh;
	width:23vw;
	
	}

/***************footer*******************/
footer{
	position: absolute;
	bottom:0px;
	right:10px;
	font-size:0.8em
}
footer p a:link, footer p a:visited{
	color:#064C64;
}



/**************flip card***************/

.flip-container { perspective: 1000px; }
	
.flip-container.hover .back {
	transform: rotateY(0deg);
}

.flip-container.hover .front {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 100%;
}

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
	height: 0;
	padding-top:100%;
}

.front, .back {
	-webkit-backface-visibility: hidden; /*still needed for safari & android*/
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}

.front { transform: rotateY(0deg); z-index: 2; }

.back {
	transform: rotateY(-180deg);
	background:#F24194;
	padding:0px;
	box-sizing: border-box;
	margin-top:-18px;
}

#yellow .back{background-color: #FFCC66;}
.front p {
	display:block;
	margin: 0px;
}

.title {
	text-transform:uppercase;
	font-size:14px;
}

.link {
	margin-bottom:2px;
	font-weight:100;
	color:#070707;
}


}