:root {
    --htmlbg: #eee;
    --htmlbg: #fff;
    --speed: 0.6s;
    --topBarH: 8rem;
    --leftBarW: 15rem;
    --size-content: 1.8rem;
    --topBarH1: #555;
    --background: #fff;
    --switchWidth: 10rem;
    --switchHeight: 4rem;
    --switchShadow: #888;
    --shadow: #ccc;
    --color-hr: #ccc;
    --color-input: #ebebff;
    --color-title: #666;
    --color-tableTitle: #fff;
    --color-tableBg: #888;
    
    
    --color-theme: rgba(170, 170, 255, 1.0);
    --color-read: #ffaa00;
    --color-inputNum: #333;
    --color-content: #888;
    --color-select: #ccc;
    --color-leftBar: #888;
    --color-leftBarClick: #333;
    
    --opacityImageCard: 1;
}

[data-theme="dark"] {
    --htmlbg: #252525; 
    --background: #333;
    --topBarH1: #bbb;
    --switchShadow: #000;
    --shadow: #222;
    --color-hr: #484848;
    --color-input: #393939;
    --color-title: #bbb;
    --color-tableTitle: #aaa;
    --color-tableBg: #555;
    
    
    
    --color-select: #666;
    --color-leftBar: #888;
    --color-leftBarClick: #eee;
    --color-inputNum: #aaf;
    --opacityImageCard: 0.5;
    --color-theme: rgba(170, 170, 255, 1.0);
    --color-read: #ffaa00;
    --color-inputNum: #333;
    --color-content: #888;

}

hr {
    width: 96%;
    margin: auto;
    border: none;
    border-bottom: 1px solid var(--color-hr);
}

h1 {
    font-size: 3.2rem;
    padding-left: 1rem;
    margin: 1rem;
    color: var(--topBarH1);
}

h2 {
    font-size: 2.8rem;
    padding-left: 1rem;
    padding-top: 1rem;
    margin: 0rem;
    cursor: default;
    color: var(--color-title);
}

h3 {
    font-size: 2.4rem;
    padding-top: 1rem;
    margin: 0rem;
    cursor: default;
    color: var(--color-title);
}

button,
.button,
select,
input[type=range],
input[type=checkbox] {
    cursor: pointer;
}

select,
input {
    outline: none;
    color: var(--color-content);
    background: transparent;
    border: 1px solid var(--color-select);
}

select {
    font-size: var(--size-content);
    line-height: 4rem;
    padding-left: 0.5rem;
}

input[type=checkbox] {
    width: 2rem;
    height: 2rem;
}

input[type=number] {
    text-align: center;
    max-width: 10rem;
    height: 2.4rem;
    padding-left: 2rem;
    border: none;
    border-bottom: 1px solid var(--color-select);
    background: var(--color-input);
}