/*

<link rel="stylesheet" href="https://hanralatalliardwork.github.io/My_styling/files/css/toggle.css">

<input type="checkbox" id="darkOrLight" onclick="theme('darkOrLight','theme','https://hanralatalliardwork.github.io/wolf_escape_home/','files/customisation/css/boostrap_dark.css','files/customisation/css/bootstrap.css');">
        <label for="darkOrLight">
            <div id="star">
                <div class="star" id="star-1">&starf;</div>
                <div class="star" id="star-2">&starf;</div>
            </div>
            <div id="moon"></div>
        </label>
*/

#darkOrLight {
    display: none;
}

label {
    display: block;
    position: absolute;
    top: 6%;
    right: 1%;
    /*     left: 2%; */
    width: 94px;
    /*,116px;/*var(--main_width,116px);*/
    height: 32px;
    /*,56px;/*var(--main_height,56px);*/
    margin: 19px auto;
    background-color: #77b5fe;
    border-radius: 56px;
    transform: translateY(-50%);
    cursor: pointer;
    transition: 0.3s ease background-color;
    overflow: hidden;
}

#star {
    position: absolute;
    top: 4px;
    /*13px;*/
    left: 13px;
    width: 22px;
    /*30px;*/
    height: 23px;
    /*30px;*/
    background-color: #fafd0f;
    transform: scale(1);
    border-radius: 50%;
    transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform, 0.3s ease background-color;
    z-index: 1;
}

#star-1 {
    position: relative;
}

#star-2 {
    position: absolute;
    transform: rotateZ(36deg);
}

.star {
    top: 0;
    left: -5px;
    /*-7px;*/
    font-size: 39px;
    /*54px;*/
    line-height: 23px;
    /*28px;*/
    color: #fafd0f;
    transition: 0.3s ease color;
}

#moon {
    position: absolute;
    bottom: -52px;
    right: 5px;
    width: 22px;
    height: 20px;
    background-color: #fafd0f;
    border-radius: 50%;
    transition: 0.3s ease bottom;
}

#moon:before {
    content: "";
    position: absolute;
    top: -3px;
    left: -4px;
    width: 20px;
    height: 20px;
    background-color: #03a9f4;
    border-radius: 50%;
    transition: 0.3s ease background-color;
}

#darkOrLight:checked+label {
    background-color: #000;
}

#darkOrLight:checked+label #star {
    top: -6px;
    left: 63px;
    transform: scale(0.2);
    background-color: yellow;
}

#darkOrLight:checked+label .star {
    color: yellow;
}

#darkOrLight:checked+label #moon {
    bottom: 8px;
}

#darkOrLight:checked+label #moon:before {
    background-color: #000;
}