/*MAIN BOIS*/
html {
	/*This place should not have a bg img, keep it simple*/
	background-color:black;
}
/*I will be using this tutorial for this https://www.youtube.com/watch?v=ekI7vjkFrGA
I know I mostly like doing things myself, but at least it's not copy/pasting :P
There's no harm in tutorials anyways, you're learning something either way.
*/
:root {
	--pixel-size: 2.5;
}

/*Base (where things will be contained*/
.base {
	border: 1px solid transparent;
	width:100%;
	height:99%;
	position:relative;
}

/*Box With Words In It*/
.announcement {
	border:1px none white;
	width:400px;
	height:150px;
	position:fixed;
	top:35%;
	left:50%;
	transform:translateX(-50%);
	align-content:center;
	text-align:center;
	
	font-family:Dabufont;
	font-size:35px;
	color:white;
	text-shadow: 0px 0px 5px white;
	opacity:1;
	
	animation:startup;
	animation-duration:5s;
	animation-timing-function:linear;
}
.light {
	width:300px;
	height:4px;
	position:absolute;
	bottom:-1vh;
	left:50px;
	background-color:none;
	border-radius:50%;
	box-shadow: 0px 50px 50px 20px white;
	opacity:.1;
}

.gohome {
	all:initial;
	border:1px none white;
	width:100px;
	height:20px;
	position:absolute;
	bottom:-10px;
	left:150px;
	
	text-align:center;
	color:white;
}

/*The Man :]*/
.spritebox {
	//background-color:green;
	width:calc(586px /var(--pixel-size));
	height:calc(508px /var(--pixel-size));
	position:fixed;
	top:40%;
	left:50%;
	transform:translateX(600%);
	overflow:hidden;
	
	animation: boxMove;
	animation-duration:10s;
	animation-timing-function:linear;
	animation-delay:10s;
	animation-iteration-count:1;
	//animation-fill-mode:forwards;
	opacity:0; /*So it's hidden when unused ("display:" doesn't seem to work for anims)*/
}
/*The Sprite Itself*/
.boxman {
	width:calc(3516px /var(--pixel-size)); 
	height:calc(1525px /var(--pixel-size)); 
	/*Note: replace px w/ tru height once all frames are placed*/
	animation: boxmanSpritesheet .75s steps(6) infinite;
	image-rendering:high-quality;
	position:absolute;
	top:0px;
}

/*Animations*/
@keyframes boxmanSpritesheet {
	from {
		transform: translate3d(0px,0,0);
	}
	to {
		transform: translate3d(-100%,0,0);
	}
}

@keyframes boxMove {
	
	0% 		{transform:translateX(500%); opacity:1;}
	100% 	{transform:translateX(-500%); opacity:1;}
}

@keyframes startup {
	0%		{opacity:0;}
	50%,58%,60%,62%,63%	{opacity:1;}
	
	59%,62.9%	{
		opacity:0.4;
	}
}

/*Different Positions (When rest of sheet is done) Change into keyframes if needed*/

.boxman1 {
	top: calc(-508px / var(--pixel-size));
}

.boxman2 {
	top: calc(-1016px / var(--pixel-size));
}