@font-face {
    font-family: Pixel;
    src: url(fonts/Minecraftia-Regular.ttf);
}

.background{
	background: url('Images/alma/ALMAbackground.jpg');
	background-position: 0 0px;
}

h1{
	font-family: 'Pixel', cursive;
	font-size: 100px;
	text-align: center;
	position: relative;
	top: 30px;
	line-height: 100px;
	color: hsl(0,0%,50%);
}

.youtube-video{
	width: 100%;
	height: 540px;
}


#alma_with_hat{
	position: absolute;
	top: -150px;
	left: 0px;
	z-index: -11;
	opacity: 0;
	
	transition-timing-function: ease-out;
	transition: left 1.5s;
}

.alma-is-showing{
	left: 200px !important;
	opacity: 1 !important;
	
	-webkit-animation-name: alma-wobble-in;
    -webkit-animation-duration: 1.5s;
	-webkit-animation-direction: normal;
	-webkit-animation-fill-mode: forwards;
	
	animation-name: alma-wobble-in;
    animation-duration: 1.5s;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes alma-wobble-in{
    0%{
		transform: rotate(20deg);
		opacity: 0;
	}
	
	25%{
		transform: rotate(-15deg);
		opacity: 1;
	}
	
	50%{
		transform: rotate(10deg);
	}
	
	100%{
		transform: rotate(-15deg);
	}
}

@-webkit-keyframes alma-wobble-in{
    0%{
		transform: rotate(20deg);
		opacity: 0;
	}
	
	25%{
		transform: rotate(-15deg);
		opacity: 1;
	}
	
	50%{
		transform: rotate(10deg);
	}
	
	100%{
		transform: rotate(-15deg);
	}
}