body {
    background-image: url("/res/bg/checker_red.png");
    color: red;
    display: flex;
}

main {
    width: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

main > p, main > a {
    animation: dumbass-fadein 5s 1;
    text-align: center;
    filter: drop-shadow(black 0px 0px 3px);
}

h1 {
    font-size: 50px;
    filter: drop-shadow(red 0px 0px 5px);
    font-family: serif;
    animation: eeexxxpppaaannnddd 7s 1 forwards;
    text-align: center;
    margin: 0;
}

main > a {
    text-align: center;
    display: block;
}

a, a:visited {color: red}
a:hover {letter-spacing: 2px}

#part2 {
    display: none;
}

@keyframes eeexxxpppaaannnddd {
    0% {letter-spacing: 0px; opacity: 0;}
    100% {letter-spacing: 20px; opacity: 1;}
}

@keyframes dumbass-fadein {
    0%, 50% {opacity: 0}
    100% {opacity: 1}
}

::-moz-selection {
  color: black;
  background: red;
}

::selection {
  color: black;
  background: red;
}

@media screen and (max-width: 500px) {
    main {
        width: 90%;
    }
}