body {
	margin: 0;
	font-size: 30px;
	font-family: "lato", sans-serif;
	text-anchor: middle;
	letter-spacing: 2.5px;
	background-size: 120px 100%;
	animation: bg forwards 3s infinite;
    animation-timing-function: linear;
	overflow: hidden;
}

p {
	inline-size: 50%;
	overflow-wrap: break-word;
	margin-left: 25%;
}

a:link, a:visited {
  color: #00eeee;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: yellow;
  background-color: transparent;
  text-decoration: none;
}

img {
	user-select: none;
}

.img_right {
	float: right;
	width: 50%;
}

.oc-img {
	opacity: 0;
	animation: fade-in forwards 1.5s;
	animation-delay: 0.25s;
	position: absolute;
	min-width: 35%;
	max-width: 35%;
    margin-left: 60%;
    margin-top: 5%;
}

.oc-credits {
	opacity: 0;
	animation: fade-in forwards 1.5s;
	animation-delay: 0.25s;
	position: absolute;
	float: right;
	margin-left: 80%;
	margin-top: 40%;
	font-size: 75%;
}

li {
	font-size: 50%;
}

ul {
	list-style: none;
	font-weight: bold;
	font-size: 75%;
}

.coming_soon::after {
	content: " (Coming Soon)";
	color: white;
	font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #55555588;
}

.collapsible {
  background-color: #77777788;
  text-align: center;
  font-weight: bold;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  outline: none;
  font-size: 15px;
}

.collapsible_content {
  padding: 0 18px;
  display: none;
  background-color: #44444488;
}

.content {
	position: absolute;
	overflow-y: scroll;
    margin-left: 23%;
    margin-top: 5%;
	width: 75%;
	height: 80%;
	color: white;
	font-size: 80%;
	background-color: #00000077;
	animation: fade-in forwards 1.5s;
}

h1 {
	text-align: center;
}

h2 {
	text-align: center;
}

.projects {
	font-size: 20px;
	text-align: center;
	color: white;
}

.bio {
	font-size: 20px;
	color: white;
	font-weight: bold;
}

.games {
	font-size: 20px;
	color: white;
	font-weight: bold;
}


.copyright {
	font-size: 12px;
	color: white;
	font-weight: bold;
}

@keyframes fade-in {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes draw {
  0% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}

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

@keyframes bg {
  0% {
    background-position: 0px 0%;
  }
  100% {
    background-position: -120px 0%;
  }
}

hr {
	opacity: 0;
	color: white;
	animation: draw forwards 1s, fade-in forwards 1s;
	animation-delay: 0.35s;
}

.topnav hr {
	opacity: 0;
	color: white;
	animation: draw_nav forwards 1s, fade-in forwards 1s;
	animation-delay: 0.35s;
}

html {
    height: 100%;
	scrollbar-color: white #00000000;
}

a {
	text-decoration: none;
	transition: 0.5s;
}

a:hover {
	transition: 0.5s;
}

@keyframes hello-there {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.social_container {
	text-align: center;
}

.topnav {
	z-index: 5;
	position: absolute;
	width: 15%;
	height: 100%;
	animation: hello-there 1.25s forwards;
	overflow-x: hidden;
	background-color: #00000077;
	padding: 0% 2.5%;
}

.content-container {
	border-radius:12px;
	inline-size: 40%;
	margin-left: 30%;
	font-size: 18px;
}

.social_container img {
	width: 50px;
	height: 50px;
	display: inline-block;
}

.social_container img {
	transform: scale(1);
	transition: 0.5s;
}

.social_container img:hover {
	transform: scale(1.5);
	transition: 0.5s;	
}

@font-face {font-family: "MNL_Logo";
  src: url("MontserratBold-DOWZd.ttf") format("truetype"); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}

.mnl-logo {
	font-size: calc(2.5vw + 2.5vh);
	font-family: 'MNL_Logo';
	background: -webkit-linear-gradient(orange, #cccc00);
	text-shadow: 0 0 60px white;
    color: transparent;
    background-clip: text;
	animation: spin forwards 1.25s;
	animation-timing-function: ease-out;
}

@keyframes spin {
  to { transform: rotate(1800deg);}
}

.topnav a {
	color: #f2f2f2;
	display:inline-block;
	text-align: center;
	text-decoration: none;
	font-size: 200%;
}

.topnav a:hover {
	color: yellow;
}

button {
	width: auto;
	border-radius: 12px;
	color: black;
}

.topnav a.active {
	background-image: linear-gradient(to right, orange, #CCCC00, orange);
	border: white;
	color: white;
}

.snowflake {
	margin: 0;
	padding: 0;
	position: absolute;
	border-radius: 50%;
	background-color: #fff;
	z-index: -1;
}

@keyframes snowfall {
  to { top: 115vh;}
}

@keyframes sin {
  to { transform: translatex(500%);}
}