body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
} 

/*Toggle button oval shaped frame / container around the button*/
label {
    width: 500px;
    height: 200px;
    position: relative;
    display: block;
    background: #ebebeb;
    border-radius: 200px;  /*Radius could be half the height?*/
    box-shadow: inset 0px 5px 15px rgba(0,0,0,0.4), 
                inset 0px -5px 15px rgba(255,255,255,0.4);

    cursor: pointer; /*Finger like pointer when curser over label*/
   transition: 0.3s; /* Slow down the transform - translateX*/
} 
/*Toggle button. 
To make a circle, dimensions to be same top, bottom, left and right*/
label::after {
    content: "";
    width: 180px;
    height: 180px;  /*20px less than the frame height*/
    position: absolute;
    top: 10px;  /*move from top, down half of the 20px space in the height*/
    left: 10px; /*move from left to right  */

    background: linear-gradient(180deg, #ffcc89, #d8860b);
    border-radius: 180px;  /*90px works */
    box-shadow: 0px 5px 10px rgba(0,0,0,0.2); /*Shadow around button */
    transition: 0.3s; /* Slow down the transform - translateX*/
} 

/*Input == checkbox is hidden. HTML 'Label for=' checkbox accepts input clicks*/
input {
    width: 0;
    height: 0;
    visibility: hidden;
} 

/* Select the label frame / container when input checked...
Select the first label element after the input (checkbox) when in state of 'checked'*/
input:checked + label {
    background: #242424;
} 

/* Select the button when in the state of checked
Select the first element after the label element which is after the input (checkbox) when in state of 'checked'*/
input:checked + label::after {
    left: 490px;
    transform: translateX(-100%);
    background: linear-gradient(180deg, #777, #3a3a3a); /*Change the button background to grey gradient, Angle spec direction gradient moves towards*/
} 

/*When button is clicked, change its width to make it stretch (momentarily) 
The button is after the label. 
When label is active / hover made the button wider */
label:active::after, label:hover::after {
    width: 280px;
}

/*To change the background color of the whole viewport, change the background color.
The HTML has a div with class="background"
To do a full darkmode, on all page elements, may need javascript*/

.background {
    width: 100vw;
    height:100vh;
    background: #fff;
    z-index: -1;  /* Puts this behind all other elements in the image layer stack*/
    position: absolute;
    transition: 0.3s;
}

/* When input is checked, change the background to darkmode*/
input:checked + label + .background {
    background: #242424;
}

/*select the svg icon images within the label /frame / button container */
label svg {
    position: absolute; 
    width: 120px;   
    top: 40px;
    z-index: 100; /* Ensure icons are in the top layer */
}

label svg.sun {
    left: 40px;
    fill: #fff;
    transition: 0.3s;
}

label svg.moon {
    left: 340px;
    fill: #7e7e7e;
    transition: 0.3s;
}
/*
/* When input is checked, switch the color of icons 
Get the svg.sun within the first label in the input, when input is in checked state*/
input:checked + label svg.sun {
    fill: #7e7e7e; /* Makes sun grey when checked */
}

/* Similar for moon*/
input:checked + label svg.moon {
    fill: #fff; /* Makes moon white when checked*/
}