:root {
    --rot: #b00;
    --gruenLight: #0d0;
    --blau: #48e;
    --bgColorBody: #060;
    --hgColor: #060;
    --hgDezent: #050;
    --hgColorDark: #040;
    --vgColorLight: #cc8;
    --vgColor: #993;
    --vgColorDark: #771;
    --bgTrans: rgba(0, 68, 0, 0.8);
    --bgTransDark: rgba(0, 68, 0, 0.9);
    --shaddowTrans: rgba(0, 68, 0, 0.5);
    --shaddowTransBlack: rgba(0, 0, 0, 0.7);

    --divHeaderLeft: 300px;
    --contentTop: calc(var(--roul-tablot-width) / 1.8);
    --tablotBottom: calc( var(--contentTop) - 45px);

    box-sizing: border-box;
}

html {
    background-color: var(--bgColorBody);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

body {
    min-width: 906px;
    background-color: var(--hgColor);
    margin-top: 0; 
    margin-left: 0;
    color: var(--vgColor);
}

a {
    text-decoration: none;
    color: var(--vgColor);
}

hr {
    width: 80%;
    color: var(--vgColor);
}

ul {
    list-style-type: none;
}

button,
input[type=button]{
    background-color: var(--vgColor);
    color: var(--hgColorDark);
    font-family: Arial;
    font-weight: bolder;
    border-top: 2px solid var(--vgColorLight);
    border-left: 2px solid var(--vgColorLight);
    border-bottom: 2px solid var(--vgColorDark);
    border-right: 2px solid var(--vgColorDark);
    border-radius: 4px;
}
button:hover,
input[type=button]:hover{
    color: var(--gruenLight);
    background-color: var(--hgColorDark);
    border-radius: 16px;

}
button:active,
input[type=button]:active{
    color: var(--hgColorDark);
    background-color: var(--gruenLight);
    border-top: 2px solid var(--vgColorDark);
    border-left: 2px solid var(--vgColorDark);
    border-bottom: 2px solid var(--vgColorLight);
    border-right: 2px solid var(--vgColorLight);

}
input[type=text],
input[type=number],
input[type=email],
input[type=password]{
    background-color: var(--vgColor);
    border-top: 2px solid var(--vgColorDark);
    border-left: 2px solid var(--vgColorDark);
    border-bottom: 2px solid var(--vgColorLight);
    border-right: 2px solid var(--vgColorLight);
}
input[type=checkbox],
input[type=radio] {
    accent-color: var(--rot);
}

select{
    background-color: var(--vgColor);
}


.resizable {
    resize: both;
    overflow: auto;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.fett {
    font-weight: bolder;
}