@font-face {
    font-family: Churchward Marianna;
    src: url(font/churchward-marianna.woff2);
}

#circular-cursor {
    background-color: white;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    position: absolute;
    pointer-events: none;
    z-index: 5;
}

body {
    font-family: Churchward Marianna, Arial, Helvetica, sans-serif;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0px;
    background-color: #ffdd00;
    cursor: none;
}

p,
a {
    position: relative;
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    font-weight: normal;
    line-height: 0.89;
    letter-spacing: normal;
    transition: letter-spacing 0.2s;
    cursor: none;
}

.section-1 {
    color: #000000;
    z-index: 4;
}

.section-2 {
    color: #e3051b;
    z-index: 3;
}

.section-3 {
    color: #ee7ba3;
    z-index: 2;
}

.section-4 {
    color: #0065b0;
    z-index: 1;
}

@media(hover: hover) {

    p,
    a {
        font-size: min(11vh, 6vw);
    }

    p:hover {
        letter-spacing: 0.14em;
        transition: letter-spacing 0.2s;
    }

    a:hover {
        animation: blink 0.1s infinite;
    }

    @keyframes blink {
        0% {
            opacity: 0;
        }

        49% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }
    }
}

@media(hover: none) {
    #circular-cursor {
        display: none;
    }

    p,
    a {
        font-size: min(11vh, 7vw);
    }
}