*{
	box-sizing: border-box;
}

/*Header*/
body{
	background-image:linear-gradient(to top,rgba(209, 186, 207,1),rgba(255, 84, 152,1),rgba(105, 255, 255,1),rgba(209, 186, 207,1));
	background-size: 100% 145%;
	background-position: center;
	margin: 0;
	padding: 0;
}

/*Classes*/
.break1{
	margin: 0 15%;
	border-style: solid;
	border-color: white;
}
/* grid 1 */
.top-showcase{
	display: grid;
	height: 75%;
	width: 75%;
	grid-template-areas:
			'top-showcase animal-1'
			'top-showcase animal-2';
	grid-template-columns: 75% 1fr;
	grid-gap: 45px;
	margin-left: 3%;
	margin-top: 50px;
}	

.top-showcase a{

	text-decoration: none;
}

.nav-bar{
	
	overflow: hidden;
	width: 100%;
	height: 10vh;
	background-color: rgb(242, 216, 227);
}

.nav-bar ul {
	position: relative;
	padding-top: 1%;
	padding-bottom: 1%;
	margin-top: 0px;	
	width: 100vw	;
	height: 100%;
	grid-gap: 0px;	
	display: block;
}	

.nav-bar ul li{
	display: inline-block;
	line-height: 3.5em;
}



#active {
	background-color: white !important;
	color:black !important;
}

#search-label {
	border-style: none;
	font-size: 25px;
	float: right;
	line-height: 2.5em;
	margin-right: 5vw;
}
.search-box {
	position: relative;
	padding-top: 1vh;
	padding-bottom: 0.75vh;
	background-color: rgba(255,255,255,0.9);
	width: 40vw;	
	margin-left: 1.5vw;
	border-style: groove;
    border-radius: 5px 5px 5px 5px;
	text-align: left;
	font-family: sans-serif;
	font-size: 15px;
	outline-width: 0px;

}
.nav-bar ul li a:hover{
	   animation-name: nav-bar-hover-in;
	   animation-duration: 0.5s;
	   animation-fill-mode: forwards; 
}
	
.nav-bar-buttons {
	position: relative;
	color: white;
	border-style:	solid;
	border-width:	5px;
	border-radius: 25px;
	padding: 2px 16px 2px 16px;
	text-align: center;
	border-color: white;
	font-size: 20px;
	font-weight: 900;
	font-family: PT Sans , sans-serif;
	margin: 5px 25px 0px 0px;
	animation-name: nav-bar-hover-out;
	animation-duration: 0.5s;
	animation-fill-mode: forwards; 
	text-decoration: none;
	
}



.axolotl-paragraph{
	grid-area: top-showcase;
	display: flex;
	height:65vh;
	width:100%;
	background-color: rgb(227, 223, 240,0.75);
	margin-right: 0;
	justify-items: start;
}

.axolotl-paragraph .borderline-left{
	height: 1rem%;
	width: 20%;
	background-color: rgba(255, 204, 220,1);	
}
.axolotl-paragraph .axolotl-p{
	align-items: start;
	height: 100%;
	width: 80%;
	background-image: linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.25)), url(../img/axolotl-p.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding: 1.5rem;
}
@font-face{
	font-family: nunsans-reg;
	src: url("/font/nunitosans/NunitoSans-Regular.ttf") format('truetype')	;
}
.axolotl-p p, .axolotl-p h1{
	color: white;
	font-family: sans-serif;
	margin-left: 5%;
}


.axolotl-p h1{
	margin-top: 3%;
	font-size: 5rem;
	padding-bottom: none;
	color:  rgba(255, 204, 220,1);
}
.axolotl-p p{
	margin-top: -5.5%;
	font-size: 1.5rem;
	color:  rgba(255, 204, 220,1);
	padding-right: 2.5%;
}

.axolotl-p p strong{
	font-size: 1.75rem;
}
.axolotl-p p a{
	text-decoration: none;
	color: cyan;
}
.axolotl-p p a:hover{
	text-decoration: underline;
	font-size: 1.8rem;	
}
.axolotl-p a {
	text-decoration: none;
}
@keyframes read-more-hover-in{
	0% {}
	100% {border-color: white; background-color: white; color: black; margin-left: 55.5%;}
}

@keyframes read-more-hover-out{
	0% {border-color: white; background-color: white; color: black; margin-left: 55.5%;}
	100% {border-color: white; background-color: black; color: white; margin-left: 50.5%;}
}
.axolotl-p .read-more{
	background-color: black;
	width: 40%;
	height: 10%;
	padding: 1.5% 0 1.5% 3.5%;
	margin-left: 50.5%;
	border-style :	solid;
	font-size: 175%;
	margin-top : 15%;
	justify-items: center;
	
	animation-name: read-more-hover-out;
	animation-duration: 0.5s;
	animation-fill-mode: forwards; 
}

.axolotl-p a p:hover{
	animation-name: read-more-hover-in;
	animation-duration: 0.5s;
	animation-fill-mode: forwards; 
}

.animal-1{
	grid-area: animal-1;
	display: flex;
	background-color: white;
	height: 100%;
	width: 160%;
}
.borderline-left{
	width:	23%;
	height: 100%;
}
.ferretbdl{
	background-color: rgb(227, 227, 227);
}
.glaucusbdl{
	background-color: rgb(65, 128, 191);
}
.animal-1 .ferret-p{
	height: 100%;
	width: 77%;
	background-image: linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.25)), url(../img/ferret.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.animal-1 .ferret-p h1{
	color: rgb(227, 227, 227);
	font-family: sans-serif;
	margin-left: 5%;
}

.animal-2{
	display: flex;
	grid-area: animal-2;
	background-color: white;
	height: 100%;
	width: 160%;
}

.animal-2 .glaucus-p{
	height: 100%;
	width: 77%;
	background-image: linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.25)), url(../img/glaucus.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.animal-2 .glaucus-p h1{
	color: rgb(108, 160, 212);
	font-family: sans-serif;
	margin-left: 5%;
}

/*	Image Section	*/
.axolotl-img{	
	border-style: solid;
	border-color: rgb(255, 204, 220);
	border-width: 15px;
	border-radius: 5px;
}

.img1{
 height: 350px;
}

.checkbtn{
	font-size: 35px;
	color: white;
}

.check{
		display: none;
}
@media (max-width: 1180px){
	.search-box{
		width: 23.5vw;
	}

}


.checkbtn{
	display: none;
}
@media (min-width: 900px){
	@keyframes nav-bar-hover-in{
		0% {}
		100% { background-color: white; color: black;}
	}

	@keyframes nav-bar-hover-out{
		0% { background-color: white; color: black;}
		100% { background-color: rgba(0,0,0,0); color: white;}
	}
}
@media only screen and (max-width: 900px){
	@keyframes nav-bar-hover-in{
		0% {color: white;}
		100% { color: rgb(106, 252, 204);}
}

@keyframes nav-bar-hover-out{
		0% { color: rgb(106, 252, 204);}
		100% { color: white;}
}
	.nav-bar{
	position: fixed;
	top: 0px;
	width: 100%;
	height: 10vh;
	background-color: rgb(242, 216, 227);
	}
	
	.nav-bar ul{
	position: fixed;
	width: 100%;
	height: 100vh;
	background: rgb(255, 166, 172);
	top: 10vh;
	left: -100%;
	}
	.nav-bar ul li{
		display: block;
		text-align: center;
	}
	
	#active {
		background: none !important;
		color:rgb(106, 252, 204) !important;
	}

	.nav-bar-buttons {
		border-radius: 0;
		border: none;
		font-size: 25px;
	}
	
	#search-label{
		margin-left: 25px;
		float: left;

	}
	
	.search-box{
		width: 45vw;
	}
	
	.checkbtn{
		display:inline-block;
		line-height: 7rem;
		float: right;
		margin-right: 25px;
	}
	
	.check:checked ~ ul{
		left: 0;
	}

}


	
/*Other Shid Idk*/