html { margin: 0px; padding: 0px; background: url('https://cdn.discordapp.com/attachments/385553219302195200/1019040842746429501/unknown.png'); width: 100%; overflow-x:hidden;}

.container { margin-top: 100px; margin-left: auto; margin-right: auto; width: 90%; color: #fff; font-size: 12px; max-width: 1800px; }
.wrapper{ padding: 10px; }

/* sections */ 

header { box-sizing: border-box; float: left; width: 100%; text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18; position: absolute; z-index:9; margin-top: -100px; }
	header h1 { animation-name:glow; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; transform: rotate(-3deg); }

section {  box-sizing: border-box;  float: left; background: #000;  border-radius: 10px; margin: 10px; box-shadow: 1px 1px 5px #32CD32; z-index: 3; position: relative; animation-name:boxglow; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function:linear; }

	.about { width: 15%; }
		.about h2 { text-align: center; }
		.about p { text-indent: 10px; }
		.about h3 { text-indent: -10px; font-size: 12px; }
		
	#gallery { display: flex; flex-wrap: wrap; padding: 0 4px; }
		.character-card { margin-top: 8px; vertical-align: middle; width: 20%; margin: 5px; height: 210px; transition: 1s; min-width: 200px; }
		.character-card:hover { transform:scale(1.1); margin: 10px; }
		.character-card-abt { margin-bottom: 20px; }
		.character-card-name { font-size: 90%; }
		.character-card-info { font-size: 70%; margin-top: -10px; color:#959595; }
		.character-card-image {  height: 100%;  } 
		p { }

nav { box-sizing: border-box; float: left; width: 100px; margin-top: 20px; z-index: 1; margin-left: -50px; display: flex; flex-direction: column; }


/* animations */


.bounce { animation-name:bounce; animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: linear; }

@keyframes bounce { 
	0% { transform: translateY(0px); }
	50% { transform: translateY(15px); } 
} 

@keyframes glow { 
	0% { text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18; }
	50% { text-shadow: 0 0 3px #FFF, 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #49ff18, 0 0 20px #49FF18, 0 0 20px #49FF18, 0 0 20px #49FF18, 0 0 20px #49ff18; } 
	100% { text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18; }
} 


@keyframes fadein {
	0% { opacity: 0%; }
	100% { opacity: 100%; }
	
	
}




/* images */ 
#icon { max-width: 60%; margin-left: 20%; border-radius: 10px; box-shadow: 2px 2px 5px #32CD32; transition: 1s;}
	#icon:hover { animation-name:shake; animation-duration: 1s; transform: rotate(-2deg) }

/* font importing */ 

@font-face {
  font-family: teutonic;
  src: url('../../../css/fonts/teutonic3.ttf');
}

@font-face {
  font-family: wendell;
  src: url('../../../css/fonts/wendell.ttf');
}

/* text formatting */ 

h1 { color: #32CD32; font-family: teutonic; font-size: 40px;}
h2 { font-family: teutonic; }
h3 { margin-left: 20px; padding: 0px; margin-bottom: 0px; color: #959595; }

	a { color: #fff; text-decoration: none; transition: 1s;}
	a:hover { color:  #32CD32; text-decoration: underline; }
	
/* buttons */ 

.button { width: 200px; color: #fff; text-align:left; transition: 1s; background: #000; padding: 10px; border-radius: 10px; margin: 10px; }
.button:hover { transform: translateX(-20px); color: #fff; text-decoration: none; box-shadow: 1px 1px 10px #32CD32;}
.first { background: #32CD32;}
.second { background: #28a428;}
.third { background: #1e7b1e;}
.fourth{ background:#145214;} 
.fifth { background:#0a290a; }

/* rows and columns */
.row { display: flex; }
.left { flex: 40%; margin: 5px; overflow: hidden; }

.character-card img {
	position:absolute;
	left: 10px;
	width: 35%;
	max-height: 180px;
	max-width: 80px;

	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

.character-card:hover img.top {
  opacity:0;
}

	#bailey { background: url('../../../images/bailey_bg.png'); background-position:center; background-size: cover; }
	#citrus { background: url('../../../images/cala_bg.png'); background-position:center; background-size: cover;  }
	#raspberries { background: url('../../../images/raspberry_bg.png'); background-position:center; background-size: cover;  }
	#giacomo { background: url('../../../images/gio_bg.png'); background-position:center; background-size: cover;  }
	#rigatello { background: url('../../../images/riga_bg.png'); background-position:center;  }
	#kushen { background: url('../../../images/kushen_bg.png'); background-position:center; background-size: cover; }
	#auburn { background: url('../../../images/auburn_bg.png'); background-position:center; background-size: cover;  }
	#aardie { background: url('../../../images/ardie_bg.png'); background-position:center; background-size: cover;  }
	#bailey-hover { background: url('../../../images/bailey_bg_fadein.png'); background-position:center; background-size: cover; transition: 1s; }
	#citrus-hover { background: url('../../../images/cala_bg_fadein.png'); background-position:center; background-size: cover; transition: 1s; }
	#raspberries-hover { background: url('../../../images/raspberry_bg_fadein.png'); background-position:center; background-size: cover; transition: 1s; }
	#giacomo-hover { background: url('../../../images/gio_bg_fadein.png'); background-position:center; background-size: cover; transition: 1s; }
	#rigatello-hover { background: url('../../../images/riga_bg_fadein.png'); background-position:center; transition: 1s;  }
	#kushen-hover { background: url('../../../images/kushen_bg_fadein.png'); background-position:center; background-size: cover; transition: 1s; }
	#auburn-hover { background: url('../../../images/auburn_bg_fadein.png'); background-position:center; background-size: cover; transition: 1s;  }
	#aardie-hover { background: url('../../../images/ardie_bg_fadein.png'); background-position:center; background-size: cover; transition: 1s; }
	
	.character-card:hover #bailey-hover { opacity: 1; }
	.character-card:hover #citrus-hover { opacity: 1; }
	.character-card:hover #raspberries-hover { opacity: 1; }
	.character-card:hover #giacomo-hover { opacity: 1;  }
	.character-card:hover #rigatello-hover { opacity: 1;   }
	.character-card:hover #kushen-hover {opacity: 1; }
	.character-card:hover #auburn-hover { opacity: 1;   }
	.character-card:hover #aardie-hover { opacity: 1; }
	
.right { flex: 60%; margin: 5px; }

/* padding */ 

.p-1 { padding: 10px; }
.p-2 { padding:  20px; }
.p-3 { padding: 30px; }

/* borders */ 

.border { border: 1px solid #32CD32; }
.border-radius { border-radius: 10px; }