:root {
    --darkColor:#23272A;
    --themeDotBorder:#fff;
    --darkText:#fff;
    --themeCheckbox: grey;
    --borderCheckbox: #fff;
    --backgroundCheckbox: #2C2F33;

    --backgroundInput: #2C2F33;
    --borderInput: #2C2F33;
    --colorInput: white;

    --backgroundButton: #2C2F33;
    --colorButton: white;
}

::-webkit-scrollbar {
    display: none;
    }
    
    body{
        background-color: var(--darkColor);
        margin: 20px;
    }
    
    input[type=text], select {
        width: 100%;
        padding: 4px 6px;
        margin: 2px 0;
        display: inline-block;
        border: 1px solid var(--borderInput);
        border-radius: 8px;
        box-sizing: border-box;
        background-color: var(--backgroundInput);
        color: var(--colorInput);
        font-family: 'Roboto Mono', monospace;
    }
    
    input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
        width: 100%;
        background-color: var(--backgroundButton);
        color: var(--colorButton);
        border: 2px solid var(--borderInput);
        padding: 4px 6px;
        margin: 1px 0;
        /*border: none;*/
        border-radius: 4px;
        cursor: pointer;
        font-family: 'Roboto Mono', monospace;
    }
    
    input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button:hover {
        background-color: #7289DA;
        font-family: 'Roboto Mono', monospace;
    }
    strong.head{
        font-size: 200%;
        margin-bottom: 10px;
    }
    div.embed{
        float: left;
        display: none;
        margin-bottom: 10px;
    }
    div.toggle{
        float: right;
    }
    strong.main{
        float: left;
    }
    h3{
        float: left;
        margin: 5;
        padding: 0;
        font-size: 100%;
        font-weight: normal;
        color: var(--darkText);
        font-weight: 300;
        line-height: 1.125;
        font-family: 'Roboto Mono', monospace;
        /*font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;*/
    }
    h4, a{    
        margin: 5;
        padding: 0;
        font-size: 100%;
        font-weight: normal;
        color: var(--darkText);
        font-weight: 300;
        line-height: 1.125;
        font-family: 'Roboto Mono', monospace;
        /*font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;*/
    }
    h1{
        float: right;
        margin: 5;
        padding: 0;
        font-size: 100%;
        font-weight: normal;
        color: var(--darkText);
        font-weight: 300;
        line-height: 1.125;
        font-family: 'Roboto Mono', monospace;
        /*font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;*/
    }
    strong{
        float: left;
        margin: 5;
        padding: 0;
        font-size: 100%;
        font-weight: normal;
        color: #7289DA;
        font-weight: 300;
        line-height: 1.125;
        font-family: 'Roboto Mono', monospace;
        /*font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;*/
    }
    

    #theme-options-wrapper {
        display: flex;
        
    }
    
    .discord-theme-dot {
        height: 30px;
        width: 30px;
        background-color: black;
        border-radius: 50%;
    
        margin: 5px;
        border: 2px solid var(--themeDotBorder);
    
        -webkit-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
        -moz-box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
        box-shadow: -1px 1px 3px -1px rgba(0,0,0,0.75);
    
        cursor: pointer;
    }
    
    .discord-theme-dot:hover {
        border-width: 5px;
    }
    
    
    #light-mode {
        background-color: #fff;
    }
    
    #dark-mode {
        background-color: #23272A;
    }


    /* The container */
    .container {
        float: right;
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Hide the browser's default checkbox */
    .container input {
        float: right;
        position: absolute;
        opacity: 0;
    }
    
    /* Create a custom checkbox */
    .checkmark {
        border: 2px solid var(--borderCheckbox);
        border-radius: 6px;
        float: right;
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: var(--backgroundCheckbox);
    }
    
    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
        float: right;
        background-color: var(--themeCheckbox);
    }
    
    /* When the checkbox is checked, add a blue background */
    .container input:checked ~ .checkmark {
        float: right;
        background-color: #7289DA;
        border: 1px solid #7289DA;
    }
    
    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        float: right;
        content: "";
        position: absolute;
        display: none;
    }
    
    /* Show the checkmark when checked */
    .container input:checked ~ .checkmark:after {
        float: right;
        display: block;
    }
    
    /* Style the checkmark/indicator */
    .container .checkmark:after {
        float: right;
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .mobileFiels {
        height: 0px;
        opacity: 0;
    }