a {
    color:black;
    text-decoration: none;
}

body {
    background-color: black;
    cursor:pointer;
    display:flex;
        align-items: center;
        justify-content: center;
    margin:0;
    min-height:100vh;
    min-width:100vw;
    overflow:hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout:none;
    width:100vw;
}

#blinky {
    position:absolute;
        bottom:5%;
        right:5%;
    z-index:3;
}

.blur {
    color:lightcyan;
    filter:blur(80px);
    font-family: "party let", "brush script mt", "snell roundhand", "luminari";
    font-size: 14em;
    position:absolute;
    text-align:center;
    text-shadow: 0 0 20px cyan;
    transform:rotate(350deg);
    z-index:4;
}

.blur:hover {
    filter:blur(0px);
    filter:brightness(1.2);
}

.blur, figure, img {
    border-radius:50%;
    width:fit-content;
}

#boo {
    animation-duration:10s;
    animation-iteration-count:infinite;
    animation-name:boo;
    animation-timing-function:ease-out;
    transform-origin: 50% 100%;
}

.clockwise {
    animation: wise 2s ease-in-out;
}

.counter-clockwise {
    animation: counter 2s ease-in-out;
}

footer {
    font-family: "luminari", "Academy Engraved Let", "zapfino";
    position:absolute;
        bottom:15px;
}

.hide {
    visibility:hidden;
}

img {
    opacity:0.6;
    width:160px;
}

img:hover {
    visibility:hidden;
}

#inky {
    position:absolute;
        left:5%;
        top:5%;
    z-index:2;
}

.jumpscare {
    display: none;
    filter:brightness(3);
    position: absolute;
    height:100vh;
    width:100%;
}

.jumpscare-visible {
    display: block !important;
}

/* Animation for Boo! */
@keyframes boo {
    0% {
        transform: rotate(350deg);
    }
    25% {
        transform: rotate(395deg);
    }
    75% {
        transform: rotate(330deg);
    }
    100% {
        transform: rotate(350deg);
    }
}
/* animation for ghost */
@keyframes counter {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-180deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

/* animation for ghost */
@keyframes wise {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* Acts on screens smaller than 400px wide */
@media (max-width: 500px) {

    .blur {
        font-size:9em;
    }

    img {
        width:120px;
    }
}

@media (max-width: 1000px) {
    .blur {
        font-size:12em;
    }

    img {
        width:140px;
    }
}