/*
	:root {
	--text: darkslategray;
	--line: darkseagreen;
	--accent: cadetblue;
	--bg: lightgrey;
	--fill: whitesmoke;
	}
	#a4ca92 green
	#D6E4CF light green
	#6e935c dark green
	rebeccapurple
	 */


body { 
	color: #a4ca92;
	font-family: tamzen, monospace;
	cursor: crosshair;
	background-color: black;
	font-size: 18px;
}

/* fonts */
@font-face {
	font-family: "tamzen"; 
	src: url("fonts/Tamzen10x20b.ttf") format("truetype");
}
@font-face {
	font-family: "gothic-byte"; 
	src: url("fonts/GothicByte.ttf") format("truetype");
}
@font-face {
	font-family: "arcade"; 
	src: url("fonts/arcade.ttf") format("truetype");
}

/* selection highlight */
::-moz-selection { /* Code for Firefox */
  color: #d6e4cf;
  background: rebeccapurple;
}
::selection {
  color: #d6e4cf;
  background: rebeccapurple;
}

* { 
	margin: 0;
	padding: 0;
	scrollbar-color: #000 #000;
	scrollbar-gutter: #000;
	::-webkit-scrollbar { width: 10px; }
	::-webkit-scrollbar-track { background: #000; }
	::-webkit-scrollbar-thumb { background-color: #000; border: transparent; }
	::-webkit-scrollbar-thumb:hover {background: #000; }
}

img { max-width: 100% }

iframe {
	border: none;
	height: 100%;
	width: 100%;
}

nav {
	float: left;
	width: 14rem;
	height: 100vh;
	position: relative;
	background-color: black;
	margin-right: 1.6rem;
}

nav div {
	height: fit-content;
	width: fit-content;
	position: absolute;
	top: 350px; /* this is the height for nav */
	left: 2rem;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: left;
}

nav a {
	display: block;
	padding: 6px 6px;
	font-size: 1em;
	text-decoration: none;
	color: #a4ca92;
}


main {
	width: 75%;
	height: 100vh;
	padding: 2em;
	overflow-y: scroll;
	background-color: black;
}

main a:hover {
	background-color: #a4ca92;
	color: #000;
}

.container { 
	max-width: 1500px 
}

.stripe {
	float: left;
	width: 2px;
	height: 100%;
	background-color: #a4ca92;
	position: fixed;
}

section {
	margin: 2em;
	background-color: black;
}

side {
	height: 150px;
	width: 150px;
	font-size: 14px;
	overflow-y: scroll;
	border: solid 1px #D6E4CF;
	line-height: .75rem;
	z-index: 99;
}

header {
 	color: #a4ca92;
 	margin-left: 2rem;
 	font-size: 18px;
}

/* text and headers */
h1, h2, h3, h4, h5, h6 {
	line-height: 1em;
}
h2 {
	color: #6e935c;
	font-family: "arcade";
	text-decoration: underline;
}
h3, h6{
	color: #d6e4cf;
}
h4 {
	text-decoration: underline;
}
h6 { font-size: 1em; }
h5 { font-size: 1.25em; }
h4 { font-size: 1.5em; }
h3 { font-size: 2em; }
h2 { font-size: 2.25em; }
h1 { font-size: 2.75em;}

a {
	color: rebeccapurple;
}

p {
  padding-bottom: 1rem;
}

.hover:hover { 
	background-color: #a4ca92;
	color: #000;
 }
 
mark {
	background-color: #d6e4cf;
	color: rebeccapurple;
}

ul {
	list-style: square;
}
li {
	line-height: .75rem;
}

details {
	border: none;
	font-style: italic;
}
summary {
	color: #a4ca92;
}

ul, ol, dl {
	margin: 1rem 0 1rem 2rem;
}

ul ul, ol ol { 
	margin: 0 0 0 2rem;
}

p, table,  ul, ol, dl {
	font-size: 1rem;
}


/* breaks */
hr {
	border: none;
	border-top: 1px dashed;
	padding: 2px;
	margin-bottom: 4px;
	margin-top: 4px;
}
hr.break {
	border: solid 3px;
}


.gothic {
	font-family: gothic-byte, monospace;
	font-size: 36px;
	color: rebeccapurple;
	letter-spacing: 4px;
	margin-bottom: 10px;
}

.title {
	font-family: arcade; 
	font-size: 6rem; 
	margin: 0;
	font-family: arcade; 
}


/* sliding highlight */
.basic-1 {
	border-left: 1px solid #a4ca92;
  background: 
      linear-gradient(#a4ca92 0 0) 
      0 100% /var(--d, 0) 30px 
    no-repeat;
  transition:0.3s;
}
.basic-1:hover {
  --d: 100%;
  color: #000;
}



.flex-box {
    display:flex;
    flex-wrap:wrap;
    margin: -1em;
	align-items: flex-start;
}

.flex-box section {
	margin: 1em;
	}

.full { flex: 1 1 100%;}
.half { flex: 1 1 calc(50% - 2em); }
.third { flex: 1 1 calc(33% - 2em); }
.twothird { flex: 1 1 calc(66% - 2em); }
.quarter { flex: 1 1 calc(25% - 2em); }
.threequarter { flex: 1 1 calc(75% - 2em); }


/* effects */

/* crt */
.crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  background: fill;
  pointer-events: none;
}

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

	nav, main {
		float: none;
		width: 100%;
		height: fit-content;
	}
	
	nav { padding: 2vw }
	
	nav div {
		height: fit-content;
		width: 100%;
		position: static;
		-ms-transform: translateY(0);
		transform: translateY(0);
		text-align: left;
	}
	
	nav img {
		z-index: -1;
		position: absolute;
		left:0;
		max-height: 100%;
	}
	
	nav a {
		display: inline-block;
		margin: 5px;
	}
	
	main { 
		overflow: auto;
		padding: 2em 1em;
	}
	
	header { 
		text-align: right;
		font-size: 1.5em;
	}
	
	section { padding: 0 1em; }
	
	.stripe { display: none;}

	.ticker-wrap, .ticker, .ticker_item {
		display: none;
	}

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