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: 13%; }
		.about h2 { text-align: center; }
		.about p { text-indent: 10px; }
		.about h3 { text-indent: -10px; font-size: 12px; }
		
	.chatbox { width: 25%; margin-left: -230px; margin-top: 600px; position: relative; z-index: 1;}
		
	#gallery { display: flex; flex-wrap: wrap; padding: 0 4px; }
		.gallery-col {   flex: 30%; max-width: 35%; padding: 0 4px;}
		.gallery-card img { margin-top: 8px; vertical-align: middle; width: 100%; }
		.gallery-card-date { color: #c2c2c2; font-size: 10px; text-indent: 10px;}

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; }
} 


/* dropdowns */

.droplinks-fandom { transition: height 1s; height: 0px; overflow:hidden;}
.droplinks-original { transition: height 1s; height: 0px; overflow:hidden;}
.droplinks-comics { transition: height 1s; height: 0px; overflow:hidden;}

#fandom{ display:none; }
#original{ display:none; }
#comics { display:none; }

#fandom:checked ~ .droplinks-fandom { display: block; height: 50px;}
#original:checked ~ .droplinks-original { display: block; height: 50px;}
#comics:checked ~ .droplinks-comics { display: block; height: 50px;}

/* 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; }

/* padding */ 

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

/* borders */ 

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