* {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

*:focus {
    outline: none;
}

.button-cover,
.knobs,
.layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.button {
    position: relative;
    top: 8%;
    width: 74px;
    height: 36px;
    /* margin: -20px auto 0 auto; */
    overflow: hidden;
}

.button.r,
.button.r .layer {
    border-radius: 100px;
}

.button.b2 {
    border-radius: 2px;
}

.checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.knobs {
    z-index: 2;
}

.layer {
    width: 100%;
    background-color: #ebf7fc;
    transition: 0.3s ease all;
    z-index: 1;
}

#button-10 .knobs:before,
#button-10 .knobs:after,
#button-10 .knobs span {
    position: absolute;
    top: 4px;
    width: 29px;
    height: 29px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    border-radius: 6px;
    transition: 0.4s ease all;
}

#button-10 .knobs:before {
    content: "";
    left: 3px;
    background-color: #b90000;
}

#button-10 .knobs:after {
    content: "ON";
    right: 3px;
    color: #4e4e4e;
}

#button-10 .knobs span {
    display: inline-flex;
    left: 4px;
    color: #fff;
    z-index: 1;
}

#button-10 .checkbox:checked+.knobs span {
    color: #4e4e4e;
}

#button-10 .checkbox:checked+.knobs:before {
    left: 42px;
    background-color: #047200;
}

#button-10 .checkbox:checked+.knobs:after {
    color: #fff;
}

#button-10 .checkbox:checked~.layer {
    background-color: #fcebeb;
}


#mydiv {

    font-size: 50px;
    position: absolute;
    z-index: 9;
    align-content: center;
}

#mydiv1 {

    font-size: 50px;
    position: absolute;
    z-index: 9;
    align-content: center;
    transition: 0.2s;
}

.red {
    color: rgb(240, 15, 15);
    text-shadow: rgb(255, 255, 255) 0px 0px 2px,
        rgb(255, 255, 255) 0px 0px 4px,
        rgb(255, 42, 77) 0px 0px 8px,
        rgb(255, 42, 77) 0px 0px 12px,
        rgb(255, 42, 77) 0px 0px 16px,
        rgb(255, 42, 77) 0px 0px 22px,
        rgb(255, 42, 77) 0px 0px 30px;

}

.dark_blue {
    color: blue;
    text-shadow: rgb(255, 255, 255) 0px 0px 4px,
        rgb(255, 255, 255) 0px 0px 4px,
        rgb(2, 60, 252) 0px 0px 8px,
        rgb(2, 116, 252) 0px 0px 12px,
        rgb(2, 116, 252) 0px 0px 16px,
        rgb(2, 116, 252) 0px 0px 22px,
        rgb(2, 116, 252) 0px 0px 30px;
}

.light_blue {
    color: rgb(108, 236, 245);
    text-shadow: rgb(255, 255, 255) 0px 0px 2px,
        rgb(255, 255, 255) 0px 0px 4px,
        rgb(23, 251, 254) 0px 0px 8px,
        rgb(23, 251, 254) 0px 0px 12px,
        rgb(23, 251, 254) 0px 0px 16px,
        rgb(23, 251, 254) 0px 0px 22px,
        rgb(23, 251, 254) 0px 0px 30px;
}

.dark_green {
    color: green;
    text-shadow: rgb(255, 255, 255) 0px 0px 2px,
        rgb(255, 255, 255) 0px 0px 4px,
        rgb(11, 215, 72) 0px 0px 8px,
        rgb(11, 215, 72) 0px 0px 12px,
        rgb(11, 215, 72) 0px 0px 16px,
        rgb(11, 215, 72) 0px 0px 22px,
        rgb(11, 215, 72) 0px 0px 30px;
}

.pink {
    color: rgb(255, 0, 242);
    text-shadow: rgb(255, 255, 255) 0px 0px 2px,
        rgb(255, 255, 255) 0px 0px 4px,
        rgb(255, 6, 233) 0px 0px 8px,
        rgb(255, 6, 233) 0px 0px 12px,
        rgb(255, 6, 233) 0px 0px 16px,
        rgb(255, 6, 233) 0px 0px 22px,
        rgb(255, 6, 233) 0px 0px 30px;
}

.warm-white {
    color: #f2e6c2;
    text-shadow: #fdf4dc 0px 0px 2px, #fdf4dc 0px 0px 2px, #fdf4dc 0px 0px 12px, #fdf4dc 0px 0px 16px, #fdf4dc 0px 0px 18px
}

.orange {
    color: orange;
    text-shadow: rgb(255, 255, 255) 0px 0px 2px,
        rgb(255, 255, 255) 0px 0px 4px,
        rgb(253, 148, 56) 0px 0px 8px,
        rgb(253, 148, 56) 0px 0px 18px,
        rgb(253, 148, 56) 0px 0px 26px,
        rgb(253, 148, 56) 0px 0px 32px,
        rgb(253, 148, 56) 0px 0px 50px;
}

.yellow {
    color: yellow;
    text-shadow: rgb(0, 0, 0) 0px 0px 2px,
        rgb(255, 255, 255) 0px 0px 4px,
        rgb(255, 251, 2) 0px 0px 8px,
        rgb(255, 251, 2) 0px 0px 18px,
        rgb(255, 251, 2) 0px 0px 26px,
        rgb(255, 251, 2) 0px 0px 32px,
        rgb(255, 251, 2) 0px 0px 50px;
}

.voilet {
    color: violet;
    text-shadow: rgb(255, 255, 255) 0px 0px 2px,
        rgb(255, 255, 255) 0px 0px 4px,
        rgb(233, 32, 255) 0px 0px 8px,
        rgb(233, 32, 255) 0px 0px 12px,
        rgb(233, 32, 255) 0px 0px 16px,
        rgb(233, 32, 255) 0px 0px 22px,
        rgb(233, 32, 255) 0px 0px 30px;
}

.white {
    color: rgb(255, 255, 255);
    text-shadow: rgb(255, 255, 255) 0px 0px 4px,
        rgb(255, 255, 255) 0px 0px 4px,
        rgb(255, 255, 255) 0px 0px 8px,
        rgb(255, 255, 255) 0px 0px 12px,
        rgb(255, 255, 255) 0px 0px 16px,
        rgb(255, 255, 255) 0px 0px 22px,
        rgb(255, 255, 255) 0px 0px 50px;
}


.rainbow {
    background: linear-gradient(to right, rgb(255, 255, 255) 5.32%, rgb(221, 2, 3) 13.78%, rgb(64, 58, 56) 22.86%, rgb(251, 137, 2) 32.88%, rgb(248, 235, 5) 41.65%, rgb(0, 127, 38) 54.49%, rgb(0, 227, 252) 64.20%, rgb(5, 75, 249) 73.59%, rgb(255, 66, 85) 82.99%, rgb(214, 0, 247) 92.38%, rgb(255, 255, 255) 100.00%);
    background-size: 300% auto;

    text-shadow: rgb(255, 255, 255) 0px 0px 2px,
        linear-gradient(to right, rgb(255, 255, 255) 5.32%, rgb(221, 2, 3) 13.78%, rgb(64, 58, 56) 22.86%, rgb(251, 137, 2) 32.88%, rgb(248, 235, 5) 41.65%, rgb(0, 127, 38) 54.49%, rgb(0, 227, 252) 64.20%, rgb(5, 75, 249) 73.59%, rgb(255, 66, 85) 82.99%, rgb(214, 0, 247) 92.38%, rgb(255, 255, 255) 100.00%),
        0px 0px 8px,
        linear-gradient(to right, rgb(255, 255, 255) 5.32%, rgb(221, 2, 3) 13.78%, rgb(64, 58, 56) 22.86%, rgb(251, 137, 2) 32.88%, rgb(248, 235, 5) 41.65%, rgb(0, 127, 38) 54.49%, rgb(0, 227, 252) 64.20%, rgb(5, 75, 249) 73.59%, rgb(255, 66, 85) 82.99%, rgb(214, 0, 247) 92.38%, rgb(255, 255, 255) 100.00%) 0px 0px 12px,
        linear-gradient(to right, rgb(255, 255, 255) 5.32%, rgb(221, 2, 3) 13.78%, rgb(64, 58, 56) 22.86%, rgb(251, 137, 2) 32.88%, rgb(248, 235, 5) 41.65%, rgb(0, 127, 38) 54.49%, rgb(0, 227, 252) 64.20%, rgb(5, 75, 249) 73.59%, rgb(255, 66, 85) 82.99%, rgb(214, 0, 247) 92.38%, rgb(255, 255, 255) 100.00%) 0px 0px 16px,
        linear-gradient(to right, rgb(255, 255, 255) 5.32%, rgb(221, 2, 3) 13.78%, rgb(64, 58, 56) 22.86%, rgb(251, 137, 2) 32.88%, rgb(248, 235, 5) 41.65%, rgb(0, 127, 38) 54.49%, rgb(0, 227, 252) 64.20%, rgb(5, 75, 249) 73.59%, rgb(255, 66, 85) 82.99%, rgb(214, 0, 247) 92.38%, rgb(255, 255, 255) 100.00%) 0px 0px 22px,
        linear-gradient(to right, rgb(255, 255, 255) 5.32%, rgb(221, 2, 3) 13.78%, rgb(64, 58, 56) 22.86%, rgb(251, 137, 2) 32.88%, rgb(248, 235, 5) 41.65%, rgb(0, 127, 38) 54.49%, rgb(0, 227, 252) 64.20%, rgb(5, 75, 249) 73.59%, rgb(255, 66, 85) 82.99%, rgb(214, 0, 247) 92.38%, rgb(255, 255, 255) 100.00%) 0px 0px 30px;

    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 2s linear infinite;
}

@keyframes shine {
    to {
        background-position: 300% center;
    }
}