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

:root {
    --hue: 223;
    --bg: hsl(var(--hue),90%,95%);
    --fg: hsl(var(--hue),90%,5%);
    --trans-dur: 0.3s;
    font-size: calc(36px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}

body {
  /*  display: flex;*/
    /*justify-content: center;
    align-items: center;
    min-height: 100vh;*/
   /* background: #006064;*/
}

main {
    padding: 290px 0;
    text-align: center;
    /* position: unset;*/
    background-color: #006064;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

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

.ip__track {
    stroke: hsl(var(--hue),90%,90%);
    transition: stroke var(--trans-dur);
}

.ip__worm1,
.ip__worm2 {
    animation: worm1 2s linear infinite;
}

.ip__worm2 {
    animation-name: worm2;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue),90%,5%);
        --fg: hsl(var(--hue),90%,95%);
    }

    .ip__track {
        stroke: hsl(var(--hue),90%,15%);
    }
}

/* Animation */
@keyframes worm1 {
    from {
        stroke-dashoffset: 0;
    }

    50% {
        animation-timing-function: steps(1);
        stroke-dashoffset: -358;
    }

    50.01% {
        animation-timing-function: linear;
        stroke-dashoffset: 358;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes worm2 {
    from {
        stroke-dashoffset: 358;
    }

    50% {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -358;
    }
}