@font-face {
    font-family: Pacifico;
    src: url(Pacifico.ttf);
}

* {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

:root {
    background-color: #111;
}

body {
    width: 100vw;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

input[type='checkbox'] {
    display: none;
}

.switch {
    overflow: hidden;
    position: relative;
    width: 30vw;
    min-height: 12vw;
    margin: 0 auto 12vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 0.3vw solid silver;
    border-radius: 6vw;
    -webkit-box-shadow: 0.3vw 0.3vw 0.6vw hsla(0, 0%, 0%, 0.3) inset, 0.6vw 0.6vw 1.2vw hsla(0, 0%, 0%, 0.3) inset,
        0.9vw 0.9vw 1.8vw hsla(0, 0%, 0%, 0.3) inset;
    box-shadow: 0.3vw 0.3vw 0.6vw hsla(0, 0%, 0%, 0.3) inset, 0.6vw 0.6vw 1.2vw hsla(0, 0%, 0%, 0.3) inset,
        0.9vw 0.9vw 1.8vw hsla(0, 0%, 0%, 0.3) inset;
    background: repeating-linear-gradient(
                45deg,
                hsla(0, 0%, 100%, 0.3) 0%,
                hsla(0, 0%, 100%, 0.3) 25%,
                transparent 25%,
                transparent 50%
            )
            0% / 0.5vw 0.5vw,
        -webkit-gradient(linear, left top, right top, color-stop(50%, red), color-stop(50%, black)) 100% / 160% 100% no-repeat;
    background: repeating-linear-gradient(
                45deg,
                hsla(0, 0%, 100%, 0.3) 0%,
                hsla(0, 0%, 100%, 0.3) 25%,
                transparent 25%,
                transparent 50%
            )
            0% / 0.5vw 0.5vw,
        linear-gradient(90deg, red 50%, black 50%) 100% / 160% 100% no-repeat;
    -webkit-transition: background-position 0.5s;
    transition: background-position 0.5s;
}

.switch::before {
    content: '';
    position: absolute;
    left: 0.075vw;
    top: 0.075vw;
    width: 11.25vw;
    height: 11.25vw;
    border-radius: 50%;
    background-image: repeating-conic-gradient(
            hsla(0, 0%, 100%, 0) 0%,
            hsla(0, 0%, 100%, 0.5) 2.5%,
            hsla(0, 0%, 100%, 0) 5%,
            hsla(0, 0%, 100%, 0) 25%
        ),
        repeating-radial-gradient(circle, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 7%, hsla(0, 0%, 0%, 0.1) 8.5%),
        repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 15%, hsla(0, 0%, 100%, 0.1) 18%),
        repeating-radial-gradient(circle, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 3%, hsla(0, 0%, 100%, 0.2) 4%),
        radial-gradient(circle, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
    -webkit-box-shadow: 0.3vw 0.3vw 0.6vw hsla(0, 0%, 0%, 0.3), 0.6vw 0.6vw 0.6vw hsla(0, 0%, 0%, 0.3),
        0.9vw 0.9vw 1.2vw hsla(0, 0%, 0%, 0.3), 1.2vw 1.2vw 2.4vw hsla(0, 0%, 0%, 0.3);
    box-shadow: 0.3vw 0.3vw 0.6vw hsla(0, 0%, 0%, 0.3), 0.6vw 0.6vw 0.6vw hsla(0, 0%, 0%, 0.3),
        0.9vw 0.9vw 1.2vw hsla(0, 0%, 0%, 0.3), 1.2vw 1.2vw 2.4vw hsla(0, 0%, 0%, 0.3);
    -webkit-transition: left 0.5s;
    transition: left 0.5s;
}

.text {
    text-align: center;
    color: hsl(15, 100%, 25%);
    font-size: 12vw;
    font-family: Pacifico;
    text-shadow: 1vw 1vw 1vw #000;
    -webkit-animation: neon-off 1s 0.5s backwards, neon-off-color 1.5s ease-out 0.5s backwards;
    animation: neon-off 1s 0.5s backwards, neon-off-color 1.5s ease-out 0.5s backwards;
}

input:checked ~ .switch {
    background-position: 60%, 0%;
}

input:checked ~ .switch::before {
    left: 18.075vw;
}

input:checked ~ .text {
    -webkit-animation: neon-on 2s ease-in-out 0.8s infinite alternate, neon-on-color 1s ease-out 0.5s forwards;
    animation: neon-on 2s ease-in-out 0.8s infinite alternate, neon-on-color 1s ease-out 0.5s forwards;
}

@-webkit-keyframes neon-on {
    from {
        text-shadow: 0 0 0.4vw hsl(0, 0%, 100%), 0 0 1.2vw hsl(0, 0%, 100%), 0 0 3.6vw hsl(0, 0%, 100%),
            0 0 4vw hsl(15, 100%, 50%), 0 0 5vw hsl(15, 100%, 50%), 0 0 6vw hsl(15, 100%, 50%),
            0 0 7vw hsl(15, 100%, 50%), 0 0 8vw hsl(15, 100%, 50%);
    }
    to {
        text-shadow: 0 0 0.2vw hsl(0, 0%, 100%), 0 0 0.6vw hsl(0, 0%, 100%), 0 0 1.8vw hsl(0, 0%, 100%),
            0 0 2vw hsl(15, 100%, 50%), 0 0 2.5vw hsl(15, 100%, 50%), 0 0 3vw hsl(15, 100%, 50%),
            0 0 3.5vw hsl(15, 100%, 50%), 0 0 4vw hsl(15, 100%, 50%);
    }
}

@keyframes neon-on {
    from {
        text-shadow: 0 0 0.4vw hsl(0, 0%, 100%), 0 0 1.2vw hsl(0, 0%, 100%), 0 0 3.6vw hsl(0, 0%, 100%),
            0 0 4vw hsl(15, 100%, 50%), 0 0 5vw hsl(15, 100%, 50%), 0 0 6vw hsl(15, 100%, 50%),
            0 0 7vw hsl(15, 100%, 50%), 0 0 8vw hsl(15, 100%, 50%);
    }
    to {
        text-shadow: 0 0 0.2vw hsl(0, 0%, 100%), 0 0 0.6vw hsl(0, 0%, 100%), 0 0 1.8vw hsl(0, 0%, 100%),
            0 0 2vw hsl(15, 100%, 50%), 0 0 2.5vw hsl(15, 100%, 50%), 0 0 3vw hsl(15, 100%, 50%),
            0 0 3.5vw hsl(15, 100%, 50%), 0 0 4vw hsl(15, 100%, 50%);
    }
}

@-webkit-keyframes neon-on-color {
    to {
        color: #fff;
    }
}

@keyframes neon-on-color {
    to {
        color: #fff;
    }
}

@-webkit-keyframes neon-off {
    from {
        text-shadow: 0 0 0.4vw hsl(0, 0%, 100%), 0 0 1.2vw hsl(0, 0%, 100%), 0 0 3.6vw hsl(0, 0%, 100%),
            0 0 4vw hsl(15, 100%, 50%), 0 0 5vw hsl(15, 100%, 50%), 0 0 6vw hsl(15, 100%, 50%),
            0 0 7vw hsl(15, 100%, 50%), 0 0 8vw hsl(15, 100%, 50%);
    }
}

@keyframes neon-off {
    from {
        text-shadow: 0 0 0.4vw hsl(0, 0%, 100%), 0 0 1.2vw hsl(0, 0%, 100%), 0 0 3.6vw hsl(0, 0%, 100%),
            0 0 4vw hsl(15, 100%, 50%), 0 0 5vw hsl(15, 100%, 50%), 0 0 6vw hsl(15, 100%, 50%),
            0 0 7vw hsl(15, 100%, 50%), 0 0 8vw hsl(15, 100%, 50%);
    }
    to {
        text-shadow: 1vw 1vw 1vw #000;
    }
}

@-webkit-keyframes neon-off-color {
    from {
        color: #fff;
    }
}

@keyframes neon-off-color {
    from {
        color: #fff;
    }
}