@font-face {
    font-family: tooCuteFont;
    src: url(../font/tfc-font.ttf);
}

@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}   

@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}   

@-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}


@media (hover: hover) {
    .links:hover{
        filter: drop-shadow(0 0 10px rgb(20, 33, 206));
    }

    h2:hover {
        text-decoration: underline;
    }

    .footer-name:hover {
        text-decoration: underline;
    }
}

.links:active {
    filter: drop-shadow(0 0 10px rgb(20, 33, 206));
}

h2:active {
    text-decoration: underline;
}

.footer-name:active {
    text-decoration: underline;
}

.box.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 110vh;
}

.box {
    padding: .5rem;
    border-radius: 4px;
}

.box p {
    max-width: 125px;
    text-align: center;
    margin: .25rem;
    padding: .25rem;
}

.links {
    animation: fadeIn linear 4s;
    -webkit-animation: fadeIn linear 4s;
    -moz-animation: fadeIn linear 4s;
    -o-animation: fadeIn linear 4s;
    -ms-animation: fadeIn linear 4s;
    margin: 0 20px;
    image-rendering: pixelated;
}

h1 {
    text-shadow: 1px 1px 2px black, 0 0 10px rgb(22, 22, 231), 0 0 3px rgb(7, 7, 170);
    font-size: 45px;
    margin: 0;
    position: absolute;
    top: 45%;
    left: 50%;
    margin-right: -50%;
    user-select: none;
    -webkit-user-select: none;
    font-family: tooCuteFont;
    animation: fadeIn linear 2s;
    -webkit-animation: fadeIn linear 2s;
    -moz-animation: fadeIn linear 2s;
    -o-animation: fadeIn linear 2s;
    -ms-animation: fadeIn linear 2s;
    transform: translate(-50%, -50%)
}

h2 {
    text-shadow: 1px 1px 2px black, 0 0 5px rgb(22, 22, 231), 0 0 3px rgb(7, 7, 170);
    font-size: 25px;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    user-select: none;
    -webkit-user-select: none;
    font-family: tooCuteFont;
    animation: fadeIn linear 2s;
    -webkit-animation: fadeIn linear 2s;
    -moz-animation: fadeIn linear 2s;
    -o-animation: fadeIn linear 2s;
    -ms-animation: fadeIn linear 2s;
    transform: translate(-50%, -50%)
}

.footer-text {
    color:rgb(204, 107, 191);
    position: fixed;
    left: 50%;
    bottom: 0;
    width: 100%;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    font-family: tooCuteFont;
    animation: fadeIn linear 6s;
    -webkit-animation: fadeIn linear 6s;
    -moz-animation: fadeIn linear 6s;
    -o-animation: fadeIn linear 6s;
    -ms-animation: fadeIn linear 6s;
    transform: translate(-50%, -50%) 
}

.secret-text {
    color:rgb(204, 107, 191);
    position: fixed;
    left: 50%;
    bottom: -20px;
    width: 100%;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    font-family: tooCuteFont;
    animation: fadeIn linear 3s;
    -webkit-animation: fadeIn linear 3s;
    -moz-animation: fadeIn linear 3s;
    -o-animation: fadeIn linear 3s;
    -ms-animation: fadeIn linear 3s;
    transform: translate(-50%, -50%) 
}

.emoji{
    image-rendering: pixelated;
    vertical-align: middle;
}

.footer-name {
    text-shadow: 1px 1px 2px black, 0 0 5px rgb(160, 98, 211), 0 0 3px rgb(128, 91, 123);
    color:rgb(204, 107, 191);
 }

body {
    background: url('../gif/spookykitty.jpg') repeat-y center center fixed;
    background-size: cover;
}

body::-webkit-scrollbar {
    display: none;
}

html {
    scrollbar-width: none;
}