/* Variables */
:root {
	--white: #C4C4C4;
	--black: #000000;
	--warning: red;
}

@font-face {
  font-family: Tomorrow;
  src: url(tomorrow.ttf);
}

@font-face {
  font-family: Neomatrix;
  src: url(neomatrix.ttf);
}
/* --- --- --- */

/* Elements */
body {
	background-color: var(--black);
	padding: 25px;
}

h1 {
	color: var(--white);
	font-family: Tomorrow;
}

h2 {	
	color: var(--white);
	font-family: Tomorrow;
	border-bottom: 3px solid;
}

h3 {
	color: var(--white);
	font-family: Tomorrow;
}

p {
	color: var(--white);
	font-family: Neomatrix;
}

b {
	color: var(--white);
	font-family: "Neomatrix";
}

a {
	color: var(--white);
	font-family: "Neomatrix";
}
/* --- --- --- */

/* Other */
.font-main {
	color: var(--white);
	font-family: Neomatrix;
}

.font-title {
	color: var(--white);
	font-family: Tomorrow;
}

.font-header {
	color: var(--white);
	font-family: Tomorrow;
}

.outline {
	color: var(--white);

	border-style: solid;
	border-color: var(--white);
			
	padding: 10px;
}

.warning-text {
	color: var(--red);
}

.warning-box {
	outline: 2px solid var(--red);
	padding: 10px;
}
/* --- --- --- */

/* Enter At Your Own Risk */
.stripes {
	background-image: linear-gradient(45deg, rgb(20, 20, 20) 25%, #ffffff 25%, #ffffff 50%, rgb(20, 20, 20) 50%, rgb(20, 20, 20) 75%, #ffffff 75%, #ffffff 100%);
	background-size: 56.57px 56.57px;
	animation-name: pan;
}


@media screen and (max-width: 900px) {
	.sidebar {
		border-style: solid;
		border-color: #c8c8c8;
		color: #c8c8c8;

		width: 100%;
		float: center;
		
		margin-bottom: 25px;
	}
	
	.content {
		border-style: solid;
		border-color: #c8c8c8;
			
		color: #c8c8c8;
		
		float: center; 
		width: 100%; 
	}
}

@media screen and (min-width: 900px) {
	.sidebar {
		border-style: solid;
		border-color: #c8c8c8;
		color: #c8c8c8;
	
		position: absolute; 
		right: 35px; 
		width: 300px;
	}
	
	.content {
		border-style: solid;
		border-color: #c8c8c8;
			
		padding: 10px;
		color: #c8c8c8;
		
		float: center; 
		margin-right: 325px;
	}
}
/* --- --- --- */