body {
    margin: -10px 50px 50px 50px;
    width: 100% - 10px;
    font-size: 20px;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    color: white;
    background-image: url("../images/background.png");
    background-size: cover;
    text-shadow: 2px 2px 2px #000000;
}

#blue {
    font-size: 20px;
    color: rgba(0,255,255,1);
    font-weight: bold;
    text-shadow: 2px 2px 2px #000000;
}

#info {
    font-size: 25px;
    background-color: rgb(64, 64, 64);
    color: rgba(0,255,255,1);
    font-weight: bold;
}
/*credit: https://1stwebdesigner.com/css-snippets-radio-toggles-switches/*/
*,*:before,*:after{
    box-sizing:border-box;
    margin:0;
    padding:0;
    /*transition*/
    -o-transition:.25s ease-in-out;
    transition:.25s ease-in-out;
    text-shadow: 2px 2px 2px #000000;
    outline:none;
    font-family:Helvetica Neue,helvetica,arial,verdana,sans-serif;
    }
    
    #toggles{
    width:60px;
    margin:20px auto;
    text-align:left;
    }
    .ios-toggle,.ios-toggle:active{
    position:absolute;
    top:-5000px;
    height:0;
    width:0;
    opacity:0;
    border:none;
    outline:none;
    }
    .checkbox-label{
    display:block;
    position:relative;
    padding:10px;
    margin-bottom:20px;
    font-size:32px;
    line-height:16px;
    width:100%;
    height:36px;
    /*border-radius*/
    border-radius:18px;
    background:#f8f8f8;
    cursor:pointer;
    }
    .checkbox-label:before{
    content:'';
    display:block;
    position:absolute;
    z-index:1;
    line-height:34px;
    text-indent:40px;
    height:36px;
    width:36px;
    /*border-radius*/
    border-radius:100%;
    top:0px;
    left:0px;
    right:auto;
    background:white;
    /*box-shadow*/
    box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
    }
    .checkbox-label:after{
    content:attr(data-off);
    display:block;
    position:absolute;
    z-index:0;
    top:0;
    left:-300px;
    padding:10px;
    height:100%;
    width:300px;
    text-align:right;
    color:#bfbfbf;
    white-space:nowrap;
    }
    .ios-toggle:checked + .checkbox-label{
    font-size: 32px;
    /*box-shadow*/
    box-shadow:inset 0 0 0 20px  rgb(200, 255, 255),0 0 0 2px rgba(0,255,255,1);
    }
    .ios-toggle:checked + .checkbox-label:before{
    left:calc(100% - 36px);
    /*box-shadow*/
    box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
    }
    .ios-toggle:checked + .checkbox-label:after{
    content:attr(data-on);
    left:60px;
    width:36px;
    }
    /* CYAN CHECKBOX */
    
    #checkbox1 + .checkbox-label{
    /*box-shadow*/
    box-shadow:inset 0 0 0 0px rgba(0,255,255,1),0 0 0 2px #dddddd;
    }
    #checkbox1:checked + .checkbox-label{
    /*box-shadow*/
    box-shadow:inset 0 0 0 18px  rgb(0, 255, 255),0 0 0 2px rgba(0,255,255,1);
    }
    #checkbox1:checked + .checkbox-label:after{
    color:rgba(0,255,255,1);
    font-size: 32px
    }

    #checkbox2 + .checkbox-label{
    /*box-shadow*/
    box-shadow:inset 0 0 0 0px rgba(0,255,255,1),0 0 0 2px #dddddd;
    }
    #checkbox2:checked + .checkbox-label{
    /*box-shadow*/
    box-shadow:inset 0 0 0 18px  rgb(0, 255, 255),0 0 0 2px rgba(0,255,255,1);
    }
    #checkbox2:checked + .checkbox-label:after{
    color:rgba(0,255,255,1);
    font-size: 32px
    }

    .slidecontainer {
        width: 75%; /* Width of the outside container */
      }
      

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgb(0, 255, 255);
        cursor: pointer;
        box-shadow:2px 2px 2px #000000;
      }

      .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 25px;
        background: #313131;
        border-radius: 25px;
        margin: 12.5%;
        outline: none;
        opacity: 1;
      }