/*CSS Style sheet designed to be viewed at full screen on a 1080p monitor*/

.container{white-space: nowrap; width: 100%;display: flex;flex-wrap: wrap;margin: auto;}
.button		{font-size:2vw;display:block;}
.title		{background-image:linear-gradient(#66ccff, white); font-size:10vw; color:white; font-family:comic sans ms;	box-sizing: border-box;	display:flex; padding: 1vw;	width: 100%; height:15vw;border-radius: 15px;	clear:right;	justify-content:center;align-items:center;justify-content:space-around;}
.navigation	{background-color:#66ccff;	box-shadow:2px 2px 10px #333;box-sizing: border-box;	display:flex; padding: 1vw;	width: 100%;	clear:right;	justify-content:space-around;border-radius: 15px;}
.side_menu	{background-color:#66ccff;	box-shadow:2px 2px 10px #333;box-sizing: border-box;	padding: 0px;width: 20%;display: flex;flex-wrap: wrap;align-content: flex-start;}
.main_body	{background-color:#66ccff;	box-shadow:2px 2px 10px #333;box-sizing: border-box;	padding: 20px;width: 60%;font-size: 2vw;word-wrap: break-word;}
.recommended	{background-color:#66ccff;	box-shadow:2px 2px 10px #333;box-sizing: border-box;	padding: 20px;width: 20%;clear: right;font-size: 1.5vw;}
.footer{background-image:linear-gradient(#66ccff, white); font-size:10vw; color:white; font-family:comic sans ms;	box-sizing: border-box;	display:flex; padding: 1vw;	width: 100%;	clear:right;	justify-content:space-around;}
	
/* unvisited link */a:link {color: white;text-decoration: none;background-color: #66ccff;display: inline-block;padding: 1vw 1vw;}
/* visited link */a:visited {color: white;text-decoration: none;background-color: #66ccff;display: inline-block;padding: 1vw 1vw;}
/* mouse over link */a:hover {color: yellow;text-decoration: none;background-color: #66ccff;display: inline-block;padding: 1vw 1vw;}
/* selected link */a:active {color: white;text-decoration: none;background-color: #66ccff;display: inline-block;padding: 1vw 1vw;}


.img{display: flex;flex-wrap: wrap;max-width: 60px;}
.paragraph{margin:1vw;padding:2vw;float: left; display: inline; width: 90%; background-color:white;white-space: normal;box-shadow:2px 2px 10px #333;border-radius: 15px;opacity: 1.0;}
.imgwidth100{width:100%;}

/*Font Heading Rules*/
h1{font-family:arial;font-size: 6vw;text-align: center;padding-top: 1%;color: #678;}
h2{font-family:arial;font-size: 5vw;text-align: center;padding-top: 2%;color: #567;}
h3{font-family:arial;font-size: 4vw;text-align: center;padding-top: 2%;color: #456;}
h4{font-family:arial;font-size: 3vw;text-align: center;padding-top: 2%;color: #345;}
h5{font-family:arial;font-size: 2vw;text-align: center;padding-top: 2%;color: #234;}
h6{font-family:arial;font-size: 1vw;text-align: center;padding-top: 2%;color: #123;}
/*End Font Heading Rules*/

/* Tablet Navigation size settings */
@media screen and (max-width: 768px) {
    	.title{display:none;}
	.navigation{
		font-weight:900;
		font-family:Comic Sans MS;
		flex-direction: row;
		flex-wrap: wrap;box-sizing: 
		border-box;display:flex;
		padding: 1vw;
		background-color:#66ccff;
		width: 100%;
		clear: right;
		justify-content: ;
		justify-content: ;}
    	.side_menu{background-color:#66ccff;display: flex;width:25%;}
    	.main_body{background-color:#66ccff;border:none;box-shadow:2px 2px 10px;width:75%;}
	.recommended{background-color:#66ccff;border:none;box-shadow:2px 2px 10px;display: none;}
	.footer{background-color:#66ccff;border:none;box-shadow:2px 2px 10px;}
    }

/* Mobile Navigation size settings */
@media screen and (max-width: 320px) {
	.title{display:none;}
    	.navigation{
		font-weight:900;
		font-family:Courier;
		font-size: 2vw;
		flex-direction: column;
		background-color:#66ccff;
		display: flex;
		align-content: center;
		justify-content: space-around;
		align-items: center;
		}
    	.side_menu{background-color:#66ccff;height:375px;display: none;}
    	.main_body{font-size: 6vw;color:blue; background-color:#66ccff;display: flex; width:100%;}
	.recommended{background-color:#66ccff;border:none;box-shadow:2px 2px 10px #333;display: none;}
    	.footer{background-color:#66ccff;height:75px;display: flex; width:100%;}
	.button{font-size:9vw;}
	.img{display:none;}
}

p {animation-duration: 1s;animation-name: slidein;animation-iteration-count: 1;font-size: 8vw;}

@keyframes slidein {from {margin-left: 100%;width: 300%;}to{margin-left: 0%;width: 100%;}

/*end of css style sheet*/