:root {
	--text:#eeeeee;
	--line:#00ffe8;
	--accent:#ff0099;
	--bg:#000000;
	--fill:#000000;
}

@font-face {
  font-family:Amenity;
  src:url('assets/fonts/CsAmenityRegular.otf');
}

@font-face {
  font-family:Heidan;
  src:url('assets/fonts/HeidanRoundedVintage.otf');
}

@font-face {
  font-family:KingthingsCalligraphica;
  font-weight:bold;
  src:url('assets/fonts/KingthingsCalligraphica.ttf');
  unicode-range:U+0021-0040;
}

body { 
	color:var(--text);
	font-family:'KingthingsCalligraphica', 'Heidan', sans-serif;
}

* { 
	margin:0;
	padding:0;
	box-sizing:border-box;
	scrollbar-color:var(--accent) var(--bg);
}

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

*::-webkit-scrollbar-track {
  background:var(--bg);
}

*::-webkit-scrollbar-thumb {
  background-color:var(--accent);
  border:transparent;
}

img {
  max-width:100%;
}

nav {
	float:left;
	width:15%;
	height:100vh;
	position:relative;
	background-color:var(--bg);
}

nav div {
	height:fit-content;
	width:fit-content;
	position:absolute;
	top:50%;
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
	right:-1.5vw;
	text-align:right;
}

nav a {
	display:block;
	margin:10px 0;
	padding:0;
	font-size:2em;
	text-decoration:none;
	color:var(--fill);
	filter:
	  drop-shadow(1px 1px 0 var(--accent)) 
		drop-shadow(-1px 1px 0 var(--accent)) 
		drop-shadow(0 -1px 0 var(--accent)) 
		drop-shadow(1px 0 var(--accent));
	font-family:'Amenity', sans-serif;
}

nav a:hover, nav a:focus {
	color:var(--line);
	filter:
	  drop-shadow(1px 1px 0 var(--bg)) 
		drop-shadow(-1px 1px 0 var(--bg)) 
		drop-shadow(0 -1px 0 var(--bg)) 
		drop-shadow(1px 0 var(--bg));
}

#heart {
  height:200px;
  transition:transform .5s ease-in-out;
}

#heart:hover {
  transform:rotate(20deg);
}

main {
	float:left;
	width:82%;
	height:100vh;
	padding:2em;
	overflow-y:scroll;
	background-color:var(--bg);
}

.container {
  max-width:1500px;
}

section {
	margin:2em 0;
	padding:1em 2em;
	background-color:var(--fill);
	border:5px solid var(--line);
}

.stripe {
	float:left;
	width:3%;
	height:100vh;
	background-color:var(--accent);
}

hr {
	border:none;
	border-top:5px solid var(--line);
}

header {
	font-size:2.5em;
	margin-bottom:1rem;
	color:var(--line);
	filter:
	  drop-shadow(1px 1px 0 var(--accent))
		drop-shadow(-1px 1px 0 var(--accent))
		drop-shadow(0 -1px 0 var(--accent))
		drop-shadow(1px 0 var(--accent));
	font-family:'KingthingsCalligraphica', 'Amenity', sans-serif;
	background:linear-gradient(#00ffe8 20%, #ff0099);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

h2, h3, h4, h5, h6, p, details, cite, blockquote, img {
	margin:1rem 0;
}

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

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

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

a { 
	color:var(--accent);
	padding:2px;
}

p a:hover { 
	color:var(--fill);
	background-color:var(--accent);
}

h6 {
  font-size:1em;
	font-family:'KingthingsCalligraphica', 'Amenity', sans-serif;
}

h5 {
  font-size:1.25em;
	font-family:'KingthingsCalligraphica', 'Amenity', sans-serif;
}

h4 {
  font-size:1.5em;
	font-family:'KingthingsCalligraphica', 'Amenity', sans-serif;
}

h3 {
  font-size:1.75em;
	font-family:'KingthingsCalligraphica', 'Amenity', sans-serif;
}

h2 {
  font-size:2em;
	text-align:center;
	color:var(--bg);
	background-color:var(--accent);
	padding:5px;
	font-family:'KingthingsCalligraphica', 'Amenity', sans-serif;
}

blockquote {
	background-color:var(--accent);
	color:var(--fill);
	padding:0.1em 1.5em;
}

blockquote a, blockquote code {
	color:var(--text);
}

cite { 
	display:block;
	text-align:right;
}

code, details, pre {
	background-color:var(--bg);
}

code { 
	font-family:'Courier New', monospace; 
	padding:2px;
}

details, pre {
	padding:1em;
}

pre {
  overflow-x:auto;
}

details p {
  margin:1rem 0 1rem 2rem;
}

table, tr, td {
  border:0;
}

.img-top {
  width:100%;
  margin:0;
}

.img {
  width:100%;
  margin:0;
  margin-top:-3px;
}

figcaption { 
	text-align:center;
	margin:-0.5em 1em 1em 1em;
}

footer { 
	font-size:1em;
	text-align:center;
  color:var(--bg);
	background-color:var(--accent); 
	margin-top:2em;
	padding:5px;
}

footer a {
  color:var(--bg);
}

footer a:hover {
  color:var(--text);
}

.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);
}

::selection {
  color:var(--fill);
  background:var(--line);
}

@media screen and (max-width:800px){
  
	nav, main, .stripe {
		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:right;
	}
	
	nav a {
		display:inline-block;
		margin:5px;
	}
	
	nav img {
		max-height:50px;
		margin-top:0;
		margin-bottom:-15px;
	}
	
	main { 
		overflow:auto;
		padding:2em 1em;
	}
	
	header { 
		text-align:center;
		font-size:1.5em;
		margin-top:-20px;
	}
	
	section {
	  padding:0 1em;
	}
	
	.stripe {
	  height:20px;
	}
	
	*::-webkit-scrollbar {
	  width:10px;
	}
	
}