*{margin:0px;
	padding: 0px;
	box-sizing: border-box;
	list-style: none}

a:link{text-decoration: none;
		}

a:visited{text-decoration: none;
		}	
		
a {outline: none;}


html{height: 100%;
		}

img {width: 100%;
	height: auto;
	}

body {	
	  	height: 100%;
	  	overflow-x: hidden;
	  	overflow-y: scroll;
	
		}

nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: fixed;
	width: 100%;
	justify-content: space-between;
	z-index: 0;
	}


nav::before {
	content: "";
	background: linear-gradient(to right, #ffff99 0%, #ffff00 100%);
	opacity: 0.1;
	height: 100%;
	width: 100%;
	position: absolute;
	background-size: contain;
	z-index: -1;
	}


@media (max-width: 750px)
	{
		nav{
	    display: block;
	    position: fixed;
	    width: 100vw;
	    z-index: 1;
		justify-content: center;
		}
	}



.Logo  a:link {margin-left: 20px;
			font-size: 2.75rem;
			font-family: Perpetua;
			font-weight: 500;
			color:#f2e394;
			text-shadow: 5px 5px 2px #5b4e0b;

			}

.Logo a:hover {  
				color: #ffcc5c;
				text-shadow: 3px 3px 2px #000000;
				border-radius: 5px;
		}

.Logo a:visited {color: #f2e394;}


@media (max-width: 750px)
		{ .Logo a:link{
						display: block;
						justify-content: center;
					}
				h1{
					text-align: center;
				}
				p{text-align: center;
					margin-left: none;}}





.topshelf a:link {margin-left: 55px;
			font-size: 1.5rem;
			font-family: Copperplate;
			color: #96ceb4;
			text-shadow: 2px 2px 1px #2F4F4F
			}

.topshelf a:visited {
					color: #96ceb4;
						}

@media (max-width: 750px){
        .topshelf{display: block;
            
        }
		.topshelf a:link {
			display: block;
			text-align: center;
			justify-content: center;
			margin-left: 25vw;
			margin-right: 25vw;
			
						}
			}



/*  navigation links */


@media (max-width:750px){
        nav > ul{margin-top: -4px;}
}

ul {align-items: center;
	grid-column: 2;
	font-family: Georgia;
	margin-top: 15px;
	margin-right: 5px;
	text-align: right;
	}


li {	padding: 5px;		
		display: inline-block;
		font-size: 1.7rem
		
		}


@media (max-width: 750px){
    
li {	padding: 5px;		
		display: inline-block;
		font-size: 1.5rem;
		
		}
}

/* Change the link color of navigation (right-side) on hover */



li a:link {color: #f2ae72;
			text-shadow: 1px 1px 1px #000000}
li a:hover {color: #96ceb4;
			text-shadow: 2px 2px 1px #000000
			}	

li a:visited {color: #f2ae72;}
		/*Changes links in green class to green*/

		/*.green > a:hover {}*/



/*Changes the Home link color */

.orangeHome > a:link {color: #96ceb4;
			text-shadow: 1px 1px 1px #000000
			}
.orangeHome > a:hover{color: #f2ae72;
			text-shadow: 2px 2px 1px #000000}

@media (max-width: 750px) {

			.orangeHome {display: none;}
					}	

/*--------End Nav Bar-------*/



.container {display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
			grid-template-rows: 150px 200px 100px
								100px 400px 200px
								200px 200px 200px
								200px 200px 800px
								300px;
			background: linear-gradient(to right, #009900 0%, #003300 110%);
			}

@media (max-width: 750px) {

			.container {grid-template-columns: 1fr;}
					}	


.kristen {display: grid;
			grid-row: 1;
			grid-column: 2/4;
			width: 50%;
			opacity: 0.1;
			z-index: 0;
			margin-top: 150px;
			margin-left: 330px;
			transition: 5s;

			}			

.kristen:hover {
			transition: 5s;
			display: grid;
			grid-row: 1;
			grid-column: 2/4;
			width: 150%;
			z-index: 0;
			margin-top: 100px;
			margin-left: 240px;
			opacity: 1;}



#kristen {border-radius: 13px;
			border: 1px #87bdd8 solid;
			width: 30%;
			transition: 3s;}

#kristen:hover { width: 70%;
					transition: 3s;

				}

@media (max-width: 750px) {
            #kristen{width: 30vw;
                    transition: none;}
            #kristen:hover{transition: none;}
			.kristen {grid-row: 6;
			grid-column: 1;}
					}	

.trailer {  display: grid;
			grid-row: 2;
			grid-column: 6;
			width: 175%;
			z-index: 1;
			}
		

#trailer {border: solid black 3px;}

#trailer:hover { border: solid black 2px;
				}

#trailer:visited {border-style: none}

@media (max-width: 750px) {
            #trailer {width: 70vw;
                    transition: none;}
            #trailer:hover{transition: none;}
			.trailer {
			    grid-row: 2;
			grid-column: 1;
			    margin-left: 15vw;
			}
					}



.reef 		{ 	display: grid;
				opacity: 0.9;
				width: 70%;
				grid-column: 5;
				grid-row: 5;
				border-style: dashed black 5px;
				transition: 5s;
				z-index: 1;
			}

.reef:hover{	opacity: 1;
				width: 150%;
				transition: 5s;
				z-index: 1;
				}

@media (max-width: 750px) {
            
			.reef{ width: 80vw;
			    grid-row: 12;
			    grid-column: 1;
			    margin-left: 10vw;
			    margin-top: -40px;
			}
					}


.parentsGuide { display: grid;
				grid-row: 7;
				grid-column: 5;
				align-content: center;
				z-index: 1;


				
				}	

.parentsGuide >a { font-size: 50px;
				color: #c94c4c;
				text-shadow: 5px 6px 5px black;
				vertical-align: center;
				margin-right: 30px;
				}			

@media (max-width: 750px) {
            
			.parentsGuide { width: 90vw;
			    grid-row: 11;
			    grid-column: 1;
			    margin-left: 5vw;}
					}


.movie { display: grid;
			grid-column: 2;
			grid-row: 10/12;
			}

@media (max-width: 750px) {
            
			.movie { width: 100vw;
			    grid-row: 13;
			    grid-column: 1;
			    margin-left: 0vw;}
					}

.satisfied { display: grid;
			grid-column: 3/5;
			grid-row: 7;
			margin-left: 140px;
			margin-top: 140px;
			width: 60%;
			opacity: 0.01;
			transition: 2s;
			
			}

.satisfied:hover { opacity: 1;
					transition: 3s;
					margin-left:145px;
					margin-top: 135px;
				}

#satisfied {border-radius: 20px}


@media (max-width: 750px) {
            
			.satisfied {opacity: 1; 
			        width: 60vw;
			    grid-row: 8;
			grid-column: 1;
			    margin-left: 20vw;
			}
			
					}

.Mae {	display: block;
		grid-column: 1/3;
		grid-row: 3/6;
		background-color: #EEE8AA;
		border-style: dashed;
		padding: 15px;
		z-index: 1;
		margin: 5px;
		margin-left: 25px;
		text-align: justify;
		text-indent: 20px;
		}

.Mae > h2 { font-family: Clicker Script;
			font-weight: 550;
			font-size: 30;
			text-align: center;
			margin-bottom: 0px;
			text-decoration:underline;
			text-indent: 0;
			}

@media (max-width: 750px) {
            
			.Mae { width: 80vw;
			    grid-row: 3;
			grid-column: 1;
			    margin-left: 10vw;
			}
					}


.riley {display: grid;
		grid-column: 5/8;
		grid-row: 12;
		opacity: 0.09;
		transition: 2s;
		margin-top: 200px;



}

.riley:hover {	cursor: pointer;
				opacity: 1;
				transition: 5s;
				font: #e06377;
				}

#riley { background-color: #e06377;
		border-radius: 8px;
		padding-top: 1px;
		padding-left: 1px;
		padding-right: 1px;

		border-top: black solid 17px;
		border-right: black solid 17px;
		border-left: black solid 17px;
		border-bottom: black solid 17px;
		opacity: 1;}

.demo{z-index:2;
    font-family: arial;
    font-size: 2rem;
    color: black; 
}

/*
.warOnDrugs { display: grid;
			grid-column: 1;
			grid-row: 7;
			background-color: purple;
			}			

*/








/*---------------------------*/