* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --hue: 223;
    --bg: hsl(var(--hue), 10%, 90%);
    --fg: hsl(var(--hue), 10%, 10%);
    font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}

body {
    /*background-color: #FFFF00;
    background: linear-gradient(to right top, #FFFF00, #FF00FF);*/
    background-color: var(--bg);
    color: var(--fg);
    background-attachment: fixed;
    font: 1em/1.5 sans-serif;
    height: 100vh;
    display: grid;
    place-items: center;
    transition: background-color 0.3s;
    font-family: 'Do Hyeon', sans-serif;

}

main {
    padding: 1.5em 0;
}

.ap {
    width: 8em;
    height: 16em;
}

.ap__ring {
    stroke: hsla(var(--hue), 10%, 10%, 0.15);
    transition: stroke 0.3s;
}

.ap__worm1,
.ap__worm2 {
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.ap__worm1 {
    animation-name: worm1;
}

.ap__worm2 {
    animation-name: worm2;
    visibility: hidden;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue), 10%, 10%);
        --fg: hsl(var(--hue), 10%, 90%);
     }

    .ap__ring {
        stroke: hsla(var(--hue), 10%, 90%, 0.1);
    }
}

/* Animtions */
@keyframes worm1 {
    from {
        animation-timing-function: ease-in-out;
        stroke-dashoffset: -87.96;
    }

    20% {
        animation-timing-function: ease-in;
        stroke-dashoffset: 0;
    }

    60% {
        stroke-dashoffset: -791.68;
        visibility: visible;
    }

    60.1%,
    to {
        stroke-dashoffset: -791.68;
        visibility: hidden;
    }
}

@keyframes worm2 {

    from,
    60% {
        stroke-dashoffset: -87.96;
        visibility: hidden;
    }

    60.1% {
        animation-timing-function: cubic-bezier(0, 0, 0.5, 0.75);
        stroke-dashoffset: -87.96;
        visibility: visible;
    }

    77% {
        animation-timing-function: cubic-bezier(0.5, 0.25, 0.5, 0.88);
        stroke-dashoffset: -340;
        visibility: visible;
    }

    to {
        stroke-dashoffset: -669.92;
        visibility: visible;
    }
}

.Color-Font {
    background-image: linear-gradient(to left top, #2E2EFE, #FE2EF7);
    -webkit-background-clip: text;
    color: transparent;
}

.Ascll_Font {
    color: #ffffff;
    font-size: 1px;
}

h1.Color-Font {
    font-family: "Sofia";

}

li {
    display: inline;
    list-style: none;
}

* {
    margin: 0;
    padding: 0;

}

body::before {
    content: "";
    /*position: absolute;*/
    position: fixed;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 500%;
    /*background-attachment: fixed;*/
    /*border-radius: 50px;*/
    filter: blur(10px);
    z-index: -1;
    /*animation: sun 10s infinite;*/
}

body:hover::before {
    animation: sun 10s infinite;
}

body:hover {
    animation: sun 10s infinite;
}

@keyframes sun {
    100% {
        background-position: 500% 0;
    }

}