html {
    color-scheme: dark; 
    color: #eee; 
    font-family: 'Source Sans Pro', 'Open Sans', sans-serif;  
    font-size: 1.0em;
    margin: 0; 
    padding: 0; 
    text-align: left;
}

body {
    background-color: #222;
    min-height: 100% !important;
    margin: 0; 
    padding: 0; 
    height: 100%;
    width: 100%;
    align-items: center;
}

.content {
    width: 800px; 
    background-color: #555;
    margin: auto;
    padding: 16px; 
    min-height: calc(100vh - 32px);
    text-align: center; 
}

.form-title {
    color: #fff; 
    text-align: center; 
}

.item {
    padding-bottom: 16px;
    margin-bottom: 16px;
    background-color: #333;
    border: solid; 
    border-width: 0px;
    border-radius: 0px;
    border-color: #888;
    display: flex;
    flex-direction: column;
    text-align: left; 
}

.multiitem {
    padding: 0; 
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px; 
}

.item > * {
    box-sizing: border-box;
    margin: 16px;
    margin-bottom: 0;
}

.item-icon {
    margin-right: 0.5em; 
}

.prefix {
    display: inline-block;
    width: 6em; 
}

input {
    font-family: 'Source Sans Pro', 'Open Sans', sans-serif;  
    font-size: 1.0em;
}

input[type=checkbox], input[type=radio] {
    appearance: none; 
    width: 1em;
    height: 1em;
    margin: 0; 
    margin-right: 0.5em; 
    background-color: #222; 
    vertical-align: middle; 
}

input[type=checkbox]:checked, input[type=radio]:checked {
    background-color: #4b7; 
}

input[type=number] {
    appearance: textfield; 
}

textarea, input[type=text], input[type=number], input[type=time], input[type=date] {
    accent-color: #333; 
    font-family: 'Source Sans Pro', 'Open Sans', sans-serif;  
    font-size: 1.0em;
    resize: vertical;
    background-color: #222; 
    border: 0px solid #444; 
    color: #eee; 
}

input[type=range] {
    accent-color: #475; 
    background-color: transparent; 
    appearance: none; 
    -webkit-appearance: none; 
}

input[type=range]::-moz-range-track {
    background-color: #222; 
    height: 16px; 
}

input[type=range]::-moz-range-progress {
    background-color: #475; 
    height: 16px; 
}

input[type=range]::-moz-range-thumb {
    border-color: #222; 
    background-color: #4b7; 
    border: 0; 
    border-radius: 0; 
    width: 16px; 
    height: 16px; 
}

input[type=range]::-webkit-slider-runnable-track {
    background-color: #222; 
    height: 16px; 
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none; 

    background-color: #4b7; 
    border: 0; 
    border-color: #222; 
    border-radius: 0; 
    width: 16px; 
    height: 16px; 
}

label {
    vertical-align: middle; 
}

select {
    font-size: 1.0em;
    height: 2em;
}

button {
    font-size: 1.0em;
    padding: 8px;
    margin: 8px; 
    background-color: #5d9; 
    border: 0; 
    color: #000; 
    width: 150px; 
}

button:hover {
    background-color: #6ea; 
}

button:active {
    background-color: #275; 
}

@media only screen and (max-width : 950px) {
    html {
        font-size: 1.5em;
    }

    .content {
        width: calc(100% - 32px); 
    }

    .item-top {
        margin-bottom: 0.0em; 
    }

    .spacing {
        margin-bottom: 1em;
    }

    input[type=range]::-moz-range-track {
        height: 24px; 
    }

    input[type=range]::-moz-range-progress {
        height: 24px; 
    }

    input[type=range]::-moz-range-thumb {
        width: 24px; 
        height: 24px; 
    }

    button {
        width: 200px; 
    }
}