*{
        margin: 0;
        padding: 0;
    }
    body {
        background: #333;
        display: flex;
        width: 100%;
        height: 100vw;
        justify-content: center;
        align-items: center;
    }
    .main {
        width: 25vw;
        height: 25vw;
        position: absolute;
        display: flex;
        justify-content: start;
        align-items: center;
    }
    input[type="range"]{
        --c:#1e90ff;
        width: 25vw;
        height: 1vw;
        position: absolute;
        transform: translateY(18vw);
        appearance: none;
        background: linear-gradient(var(--c),var(--c)) no-repeat, black;
        background-size: 0 100%;
        border-radius: 0.5vw;
    }
    input[type="range"]::-webkit-slider-thumb{
        appearance: none;
        width: 2vw;
        height: 2vw;
        background: var(--c);
        border-radius: 50%;
        box-shadow: 0 0 1vw white, 0 02vw white;
    }
    #pc {
        color: white;
        font-size: 8vw;
        font-family: Arial, Helvetica, sans-serif;
        text-shadow: 0.2vw 0.2vw 0 gray, 0 0 1vw #1e90ff, 0 0 2vw #1e90ff,0 0 4vw #1e90ff;
    }
    .main span {
        --bg: black;
        --sg: transparent;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: start;

    }
    .main span::after {
        content: "";
        width: 0.5vw;
        height: 2vw;
        position: absolute;
        background: var(--bg);
        box-shadow: 0 0 0.5vw var(--sg), 0 0 1vw var(--sg), 0 0 2vw var(--sg);
        transition: 0.8s linear;
    }