/*
 * style.css
 * 
 * FilUnderscore
 */

html,body
{
	background-color: #131516;
	margin: 0;
	padding: 0;
}

@keyframes color-change
{
	0% { background-color: red; }
	33% { background-color: lightgreen; }
	66% { background-color: blue; }
	100% { background-color: red; }
}

.info
{
	text-align: center;
	font-family: Arial;
	height: 100vh;
}

.colorful
{
	animation: color-change 60s infinite;
	color: white;
}

.colorful .background
{
	backdrop-filter: brightness(50%);
	height: 100vh;
}

.info h1
{
	font-size: 5rem;
}

/*
 * Scroll arrow
 */
 
@-moz-keyframes bounce 
{
	0%, 20%, 50%, 80%, 100% 
	{
		-moz-transform: translateY(0);
		transform: translateY(0);
	}
	40% 
	{
		-moz-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	60% 
	{
		-moz-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}

@-webkit-keyframes bounce 
{
	0%, 20%, 50%, 80%, 100% 
	{
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% 
	{
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	60% 
	{
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}

@keyframes bounce 
{
	0%, 20%, 50%, 80%, 100% 
	{
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% 
	{
		-moz-transform: translateY(-15px);
		-ms-transform: translateY(-15px);
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	60% 
	{
		-moz-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}

.arrow 
{
  position: fixed;
  bottom: 50px;
  left: 50%;
  margin-left: -50px;
  width: 50px;
  height: 50px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAMAAADDpiTIAAAAMFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv3aB7AAAAD3RSTlMAGNe9CgcGtbOytLe2f5VrjfCKAAADsElEQVR4AezBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIDZpRvTiIEYiMLkzivb65/Xf7eBLSFkYAQzDUjwvS6rZ3N9LduekvuffFOAq/+Xs+T+pABffzhL7p8CfP3FBdQB3gXEH45S+psXEP9VgM7fvoD4rwJ0/v4FxF9TQE1IAT38YZbcPwV4+YsLGBNSQB9/mONf/XdIAZ38YR9y/xTg678KkPunAF//VYDcPwU4+IsLGDekgI7+cA+5fwow8hcUsPxTgLG/uIBxQQro6w/XEPinABd/bQHLPwUY+6sLeCEFdPeH989Hfj4poL//55ddOqgCAIQBKKT9S5vB294+GeAeA/gbwN8A/gbwN4C/AfwN4G8AfwP4G8DfAP4G8DeAvwH8DeBvAH8D+BvA3wD+BvA3gL8B/A3gbwB/A/gbwN8A/gbM9DeAvwH8DeBvAH8D+BvA3wD+BvA3gL8B/A3gbwB/A/gbwN8A/gbwN4C/AfwN4G8AfwP4G8DfAP4G8DeAvwH8DeBvAH8D+BvA3wD+BvA3gL8B/A3gbwB/A/gbwN8A/gbwN4C/AfwN4G8AfwP4G8DfAP4G8DeAvwH8DeBvAP//AfwN4G8AfwP4G8DfAP4G8DeAvwH8DeBvAH8D+BvA3wD+BvA3gL8B/A3gbwB/A/gbwN8A/gbwN4C/AfwN4G8AfwP4G8DfAP4G8DeAvwH8DeBvAH8D+BvA3wD+BvA3gL8B/A3gbwB/A/gbwN8A/gbwN4C/AfwN4G8AfwPm+hvA3wD+BvA3gL8B/A3gbwB/A/gbwN8A/gbwN4C/AfwN4G8AfwP4G8DfAP4G8DeAvwH8DeBvAH8D+BvA34Bd/gbwN4C/AfwN4G8AfwP4G8DfAP4G8DeAvwH8DeBvQMXfAP4G8DeAvwH8DeBvQNPfAP4G8Deg7G8AfwPa/gbE/Q2I+xvA3wD+BvA3gL8B/A3gbwB/A/gbwN8A/gYs8DeAvwH8DeBvAH8D+BvA3wD+BvA3gL8B/A3gbwB/A/gbwN8A/gbs9zeAvwH8DeBvAH8D+BvA3wD+BvT8DeBvAH8D+BvQ9TeAvwFtfwPi/gbwf+3BsQAAAADAIH/rYeypAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAUHBYk13Z7LTsAAAAASUVORK5CYII=);
  background-size: contain;
  filter: brightness(0) invert(1) !important;
}

.bounce 
{
  -moz-animation: bounce 4s infinite;
  -webkit-animation: bounce 4s infinite;
  animation: bounce 4s infinite;
}

.fade 
{
  opacity:0;
  transition: 1s all ease-out;
}

.unfade 
{
	opacity:1;
	transition: 1s all ease-in;
}

.hidden
{
	opacity:0;
}