/* Deklaration der Variablen die für das gesamte CSS gelten */
:root {
    --bgcolor: #1d1c1c;
    --bgcolor2: #142a0e;
    --bgcolor3: #2a561d;
    --textcolor: #E3DCD2;
    --highlightcolor: #CC8B65;
}

/* Deklarationen für Handy und Desktop */
body {  background: var(--bgcolor);
        color: var(--textcolor) }

h1 {    color: var(--textcolor);
        text-align: center;
}

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

input { background-color: var(--textcolor); }

.hauptblock {   /* alle drei nötig um den div zu zentrieren */
                display: inline-block;
                text-align: left;
                margin: 0 auto; }

@media only screen and ( min-device-width: 801px ) {
    /* breites Browserfenster */
    body {  max-width: 1000px;
            margin: 0 auto;
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            text-align: center; }

    table {     background-color: var(--bgcolor2);
                margin: 0.5em auto;
                border-radius: 0.6em;
                padding: 0.5em 2em; }

    td {        padding: 0.5em; }

    .button {   background-color: var(--bgcolor2);
                color: var(--textcolor);
                font-size: 1.2em;
                padding: 0.3em 1.5em;
                border-radius: 0.5em; }

    .button:hover {     background-color: var(--bgcolor3); }

}
/* ENDE breites Browserfenster */


@media only screen and ( max-device-width: 800px ) {
    /* mobile Geräte */
    body {  background-color: green;}
}
/* ENDE Mobile Geräte */