@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400;600&display=swap');

:root {
	--accent: #E49200;
	--dark: #210e2a;
	--light: #e4e1e6;
	--medium: #5e376f;
	--mediumlight: #A473B9;
}

html, body {
    margin: 0;
}
 
body {
	overflow: hidden;
	height: 100vh;
	font-size: 10px;
	font-family: 'Roboto Mono', monospace;
	color: var(--dark);
	background-color: var(--light);
}

.wrapper {
	display:flex;
	height: 100%;
}

#particleContainer {
	background-color:var(--dark);
}

.content {
	overflow-y: auto;
	color:var(--medium);	
}

.wrapper_inner {
	display: flex;
	min-height: 100%; 
	height: auto;
	flex-direction:column;
	justify-content: center;
	align-items:left;
}

h2 {
	display:inline-block;
	margin: 0 0 2rem 0;
	text-transform:uppercase;
	font-weight:600;
	color: var(--mediumlight);
	position: relative;
}

@keyframes uncover {
	0%   {width:100%;}
	100% {width:0;}
}

h2 span {
	position: absolute;
	top:0;
	right: 0;
	display:block;
	width: 0;
	height: 100%;
	background-color: var(--light);
	animation-name: uncover;
	animation-duration: 1s;
	z-index:9999;
  } 

h3 {
	font-weight:400;
	margin: 0 0 2rem 0;
}

h3 strong {
	font-weight:600;
}

ul {
	list-style-type:none;
	margin:0 0 2rem 0;
	padding:0;
}

.about svg {
	margin-right:1rem;
}

.social li {
	display:inline-block;
}

.social li::after {
	content: ' / ';	
}
.social li:last-child::after {
	content: '';
}
.social a:link, .social a:visited {
	color: var(--accent);
}

.social a:hover {
	text-decoration:none;
	color: var(--light);
	background-color: var(--accent);
}

p {
	font-size: 1rem; 
	line-height:1.4rem;
}

p a:link, p a:visited {
	color: var(--medium);
}

p a:hover {
	text-decoration:none;
	color: var(--light);
	background-color: var(--medium);
}

a:active {
	background-color: var(--dark);
}





@media only screen and (max-width:500px) {
	.wrapper {
		flex-direction: column;
	}
	#particleContainer {
		height: 100px;
	}
	.content {
		flex-basis: auto; 
		padding:2rem; 
		justify-content:top; 
		align-content:left; 
		font-size: 1.1rem; 
		line-height: 2rem;
	}
	h2 {
		font-size: 3rem; 
		line-height: 5rem;
	}
	h3 {
		font-size: 1.3rem; 
		line-height: 2.5rem;
	}
	h3 strong::after {
		content: "\a";
		white-space: pre;
	}
	.about li {text-indent:-2.8rem; padding-left:2.8rem;}
}

/*@media (min-width: 481px) {
	#particleContainer {
		flex-basis: 10%;
	} 
	.content {
		flex-basis: 90%;
	}
}
*/

@media only screen and (min-width:501px) and (max-width:800px) {
	#particleContainer {
		flex-basis:20%; 
		flex-grow:0; 
		overflow:hidden; 
		z-index:5;
	}
	.content {
		flex-basis: 80%; 
		flex-grow: 0;
		justify-content:center;
		align-content:center;
		padding: 0 1rem 0 2rem; 
		font-size: 1.2rem;
		line-height: 2.3rem;
	}
	h2 {
		font-size: 3.5rem;
		line-height: 5rem;
	}
	h3 {
		font-size: 1.4rem;
		line-height: 3rem;
	}
	.about li {text-indent:-2.8rem; padding-left:2.8rem;}
}

@media only screen and (min-width:801px) {
	#particleContainer {
		flex-basis:20%;
		flex-grow:0;
		overflow:hidden;
		z-index:5;
	}
	.content {
		flex-basis: 80%;
		flex-grow: 0;
		justify-content:center;
		align-content:center;
	}
}

@media only screen and (min-width:801px) and (max-height:620px) {
	.content {
		padding: 0 0 0 5rem; font-size: 1.2rem;
		line-height: 2rem;
	}
	h2 {
		font-size: 4rem;
		line-height: 5rem;
	}
	h3 {
		font-size: 2rem;
		line-height: 3rem;
	}
}

@media only screen and (min-width:801px) and (min-height:620px) {
	.content {
		padding: 0 0 0 3rem; font-size: 1.3rem;
		line-height: 2.5rem;
	}
	h2 {
		font-size: 5rem;
		line-height: 6rem;
	}
	h3 {
		font-size: 2rem;
		line-height: 3.5rem;
	}
}