@font-face{
font-family: Minecraftia;
src: url(Minecraftia-Regular.ttf) format('truetype');
}


@keyframes splashtextAnim{
0% {transform: rotate(-20deg) translate(-50%, 75%) scale(1.1,1.1);}
50% {transform: rotate(-20deg) translate(-50%, 75%) scale(1.2,1.2);}
100% {transform: rotate(-20deg) translate(-50%, 75%) scale(1.1,1.1);}
}


body, html {
height: 100%;
margin: 0;
}


.image {
background-image: url("background.png");
height: 100%;
width: 100%;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-color: rgb(188,199,244);
filter: blur(2px);
}

.button {
text-align: center;
left: 50%;
transform: translate(-50%, 0%);
top: 375px;
padding: auto;
position: absolute;
user-select: none;
}

.button button{
background-color: rgb(111,111,111);
color: rgb(244,244,244);
margin: auto;
margin-bottom: 25px;
width: 600px;
height: 50px;
font-family: Minecraftia, "VT323", monospace;
font-size: 24px;
box-shadow: 3px 3px black, -3px 3px black, 3px -3px black, -3px -3px black;
border: 5px outset rgb(168,168,168);
text-shadow: 4px 4px rgb(56,56,56);
cursor: pointer;
}

.button button:hover{
background-color: rgb(132,142,194);
color: rgb(255,255,160);
border: 5px outset rgb(190,199,255);
}

.title{
position: absolute;
text-align: center;
font-family: "VT323", monospace;
font-size: 200px;
top: 0px;
left: 50%;
transform: translate(-50%, 0%);
margin: auto;
padding: auto;
text-shadow: 10px 14px rgb(30,28,31), 3px 3px black, -3px 3px black, 3px -3px black, -3px -3px black;
color: rgb(165,156,153);
user-select: none;
}

.splashtext{
text-align: center;
position: absolute;
left: calc(50% + 325px);
top: 0px;
width: 450px;
color: rgb(255,255,0);
font-family: Minecraftia, "VT323", monospace;
text-shadow: 3px 3px rgb(68,68,0);
font-size: 24px;
animation: splashtextAnim 0.5s ease-in-out 0s infinite forwards;
user-select: none;
}