html, img:not(.logo) {
	animation-name: rainbow;
	animation-duration: 45s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
img:not(.logo) {
	animation-direction: reverse;
}
html, body {
	height: 100%;
}
#particles-js {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
*, a {
	color: #0673D9;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.folder td a:active {
	outline: dotted;
}
body {
	font-family: Roboto;
	margin: 0;
	background-color: #0673D9;
	overflow: hidden;
}
#bgGif {
	position: fixed;
	top: -500px;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center;
	background-image: url('/assets/bg.gif');
	transform: scaleX(-1);
	image-rendering: pixelated;
}
img {
	image-rendering: pixelated;
}
.pageContainer {
	position: absolute;
	margin: auto;
	padding: 20px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 0;
	text-align: center;
	background-color: rgba(0,0,0,0.8);
	border-radius: 20px 20px 10px 10px;
	padding-bottom: 0;
}
.pageContainer, #bottomPage, #navBar {
	user-select: none;
}
#musicPlay {
	position: absolute;
	right: 10px;
}
#musicPlay:hover {
	transform: scale(1.2);
	cursor: pointer;
}
.logo {
	border-radius: 10px;
	margin-right: 5px;
}
.nameContainer {
	font-size: 40px;
	padding: 5px;
}
.indexContainer {
	text-align: left;
}
.colorWhite {
	color: #fff;
}
@keyframes bgAnim {
	from {background-position: 0;}
	to {background-position: -100px;}
}
#bottomPage {
	background-color: black;
	padding: 10px;
	margin-left: -20px;
	width: calc(100% + 20px);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	text-align: left;
}
#navBar {
	top: 0;
	bottom: initial;
}
.nameContainer table td {
	vertical-align: top;
	padding: 10px;
}
tr td:first-child {
	text-align: left;
}
.folder {
	text-align: left;
	width: 100%;
}
.folder a {
	text-decoration: underline;
}
.folder th {
	text-align: center;
}
.nameContainer table {
	text-align: right;
	font-size: 25px;
	margin: 0 auto;
}
hr {
	border: none;
	border-top: solid 2px;
}
ul {
	display: block;
	text-align: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
li {
	display: inline;
}
ul img {
	margin-bottom: -3px;
}
video {
	width: 100%;
	height: 300px;
	border: none;
}
#rickRoll, #rollItem {
	display: none;
}
button {
	background-color: #0673D9;
	border: none;
	border-radius: 10px;
	padding: 10px;
	color: #fff;
	width: 100%;
	font-weight: bold;
	font-size: 20px;
}
button:hover {
	transform: scale(1.1);
	cursor: pointer;
}
@keyframes rainbow {
	from { filter: hue-rotate(0deg) }
	to { filter: hue-rotate(360deg) }
}
@media screen and (max-width: 900px) {
	.pageContainer {
		width: 75%;
	}
	#f_desc {
		display: none;
	}
}