body
{
	margin: 0;
	background-color: #000000;
	color: #FFFFFF;
	font-family: 'Kanit';
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	height: 100vh;
}
header
{
	width: 100%;
}
nav
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
img.logo
{
	height: 3vw;
}
img.icon
{
	width: 5vw;
}
aside.vertical
{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	padding: 1rem;
	background-color: #000000;
	z-index: 5;
	transition: all 0.25s linear;
}
hr
{
	width: 100%;
	border-color: transparent;
}
a
{
	color: inherit;
}
a.left
{
	position: fixed;
	top: 50%;
	left: 0;
	transform: translateY(-50%) rotate(-90deg);
}
aside.vertical a, a.left
{
	text-decoration: none;
	transition: all 0.1s linear;
	padding: 0.5rem;
}
aside.vertical a:hover, aside.vertical a:focus, a.toggle:hover, a.toggle:focus
{
	font-weight: 600;
	filter: grayscale(0);
}
aside.vertical.left
{
	left: 0;
	transform: translate(-100%, -50%);
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
aside.vertical.left.active
{
	transform: translate(0, -50%);
	box-shadow: 0 0 10px #FFFFFF;
}
a.link img
{
	border-radius: 50%;
}
h1
{
	font-size: 5rem;
	position: relative;
	opacity: 1;
	font-family: "Oxanium";
}
h1 span.hollow
{
	color: transparent;
	-webkit-text-stroke: 2px #FFFFFF;
	z-index: 0;
	font-size: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 1;
}
.fade-in
{
	animation: fade-in 2s linear;
}
a.right
{
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%) rotate(-90deg);
	text-decoration: none;
	transition: all 0.1s linear;
	padding: 0.5rem;
}
aside.vertical.right
{
	right: 0;
	transform: translate(100%, -50%);
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
aside.vertical.right.active
{
	transform: translate(0, -50%);
	box-shadow: 0 0 10px #FFFFFF;
}
footer
{
	padding: 1rem;
}
footer a 
{
	text-decoration: none;
}
footer a i
{
	font-size: 1.5rem;
	vertical-align: middle;
	margin-right: 0.5rem;
}
@keyframes fade-in {
	0%   {opacity: 0;}
	25%  {opacity: .25;}
	50%  {opacity: .50;}
	75%  {opacity: .75;}
	100% {opacity: 1;}
}
@media screen and (max-width: 767px)
{
	img.icon
	{
		width: 9vw;
	}
}
@media screen and (max-width: 500px)
{
	img.icon
	{
		width: 15vw;
	}
}
@media screen and (max-width: 400px)
{
	h1
	{
		font-size: 4rem;
	}
}
@media screen and (max-width: 300px)
{
	h1
	{
		font-size: 3rem;
	}
}