body.light{
    --primary:#006e1e;
    --on-primary:#ffffff;
    --primary-container:#73ff7b;
    --on-primary-container:#002204;
    --secondary:#52634f;
    --on-secondary:#ffffff;
    --secondary-container:#d5e8cf;
    --on-secondary-container:#101f10;
    --tertiary:#38656b;
    --on-tertiary:#ffffff;
    --tertiary-container:#bcebf1;
    --on-tertiary-container:#001f23;
    --error:#ba1a1a;
    --on-error:#ffffff;
    --error-container:#ffdad6;
    --on-error-container:#410002;
    --background:#fcfdf6;
    --on-background:#1a1c19;
    --surface:#f9faf4;
    --on-surface:#1a1c19;
    --surface-variant:#dee5d8;
    --on-surface-variant:#424940;
    --outline:#72796f;
    --outline-variant:#c2c9bd;
    --shadow:#000000;
    --scrim:#000000;
    --inverse-surface:#2f312d;
    --inverse-on-surface:#f0f1eb;
    --inverse-primary:#55e162;
    --surface-dim:#dadad5;
    --surface-bright:#f9faf4;
    --surface-container-lowest:#ffffff;
    --surface-container-low:#f3f4ee;
    --surface-container:#eeeee8;
    --surface-container-high:#e8e9e3;
    --surface-container-highest:#e2e3dd;
}

body.dark{
    --primary:#55e162;
    --on-primary:#00390b;
    --primary-container:#005315;
    --on-primary-container:#73ff7b;
    --secondary:#b9ccb4;
    --on-secondary:#253423;
    --secondary-container:#3b4b38;
    --on-secondary-container:#d5e8cf;
    --tertiary:#a1cfd4;
    --on-tertiary:#00363b;
    --tertiary-container:#1f4d52;
    --on-tertiary-container:#bcebf1;
    --error:#ffb4ab;
    --on-error:#690005;
    --error-container:#93000a;
    --on-error-container:#ffb4ab;
    --background:#1a1c19;
    --on-background:#e2e3dd;
    --surface:#121411;
    --on-surface:#e2e3dd;
    --surface-variant:#424940;
    --on-surface-variant:#c2c9bd;
    --outline:#8c9388;
    --outline-variant:#424940;
    --shadow:#000000;
    --scrim:#000000;
    --inverse-surface:#e2e3dd;
    --inverse-on-surface:#2f312d;
    --inverse-primary:#006e1e;
    --surface-dim:#121411;
    --surface-bright:#373a36;
    --surface-container-lowest:#0c0f0c;
    --surface-container-low:#1a1c19;
    --surface-container:#1e201d;
    --surface-container-high:#282b27;
    --surface-container-highest:#333531;
}

/* Ausgangszustand: Neues Element wird von links eingefügt */
.fade-in-element-bottom-left {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 1s ease, opacity 1s ease;
    margin-top: 80vh;
    margin-left: 10vh;
    width: 28vw;
    font-size: 5vh;
    inset-inline-start: 0;
    padding: 3.5vh;
}

.fade-in-element-bottom-right {
    position: absolute;
    opacity: 0;
    transform: translateX(100%); /* Ändere auf 100%, um das Element von rechts hereinzuführen */
    transition: transform 1s ease, opacity 1s ease;
    margin-top: 80vh;
    margin-right: 10vh;
    width: 28vw;
    font-size: 5vh;
    inset-inline-end: 0;
    padding: 3.5vh;
    text-align: right;
}


.fade-in-element-bottom-center {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 1s ease, opacity 1s ease;
    width: 28vw;
    font-size: 5vh;
    inset-inline-start: 0;
    padding: 3.5vh;
    text-align: center;
    justify-content: center !important;
    margin: auto;
    margin-top: 80vh !important;
}

.logo {
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
    height: 14vh; 
    width: auto;
    margin: 5vh; 
    position: absolute;
    right: 0px;
}

.fullscreen {
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
    height: 100vh;
    width: auto;
    max-width: 100vw;
    object-fit: contain;
    margin: auto;
    display: block;
}

.bottom-right {
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
    height: 14vh; 
    width: auto;
    margin: 5vh; 
    position: absolute; 
    right: 0px;
    margin-top: 80vh !important;
}

/* Zielzustand: Sichtbares Element */
.show {
    opacity: 1;
    transform: translateX(0);
}

elem {
    position: absolute; /* Elemente werden absolut positioniert */
    width: 100vw;
    height: 100vh;
}

@font-face {
    font-family: 'Tan-Moonlight';
    src: url('../fonts/tan-moonlight/TANMOONLIGHT-DISPLAY.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('../fonts/tan-moonlight/TANMOONLIGHT-DISPLAY.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

.tan-moonlight {
    font-family: 'Tan-Moonlight';
    text-transform: uppercase;
}