::-webkit-scrollbar {
	width:10px;
}

::-webkit-scrollbar-track {
	background:#d1d1d1; 
}

::-webkit-scrollbar-track:hover {
	background:#c7c7c7; 
}
 
::-webkit-scrollbar-thumb {
	background-image:linear-gradient(315deg, #fff647, #f17b16);
	border:1px solid #800000;
}

::-webkit-scrollbar-thumb:hover {
	background-image:linear-gradient(315deg, #f39d38, #d04803);
}

@font-face {
	font-family: depixel;
	src: url("fonts/depixelbreit.otf");
}

@font-face {
	font-family: orbitron;
	src: url("fonts/orbitron.ttf");
}

@font-face {
	font-family: prompt;
	src: url("fonts/prompt.ttf");
}

::-moz-selection { /* Code for Firefox */
	color:black;
	background:#FFF647;
}

::selection {
	color:black;
	background:#FFF647;
}

html 
{
	font-family: prompt;
	font-style: normal;
	height:100%;	
}

body
{
	background-image:url('images/ccoinoutlinesmall1.png');
	background-attachment:fixed;
	background-color:#fafbfc;
	position:relative;
	min-height:100vh;
	margin:0; padding:0;
}

a
{	
	color:#fafbfc; 
	text-decoration:none;
}

#nav-container
{
	top:0; right:10%;
	position:absolute; 
	width:80%; height:100%;
}

#nav
{
	display:flex;
	flex-direction:row;
	justify-content:flex-end;
	align-items:center;
	margin-left:0;
	width:100%; height:100%;
}

.nav-link
{
	font-size:1.2rem;
	transition:0.3s ease;
	color:#fafbfc;
	margin-left:6%;
	letter-spacing:3px;
	font-weight:bold;
}


.checkbtn
{
	display: block;
}

#burger ul
{
	position:fixed;
	width:100%;
	height:100vh;
	background-image:linear-gradient(to left, #ffbb3d, #8a2ebd 65%); 
	top:75px; left:100%;
	text-align:center;
	transition:0.3s ease;
	z-index:99999999;
	margin:0;
}

#burger ul li
{
	display:block;
	margin:50px 0;
	margin-right:50%;
	line-height:1.5;
}

#check
{
	display:none;
}

#check:checked ~ ul
{
	left: 0;
}

.checkbtn
{
	position:absolute;
	top:28%; right:7%;
	font-size:2rem;
	z-index:999999999;
	color:#fafbfc;
}

#burger ul li a
{
	font-family:prompt;
	font-size:2rem;
	letter-spacing:2.5px;
}

#header
{	
	background-image:linear-gradient(to right, #8a2ebd 35%, #ffbb3d);
	position:fixed; 
	top:0; left:0; 
	width:100%; height:5rem;
	margin:0;
	z-index:999999;
}

#logo-container
{
	width:120px; 
	margin-left:10%; margin-top:5px; 
	height:132px;
	z-index:9999999999;
	position:fixed;
}

#logo
{
	width:100%; 
	margin:auto;
}

#logo-flare
{
	width:120px; 
	margin:auto; 
	position:fixed;
	opacity:0%;
	transition:0.5s ease;
	top:5px;
}

#logo-text
{
	display:none;
	position:fixed;
	top:2.7%;
	height:60px;
}

#blog-link
{
	font-family:orbitron;
	display:none;
}

#content-wrap
{
	width:100%; min-height:100vh;
	padding-top:5rem;
	padding-bottom:38rem;
}

footer
{
	background-image:linear-gradient(315deg, #ffbb3d, #8a2ebd 65%);
	position:absolute; 
	bottom:0; left:0;
	width:100%; height:31rem;
	color:#fafcfb;
}

#footer-content-container
{
	width:calc(80% + 15px); height:15rem; 
	padding-top:4rem;
	margin:auto; 
	position:relative;
}

#footer-links
{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	flex-wrap:wrap;
	font-family:prompt;
	font-size:1.1rem; 
	letter-spacing:2.5px;
	height:16rem; 
	margin-top:2rem;
	padding-right:50%;
}

.footer-link-column
{
	display:flex; 
	flex-direction:column; 
	justify-content:space-around;
}

.footer-link-container
{
	padding-top:6%;
}

.footer-link
{
	transition:0.3s ease;
}


#social-media
{
	position:absolute;
	top:13%; right:0%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	width:27%; height:50%;
	margin-top:1%;
}

svg
{
	fill:#fafbfc;
	transition:0.3s ease;
	display:inline-block;
}

#footer-divider
{
	opacity:0.3;
	margin-top:2rem; margin-bottom:2rem;
}

#copyright
{
	font-family:prompt; 
	font-size:0.9rem; 
	color:#fafbfc;
	letter-spacing:2.5px;
	margin-left:1%;
	text-align:center;
	opacity:0.8;
	color:#FFF647;
}
			
@media screen and (min-width:1024px) {

	#burger
	{
		display:none;
	}

	#logo-container:hover #logo-flare
	{
		opacity:100%;
	}

	.nav-link:hover
	{	
		color:#FFF647;
	}
	
	.footer-link:hover
	{
		color:#FFF647;
	}

	svg:hover
	{
		fill:#FFF647;
	}
	
}

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

	#header
	{
		background-image:linear-gradient(to left, #ffbb3d, #8a2ebd 65%); 
	}

	#logo-container
	{
		margin-left:5%;
	}

	#logo
	{
		display:none;
	}
	
	#logo-flare
	{
		width:60px;
		top:1%;
		opacity:100%;
	}
	
	#logo-text
	{
		margin-left:65px;
		display:block;
	}

	#nav-container
	{
		display:none;
	}
	
	footer
	{
		height:32.5rem;
	}

	.footer-link-container
	{
		padding-top:14%;
	}

	.social-media-icon
	{
		margin-top:20%;
	}

}