.bar-color {color:#000!important;background-color:#f1f1f1!important}
@media (prefers-color-scheme: dark) {
    body {background-color: black;color: white;}
    .bar-color{color:#000!important;background-color:#707070!important}
    .bar-color h3{color: #fff;}
    .w3-button{color: white}
    .w3-container p{color: white}
    input[type=text], select{background-color: #4c4c4c;}
    input[type=text]::placeholder, select::placeholder{color: #9e9e9e;opacity: 1;}
    input[type=text]{color: #fff;}
    .w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#37823a!important}
    .w3-modal{background-color: rgba(255,255,255,0.2);}
    .w3-modal-content{background-color:black;}
}

@media only screen and (min-width: 1200px) {
    html, body {
        height: 100%;
    }
    
    html {
        display: table;
        margin: auto;
    }
    
    body {
        display: table-cell;
        width: 70vw;
    }
}