* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

img {
    max-width: 100%;/*limits the image to 100% of its parent's width */
}

body {
    margin: 10px;
    background-color: paleturquoise;
}

    div {
        display: flex;
        justify-content: space-evenly;
        font-size: xx-large;  
    }

        ul {
            border: 2px solid purple;
            text-align: center;
            background-color: aquamarine;
            margin-top: 5rem;
            padding: 5rem;
        }

            input[type="checkbox"].toggle1 {
                opacity: 0;
                position: absolute;
                cursor: pointer;
                left: -9000px;
                top: -9000px;
            }

            input[type="checkbox"].toggle1 + label {
                display: flex;
                align-items: center;
                position: relative;
                cursor: pointer;
            }

            input[type="checkbox"].toggle1 + label::before {
                content: "";
                width: 3.5rem;
                height: 2rem;
                background-color:  hsl(0, 80%, 90%);
                border-radius: 1rem;
                margin-right: .45rem;
                transition: background-color 200ms ease-in-out;
            }

            input[type="checkbox"].toggle1 + label::after {
                content: "\2715";
                font-size: 1rem;
                color:  white;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 1.5rem;
                height: 1.5rem;
                background-color: hsl(0, 80%, 60%);
                border-radius: 1rem;
                position: absolute;
                left: 5px;  
                transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
                
            }

            input[type="checkbox"].toggle1:focus + label::before {
                outline: 1px solid black;
            }

            input[type="checkbox"].toggle1:checked + label::before {
                background-color:  hsl(100, 60%, 80%);
            }

            input[type="checkbox"].toggle1:checked + label::after {
                background-color: hsl(100, 60%, 40%);
                transform: translateX(100%); 
                content: "\2713";
            }

            input[type="checkbox"].toggle1:disabled + label {
                color: #777;
            }

            input[type="checkbox"].toggle1:disabled + label::before {
                background-color: #CCC;
            }

            input[type="checkbox"].toggle1:disabled + label::after {
                background-color: #777;
            }

        /* toggle 2     */

        
            input[type="checkbox"].toggle2 {
                opacity: 0;
                position: absolute;
                cursor: pointer;
                left: -9000px;
                top: -9000px;
            }

            input[type="checkbox"].toggle2 + label {
                display: flex;
                align-items: center;
                position: relative;
                cursor: pointer;
            }

            input[type="checkbox"].toggle2 + label::before {
                content: "";
                width: 3rem;
                height: 1.5rem;
                background-color:  hsl(295, 63%, 82%);
                border-radius: .5rem;
                margin-right: 1rem;
                transition: background-color 200ms ease-in-out;
            }

            input[type="checkbox"].toggle2 + label::after {
                content: "\2715";
                font-size: 1.25rem;
                color:  white;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 2rem;
                height: 2rem;
                background-color: hsl(315, 59%, 40%);
                border-radius: .5rem;
                position: absolute;
                left: -5px;  
                transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
                
            }

            input[type="checkbox"].toggle2:focus + label::before {
                outline: 1px solid black;
            }

            input[type="checkbox"].toggle2:checked + label::before {
                background-color:  hsl(100, 60%, 80%);
            }

            input[type="checkbox"].toggle2:checked + label::after {
                background-color: hsl(100, 60%, 40%);
                transform: translateX(100%); 
                content: "\2713";
            }

            input[type="checkbox"].toggle2:disabled + label {
                color: #777;
            }

            input[type="checkbox"].toggle2:disabled + label::before {
                background-color: #CCC;
            }

            input[type="checkbox"].toggle2:disabled + label::after {
                background-color: #777;
            }

        /* toggle 3 */

            input[type="checkbox"].toggle3 {
                opacity: 0;
                position: absolute;
                cursor: pointer;
                left: -9000px;
                top: -9000px;
            }

            input[type="checkbox"].toggle3 + label {
                display: flex;
                align-items: center;
                position: relative;
                cursor: pointer;
            }

            input[type="checkbox"].toggle3 + label::before {
                content: "";
                width: 2.5rem;
                height: .6rem;
                background-color:  white;
                margin-right: 1rem;
                transition: background-color 200ms ease-in-out;
            }

            input[type="checkbox"].toggle3 + label::after {
                content: "\2715";
                font-size: 1.25rem;
                color:  white;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 1.5rem;
                height: 2.25rem;
                background-color: darkslategray;
                border-radius: 1rem;
                position: absolute;
                left: -5px;  
                transition: background-color 200ms ease-in-out, transform 200ms ease-in-out;
                
            }

            input[type="checkbox"].toggle3:focus + label::before {
                outline: 1px solid black;
            }

            input[type="checkbox"].toggle3:checked + label::before {
                background-color: whitesmoke;
            }

            input[type="checkbox"].toggle3:checked + label::after {
                background-color: darkslategray;
                transform: translateX(100%); 
                content: "\2713";
            }

            input[type="checkbox"].toggle3:disabled + label {
                color: #777;
            }

            input[type="checkbox"].toggle3:disabled + label::before {
                background-color: #CCC;
            }

            input[type="checkbox"].toggle3:disabled + label::after {
                background-color: #777;
            }