@keyframes flyin {
    0% {background-color: rgb(180, 180, 180); color: black; font-size: 10px; border-radius: 4em 1em / 4em 1em; text-shadow: -3px 2px 2px lightslategray;}
    25% {background-color:rgb(144, 144, 144); color: rgba(105, 105, 105, 0.5); font-size: 40px; border-radius: 4em 1em / 4em 1em; text-shadow: -3px 3px 3px lightslategray; }
    50% {background-color: white; color: white; font-size: 70px; border-radius: 1em 4em / 1em 4em; text-shadow: -3px 4px 4px lightslategray;}
    75% {background-color:rgb(72, 72, 72); color: white; font-size: 95px; border-radius: 4em 1em / 4em 1em; text-shadow: -3px 5px 5px rgb(255, 255, 255);}
    100% {background-color: rgb(36, 36, 36); color:rgb(237, 0, 0); font-size: 80px; border-radius: 4em 1em / 4em 1em; text-shadow: -3px 5px 5px lightslategray;}
}

@keyframes flyin2 {
    0% {background-color: white; transform: scale(0, 0);}
    50% {background-color: rgb(148, 142, 138); transform: scale(0, 0.5);}
    100% {background-color: rgb(34, 31, 29); transform: scale(0.5, 1);}
}


body {
    background-color:rgb(34, 31, 29);
    color: whitesmoke;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

/*h1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
}*/

#logo {
    color:dark darkred;
    text-align: center;
    font-weight: 700;
    font-size: 80px;
    border: solid white;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    padding-bottom: 10px;
    text-shadow: -3px 5px lightslategray;
    border-radius: 4em 1em / 4em 1em;
    background-color: black;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    /*animation-duration: 2s;
    animation-name: flyin;*/
}

#wstitle {
    color:rgb(237, 0, 0);
    text-align: center;
    font-weight: 700;
    font-size: 60px;
    border: solid white;
    background-color: black;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    padding: 0px 30px 0px 30px;
    border-radius: 4em 1em / 4em 1em;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    animation-duration: 2s;
    animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -
    animation-name: flyin;
}



h2 {
    font-weight: 500;
    text-align: center;
}

#logo1 {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    animation-duration: 1s;
    animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-name: flyin2;
}