body{
    font-size: 30px;
    background: #000;
}

.css_select {
    font-size: 30px;
}

.css_button{
    background-color: #48bb1a;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 30px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 20px;
}


#id_show_json{
    background-color: #4ed5e7;
}

p, div, input, select, checkmark{
    font-size: 1vw;
}

input[type="checkbox"] {
    width:30px;
    height:30px;
}

.slider {
    -webkit-appearance: none;
    width: 600px;
    height: 25px;
    background: #f7f3f3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 10px;

}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #e4f30b;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0px 0px 5px 5px  #fa7e19;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #e4f30b;
    cursor: pointer;
    
}



.css_top{
    font-size: 50px;
    color : #d3d3d3;
    width: 100%;
    height: 120px;
    background: #5D737E;

}

.css_top div{
    font-size: 30px;
    left: 50px;
    /* background: #5d7e64; */
    position: relative;
}

.css_mid{
    font-size: 50px;
    color : #d3d3d3;
    width: 100%;
    height: 250px;
    background: #64B6AC;
}

.css_mid div{
    font-size: 30px;
    left: 50px;
    /* background: #5d7e64; */
    position: relative;
    
}


.css_foot{
    font-size: 50px;
    color : #888888;
    width: 100%;
    height: 200px;
    background: #C0FDFB;
}
.css_foot div{
    font-size: 30px;
    color : #888888;
    width: 100%;
    left: 50px;
    position: relative;
   
}