@import url('../assets/font.css');

html {
	--dark-main: #1e1e1e;
	--main: #2e2e2e;
	--seconday: #FF6600;
	--dark-secondary: #cc5200;
	--light-white: #e0e0e0;
}

/* Banner*/ 
#banner {
	background-color: #1e1e1e;
	color: white;
	position: absolute;
	margin: 0;
	top: 54px;
	right: 0;
	left: 0;
	text-align: center;
	z-index: 999;
	padding: 6px;
	box-shadow: 1px -1px 71px 7px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px -1px 71px 7px rgba(0,0,0,0.4);
	-moz-box-shadow: 1px -1px 71px 7px rgba(0,0,0,0.4);


	background: linear-gradient(-60deg,#1e1e1e, #1e1e1e, #1e1e1e, #1e1e1e, #ff3300,#1e1e1e, #1e1e1e, #1e1e1e, #1e1e1e);
    background-size:400% 400%;
    text-shadow: none;
    transition: 0.3s all;
    animation: passing 2s ease-in-out infinite;
}

#banner a {
	color: white;
}

#legal {
	background-color: #1e1e1e;
	color: white;
	position: absolute;
	margin: 0;
	top: 54px;
	right: 0;
	left: 0;
	text-align: center;
	z-index: 999;
	padding: 6px;
	box-shadow: 1px -1px 71px 7px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px -1px 71px 7px rgba(0,0,0,0.4);
	-moz-box-shadow: 1px -1px 71px 7px rgba(0,0,0,0.4);

	background: linear-gradient(-60deg,#1e1e1e, #1e1e1e, #1e1e1e, #1e1e1e, #ff3300,#1e1e1e, #1e1e1e, #1e1e1e, #1e1e1e);
    background-size:400% 400%;
    text-shadow: none;
}

#legal a {
	color: white;
}


@media screen and (max-width: 860px){
	#banner {
		top: unset; 
		bottom: 0;
		position: fixed;
	}
}

@keyframes passing {
	0%{background-position:0 50%}
	50%{
		background-position:100% 50%;
		box-shadow: 1px -1px 71px 7px #ff3300;
		-webkit-box-shadow: 1px -1px 71px 7px #ff3300;
		-moz-box-shadow: 1px -1px 71px 7px #ff3300;
	}
	to{background-position:0 50%}
}

/*BODY*/
body{
	background-color: var(--main);
	margin: 0px;
	margin-bottom: -142px; 
	font-family: Armata;
}

/*////////////////////////////////
////////////////////////////////
////////////////////////////////
LOADER
////////////////////////////////
////////////////////////////////
////////////////////////////////*/

.loading {
	animation: loading 2s infinite ease-in-out;
}

.loaded {
	animation: finished 3s ease-in-out;
}

@keyframes finished {
	30% {
		opacity: 1;
		cursor: pointer !important;
	}
	50% {
		background-size: 2000vw;
		cursor: pointer !important;
	}
	60% {
		opacity: 0;
		cursor: pointer !important;
	}
	100% {
		opacity: 0;
		cursor: pointer !important;
	}
}

@keyframes loading {
	0% {
		background-size: 20vw
  	}
	50% {
	  	background-size: 40vw
	}
	100% {
		background-size: 20vw;
	}
  }

/* END LOADER */

/*////////////////////////////////
////////////////////////////////
////////////////////////////////
NAVIGATION BAR 
////////////////////////////////
////////////////////////////////
////////////////////////////////*/

header{
	background-color: var(--dark-main);
	padding: 0;
	margin-top: 0;
	top: 0;
	position: fixed;
	z-index: 999;
	width: 100%;
	display: flex;
  	flex-flow: row nowrap;
	  box-shadow: 5px 2px 4px #2d2d2d, 5px 3px 6px #2d2d2d;
}

header *{
	vertical-align: middle;
	display: inline-block;
}

header h1{
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	outline: none;
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	align-items: center;
}

input.nav-toggle {
	display: none;
}

header a.no-decoration h1.nav-text img.nav-logo {
	width: 48px;
	height: 48px;
	vertical-align: middle;
	margin-right: 1vw;
}

header a.no-decoration h1.nav-text {
	color: white;
	
	margin-top: 0;
}

header a.no-decoration {
	text-decoration: none;
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

nav{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	outline: none;
	display: flex ;
	flex-flow: row wrap;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	/*
	padding: 0;
	margin: 0;
	display: flex; 
	flex-flow: row nowrap;
	justify-content: space-between !important; 
	align-items: center;
	*/
}

nav ul{
	margin-left: 0;
	
	overflow: hidden;
	flex-direction: row;
    flex-wrap: wrap;
}

nav ul li a {
	text-decoration: none;
	color: var(--light-white);
	font-size: 1em;
	margin-left: 1em;
	/* padding: auto;
	margin-left: 1em; */
	
}

nav ul li a:hover{
	color: white;
	text-shadow: 0.5px 0.5px 0px white;
}
/*
nav a::before {
	content: '';
	display: block;
	height: 5px;
	background: #FF6600;
	border-radius: 3px;
	position: absolute;
	top: -.75em;
	left: 0;
	right: 0;
	transform: scale(0, 1);
	transition: transform ease-in-out 250ms;
} 
  
nav a:hover::before {
	transform: scale(1,1);
}
*/
#donate /* a */{
	color: #ff6600 !important;
	font-size: 1.1em;
	font-weight: bold !important;
	animation: BackgroundGradient 30s ease infinite;
}

#donate:hover {
	text-shadow: 0.5px 0.5px 0px #ff6600;
}

@keyframes BackgroundGradient {
	0%{background-position: 0% 50%;}
	50%{background-position: 100% 50%;}
	100%{background-position: 0% 100%;}
}


a#nav-home {
	margin-left: 0 ;
}

div.invites {
	text-align: right;
	/* display: flex;
	flex-flow: row wrap;  */
}

li.nav-special {
	text-align: right;
}

li.nav-special a{
	text-decoration: none;
	padding: 10px;
}

h1.nav-inv {
	color: white;
	text-shadow: none;
	transition: 0.3s all;
	letter-spacing: -2px;
	animation: passing 2s ease-in-out infinite;
}
h1.nav-inv:hover{
	color: #ff6600;
	text-shadow: 0.5px 0.5px 0px #ff6600;
	transition: all 0.3s;
}


h1.nav-inv img{
	margin-right: 1vw;
}

@keyframes passing {0%{background-position:100% 50%}to{background-position:0 50%}}

img.discord-icon{
	width: 30px;
	height: 30px;
}





/*////////////////////////////////
////////////////////////////////
MOBILE NAVIGATION BAR 
////////////////////////////////
////////////////////////////////*/

@media screen and (max-width: 860px){

	header a.no-decoration h1{
		margin-left: 100px;
		margin-right: 0;
	}

	nav {
		position: absolute;
		text-align: left;
		background: var(--dark-main);
		width: 100%;
		top: 100%;
		transform: scale(1, 0);
		transform-origin: top;
		transition: transform 400ms ease-in-out;
		flex-flow: column wrap;
		align-items: flex-start !important;
		justify-content: left;
	}

	nav a {
		color: var(--light-white);
		text-decoration: none;
		font-size: 1.2rem;
		opacity: 0;
		transition: opacity 150ms ease-in-out;
	  }


	nav ul{
		text-align: left !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 0 !important;
		margin-top: 10px !important;
		padding: 0 !important;
		list-style: none !important;
		display: block !important;
	}

	nav ul {
		text-align: left;
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: column;
	}

	nav ul *{
		display: flex;
		flex-direction: column;
		margin-left: 8px !important;
	}
	  
	nav ul li {
		margin-bottom: 1em;
		margin-left: 1em;
	}

	/* nav ul li a {
		color: var(--light-white) !important;
		text-decoration: none !important;
		font-size: 1.2rem !important;
		opacity: 0 !important;
		transition: opacity 150ms ease-in-out !important;
	} */

	nav div.invites{
		display: flex;
		flex-flow: row wrap;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}

	nav div.invites *{
		margin-left: 0 !important;
	}

	header > a {
		text-align: center !important;
		margin: auto !important;
	}

	header > a > h1 {
		text-align: center !important;
		margin: auto !important;
	}




	.nav-toggle {
		position: absolute !important;
		top: -9999px !important;
		left: -9999px !important;
	}

	.nav-toggle:focus ~ .nav-toggle-label {
		outline: 3px solid rgba(rgb(252, 134, 0), .75);
	}
	  
	.nav-toggle-label {
		position: absolute;
		top: 0;
		left: 0;
		margin-left: 1em;
		height: 100%;
		display: flex;
		align-items: center;
	}
	  
	.nav-toggle-label span,
	.nav-toggle-label span::before,
	.nav-toggle-label span::after {
		display: block;
		background: white;
		height: 2px;
		width: 2em;
		border-radius: 2px;
		position: relative;
	}
	  
	.nav-toggle-label span::before,
	.nav-toggle-label span::after {
		content: '';
		position: absolute;
	}
	  
	.nav-toggle-label span::before {
		bottom: 7px;
	}
	.nav-toggle-label span::after {
		top: 7px;
	}

	.nav-toggle:checked ~ nav {
		transform: scale(1,1);
	}
	  
	.nav-toggle:checked ~ nav a {
		opacity: 1;
		transition: opacity 250ms ease-in-out 250ms;
	}
}


	
footer {
	padding: 8vh 2vw;
	animation: bored 3s infinite ease-in-out;
	border-top: 5px outset #FF6600;
}

@keyframes bored {
    30% {
		border-top: 5px outset #ff0000;
    }
	70% {
		border-top: 5px outset #fffb00;
    }
}

footer, footer a{
	color: white;
}

#f-columns {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	justify-content: space-evenly;
}

.f-column {
	margin: 5vh 5vw;
	min-width: 190px;
}

.f-column a{
	text-decoration: none;
}

.f-column a:hover{
	text-decoration: underline;
}

.f-column ul {
	padding: 0;
}

.f-column li {
	list-style-type: none;
}

.end-info {
	text-align: center;
}