@charset "UTF-8";
/* CSS Document */

h1{
	text-align: center;
	font-size: 64px;
}

.dropTitle{
	display: inline-block;
	position: relative;
	top:0;
	transform: rotateX(-90deg);
	animation: dropTitleAnimation 1.2s ease 1 normal forwards;
}



@keyframes dropTitleAnimation {
    10% {
        opacity: 0.5;
    }
    20% {
        opacity: 0.8;
        top: 40vh;
        transform: rotateX(-360deg);
    }
    100% {
        opacity: 1;
        top: calc(50vh - 48px);
        transform: rotateX(360deg);
    }
}

.delay1{
	animation-delay: 0.2s;
}
.delay2{
	animation-delay: 0.4s;
}
.delay3{
	animation-delay: 0.6s;
}
.delay4{
	animation-delay: 0.8s;
}
.delay5{
	animation-delay: 1.0s;
}
.delay6{
	animation-delay: 1.2s;
}
.delay7{
	animation-delay: 1.4s;
}
.delay8{
	animation-delay: 1.6s;
}