/* COLOR VARIABLES */
:root {
	--col1: #9D00FF;
	--col2: #0F0F0F;
	--col3: #DFDFDF;
	--col4: #7D00FF;
	--col5: #FF006E;
	--col6: #5BCEFA;
	--col7: #F5A9B8;
	--col8: #DFDFDF;
}

html {
	color: var(--col3);
	background-color: var(--col2);
	font-family: 'Josefin Sans', sans-serif;
	cursor: none;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

html, body {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
	overflow-y: hidden;
}

section {
	position: relative;
	margin-top: 10vh;
}

.landing {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	flex-direction: column;
	margin-top: 0;
}

#scroll_nav {
	position: fixed;
	width: 2em;
	height: 20em;
	display: flex;
	align-items: center;
	flex-direction: column;
	top: 50%;
	left: 1em;
	transform: translate(0, -50%);
	z-index: 30;
}

.scroll_bar {
	position: absolute;
	border: 1px solid var(--col1);
	width: 0;
	height: 20em;
	z-index: -100;
}

.scroll_circle {
	border-radius: 2em;
	position: absolute;
	top: -0.5em;
	width: 1em;
	height: 1em;
	border: 2px solid var(--col1);
	background-color: var(--col2);
}

#time {
	font-family: 'Roboto Mono', monospace;
	font-weight: bold;
	font-size: 1.5vw;
	display: inline-block;
}
#time_container {
	display: inline-flex;
	justify-content: left;
	align-items: center;
	overflow: hidden;
	position: absolute;
	top: 1em;
	left: 1em;
	right: 1em;
	overflow: visible;
}

#time_container div {
	display: inline-block;
	padding: 10px;
	margin: 0;
	text-decoration: none;
	color: var(--col3);
	font-family: 'Roboto Mono', monospace;
	cursor: none;
}

#time_container div:after {
	display: block;
	content: '';
	border-bottom: solid 3px var(--col1);
	transform: scaleX(0);
	transition: transform 250ms ease-in-out;
}

.text1 {
	text-shadow: var(--col4) 12px 10px;
	font-size: 10vw;
	max-width: 90%;
	padding-left: 20px;
	padding-right: 20px;
}

.wrap1 {
	overflow: hidden;
}

.text2 {
	font-family: 'Roboto Mono', monospace;
	color: var(--col1);
	padding-left: 40px;
}

.ml16{
  overflow: hidden;
}

.ml16 .letter {
  display: inline-block;
  line-height: 1em;
}

.text2 {
	width: fit-content;
	overflow: hidden;
	display: inline-block;
}

#bmac {
	margin-left: auto;
	font-family: 'Roboto Mono', monospace;
	text-decoration: none;
	color: var(--col3);
	cursor: none;
}

nav {
	display: inline-flex;
	flex-direction: column;
	text-align: right;
	position: fixed;
	right: 1.5em;
	overflow: hidden;
	border-right: 3px solid var(--col1);
}

nav a {
	display: inline-block;
	text-decoration: none;
	padding: 15px;
	color: var(--col3);
	font-size: 2vw;
	font-family: 'Roboto Mono', monospace;
	cursor: none;
	margin-left: auto;
	border-top-left-radius: 1em;
	border-bottom-left-radius: 1em;
	width: fit-content;
}

nav a:after {
	display: block;
	content: '';
	border-bottom: solid 3px var(--col1);
	transform: scaleX(0);
	transition: transform 250ms ease-in-out;
}

nav a:hover {
	background-color: #000000;
	color: var(--col1);
}

nav a:hover:after { transform: scaleX(0.75);}

.scroll, .mail {
	position: absolute;
	padding: 10px;
	margin: 1em;
	font-family: 'Roboto Mono', monospace;
}

.scroll {
	bottom: 0;
	right: 0;
}

.mail {
	text-align: left;
	bottom: 0;
	left: 2em;
}

.mail a {
	color: var(--col3);
}

.mail a:hover {
	cursor: none;
	color: var(--col1);
}

.page_text {
	border-top: 1px solid var(--col3);
	padding: 10px;
	margin: 2.5em;
}

.page_text h1 {
	margin-top: 0;
}

.stop_scrolling {
	height: 100vh;
	overflow: hidden;
}

.sect1 {
	font-family: 'Roboto Mono', monospace;
	font-size: 2.25vw;
	padding-bottom: 20px;
	margin-right: 10%;
	display: inline-flex;
}

#test1 {
	margin-left: 3em;
	margin-right: 3em;
	padding-bottom: 1em;
	width: 100%;
	border-bottom: 3px solid;
}

h1 {
	font-size: 2.75vw;
	font-weight: normal;
}

u {
	font-weight: bold;
	color: var(--col1);
}

.sect2 {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	font-family: 'Roboto Mono', monospace;
}

.sect2 h1 {
	font-size: 5vw;
	margin-right: 1.5em;
	margin-left: auto;
	display: flex;
	flex-direction: column;
}

.sect2 h1 span {
	font-size: 2.25vw;
	margin-right: 0;
	margin-left: auto;
	margin-top: 0.5em;
}

.sect3 {
	display: flex;
	flex-direction: column;
	min-height: 80vh;
}

.sect3_text, .sect3_email, .sect3_arrow {
	font-family: 'Roboto Mono', monospace;
	font-size: 5vw;
	display: inline-flex;
	margin-left: 1.5em;
	padding-bottom: 1em;
}

.sect3_email {
	color: var(--col1);
	margin-right: 1.5em;
	align-self: flex-end;
	width: fit-content;
	height: 1em;
	line-height: 1em;
	padding: 0.5em;
	display: inline-block;
	text-decoration: none;
	cursor: none;
	white-space: nowrap;
}

.sect3_email:after {
	display: block;
	content: '';
	border-bottom: solid 3px var(--col1);
	transform: scaleX(0);
	transition: transform 250ms ease-in-out;
}

.sect3_email:hover {
	background-color: #000000;
	color: var(--col1);
	cursor: none;
}

.sect3_email:hover:after { transform: scaleX(1);}

.sect3_arrow {
	border-left: 3px solid;
	border-bottom: 3px solid;
	width: 100%;
	height: 50%;
	margin-left: 3em;
}

.sect3_container {
	width: 100%;
	display: inline-flex;
	justify-content: space-between;
}

.right_container {
	width: 40%;
	height: fit-content;
	display: flex;
	flex-direction: column;
	text-align: center;
	float: right;
}

#time, .mail a, #bmac {
	text-shadow: var(--col1) 1px 1px 2px;
}

.color_bar {
	height: 1em;
	font-size: 1vw;
  display: inline-block;
}

.wrap2 {
	width: auto;
	overflow: hidden;
}

.c1 {background-color: #9D00ff; margin-left: 40px;}
.c2 {background-color: #FF006E;}
.c3 {background-color: #5BCEFA;}
.c4 {background-color: #F5A9B8;}
.c5 {background-color: #FFFFFF;}


@media only screen and (orientation: portrait) {

	.color_bar, #time {
		display: none;
	}

	nav a {
		margin: auto;
		font-size: 2vh;
	}

	.sect1, #test1_change {
		font-size: 2vh;
	}

	h1 {
		font-size: 2.75vh;
	}

	nav {
		display: none;
	}

	#time_container {
		display: none;
	}

	#cursor {
		display: none;
	}

	.sect1 {
		margin-right: 0;
	}
}

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

	#scroll_nav, .mail {
		display: none;
	}

	.sect1 {
		flex-direction: column;
	}

	#test1 {
		margin-right: 1em;
		margin-left: 1em;
		width: auto;
	}

	.right_container {
		margin-left: 1em;
		margin-right: 1em;
		margin-top: 3em;
		width: auto;
	}
}