:root
{
	--black: black;
	--white: #e8e8e8;
	font-family: "Barlow";
}

a
{
	font-family: "Barlow";
	color: var(--white);
}

body
{
	margin: 0;
	padding: 0;
}

#mainBox
{
	width: 1280px;
	height:  720px;
	background-color: var(--black);
	display: flex;
	align-content: center;
	justify-content: center;
}

#introLogo
{
	position: absolute;
	height: 65%;
	top: 110px;
	opacity: 0;
	pointer-events: none;
}

.introAnim
{
	animation: introAnim 3s ease-in-out;
}

#loadingScreen
{
	position: fixed;
	background-color: black;
	color: white;
	width: 1280px;
	height: 720px;
	opacity: 1;
	transition: opacity 0.5s;
	display: flex;
	align-content: center;
	justify-content: center;
	pointer-events: none;
	z-index: 2000;
}

#loadingBar
{
	width: 150px;
	height: 10px;
	background-color: var(--white);
	position: absolute;
	top: 52%;
	transform-origin: 0% 50%;
	transform: scaleX(0);
	transition: transform 0.1s;
}

#loadingText
{
	position: absolute;
	top: 45%;
}

#titleText
{
	color: var(--white);
	pointer-events: none;
	user-select: none;
	border-bottom: solid 3px var(--white);
	height: 40px;
	white-space: nowrap;
	opacity: 0;
}

.titleAnim
{
	animation: fadeIn 1s ease-in-out;
	animation-delay: 3s;
	animation-fill-mode: forwards;
}

#menu
{
	color: var(--white);
	position: absolute;
	display: flex;
	flex-direction: row;
	top: 45px;
	user-select: none;
	opacity: 0;
}

.menuAnim
{
	animation: fadeIn 1s ease-in-out;
	animation-delay: 3.5s;
	animation-fill-mode: forwards;
}

.menuBtn
{
	padding: 0px 25px 0px 25px;
	cursor: pointer;
}

.menuBtn:hover
{
	opacity: 0.5;
}

#about
{
	text-align: center;
	color: var(--white);
	width: 1200px;
	height: 600px;
	position: absolute;
	top: 100px;
	user-select: none;
	opacity: 0;
	transition: opacity 0.5s;
	pointer-events: none;
}

#preview
{
	text-align: center;
	color: var(--white);
	width: 1200px;
	height: 600px;
	position: absolute;
	top: 100px;
	user-select: none;
	opacity: 0;
	transition: opacity 0.5s;
}

#iconBox
{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

#more
{
	text-align: center;
	color: var(--white);
	width: 1200px;
	height: 600px;
	position: absolute;
	top: 100px;
	user-select: none;
	opacity: 0;
	transition: opacity 0.5s;
	pointer-events: none;
}

.gifPreview
{
	width: 64px;
	height: 64px;
	cursor: crosshair;
}

#categoryDropout
{
	background-color: black;
	width: 210px;
	font-size: 20px;
	text-align: center;
	color: var(--white);
	font-family: "Barlow";
	font-weight: bold;
	border: none;
	border-radius: 0;
	outline: none;
}

@keyframes introAnim
{
	0% {opacity: 0;}
	50% {opacity: 1.0;}
	100% {opacity: 0;}
}

@keyframes fadeIn
{
	0% {opacity: 0;}
	100% {opacity: 1.0;}
}

@keyframes iconIn
{
	0% {scale: 0;}
	100% {scale: 1.0;}
}