html, body {
	height: 99%;
}

body {
	display: flex;
  	flex-direction: column;
	width: 99%;
	background-color: black;
	font-family: 'Play', sans-serif;
	font-size: 1.2vw;
	color: #39ff14;
}

a { text-decoration: none; color: #4666ff; }
a:hover { text-decoration: none; color: #f535aa; }
a:active { text-decoration: none; color: #4666ff; }
a:visited { text-decoration: none; color: #4666ff; }

h1 {
	font-size: 2vw;
}

h2 {
	font-size: 1.7vw;
}

h3 {
	font-size: 1.4vw;
}

#top_content {
	flex: 1 0 auto;
}

.note_text {
	font-size: 1vw;
}

.in_para_lead {
	color: #f535aa;
	font-size: 1.3vw;
	padding-right: 20px;
}

#title {
	margin-top: 40px;
	margin-bottom: 40px;
	text-align: center;
}

#intro_top { width: 100%; }

#intro_content {
	display: table;
	font-size: 1.5vw;
	margin: 0 auto;
}

#as_title {
	font-family: 'Chakra Petch', sans-serif;
	font-size: 3vw;
	font-weight: 600;
}

#main {
	margin-top: 30px;
	width: 100%;
}

#main_content {
	width: 80%;
	margin: 0 auto;
}

#appendix_a {
	margin-top: 30px;
	width: 100%;
}

#appendix_b {
	margin-top: 30px;
	width: 100%;
}


#appendix_a_content {
	width: 80%;
	margin: 0 auto;
}

.appendix_content {
	width: 80%;
	margin: 0 auto;
}
   

#source_code_1 {
	height: 500px;
}

#source_code_2 {
	height: 500px;
}

.source_code {
	height: 500px;
}

footer {
	flex-shrink: 0;
}

#footer_content {
	font-size: 1vw;
	text-align: center;
}
#results {
	text-align: center;
}
#results img {
	border: 1px solid #39ff14;
	border-radius: 4px;
	padding: 5px;
	width: 75%;
	}

#results img:hover {
 	box-shadow: 0 0 2px 1px rgba(245, 53, 170, 0.9);
}

.neonpink { color: #f535aa; }
.neongreen { color: #39ff14; } 
.neonred { color: #ff073a; }
.neonblue { color: #4666ff; }
.neonpurple { color: #b026ff; }
.lightgrey { color: #b3b3b3; }

@media screen and (max-width: 1000px) {
	body { font-size: 2vw; }
	#as_title { font-size: 4vw; }
}

@media screen and (max-width: 800px) {
	body { font-size: 2.5vw; }
	#title { margin-top: 30px; margin-bottom: 30px; }
	#as_title { font-size: 4.5vw; }
	#main_content { width: 85% }
}

@media screen and (max-width: 580px) {
	body { font-size: 3vw; }
	h1 { font-size: 4vw; }
	h2 { font-size: 3.7vw; }
	h3 { font-size: 3.5vw; }
	#intro_content { font-size: 3vw; }
	.in_para_lead { font-size: 3.2vw; }
	#title { margin-top: 25px; margin-bottom: 25px; }
	#as_title { font-size: 5vw; }
	#main_content { width: 85% }
	#footer_content { font-size: 2.7vw; }
}