html, body {
            height: 100vh;
            margin: 0;
            padding: 0;
        }
        html {
            font-size: 0.8rem;
        }

        .bg-1 {
            background: #996600;
        }
        .bg-2 {
            background: #993300;
        }
        .bg-3 {
            background: #0066CC;
        }
        .bg-4 {
            background: #006600;
        }
        /* Achtung: Kein extra Attribut für Background-Alpha-Kanal, daher per Javascript! */
        .bg-challenge {
            background: rgba(255, 255, 0, 0.1);
        }
        /* Achtung: Kein extra Attribut für Background-Alpha-Kanal, daher per Javascript! */
        .bg-ide {
            background: rgba(0, 0, 153, 0.1);
        }

        #eosStartScreen, 
        #eosMainMenuScreen, 
        #eosLevelMenuScreen, 
        #eosChallengeMenuScreen, 
        #eosGoalScreen, 
        #eosIDEScreen {
            height: 100vh;
        }
        #eosStartScreen {
            cursor: pointer;
            position: relative;
        } 
        #eosStartArea h1 {
            font-size: calc(4.0vh + 4.0vw);
        }
        #eosAppFooter {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }

        #eosStartScreen .row, 
        #eosMainMenuScreen .row, 
        #eosLevelMenuScreen .row, 
        #eosChallengeMenuScreen .row, 
        #eosGoalScreen .row {
            height: 100vh;
            display: flex;
            align-items: center;
        }

        #eosButtonSettings {
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 2;
            width: auto;
        }
        #eosMainButtonBack {
            position: absolute;
            top: 1rem;
            left: 1rem;
            z-index: 2;
        }
        #eosStartScreen button i, 
        #eosMainMenuScreen button i {
            font-size: calc(1.5vh + 1.5vw);
            width: calc(1.5vh + 1.5vw);
            margin-left: calc(0.5vh + 0.5vw);
            margin-right: calc(0.5vh + 0.5vw);
        }

        .carousel-item {
            height: 100vh;
            cursor: pointer;
        }
        .eosMainMenuScreenImage {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 75%;
            font-size: calc(12.5vh + 12.5vw);
        }
        .eosMainMenuScreenItem h5 {
            font-size: calc(1.5vh + 1.5vw);
        }
        .eosMainMenuScreenItem p {
            font-size: calc(1.25vh + 1.25vw);
        }

        #eosLevelMenuScreen button, 
        #eosChallengeMenuScreen button, 
        #eosGoalScreen button {
            display: flex;
            align-items: center;
            font-size: calc(1.5vh + 1.5vw);
            white-space: nowrap;
            overflow: hidden;
        }
        #eosLevelMenuScreen button i, 
        #eosChallengeMenuScreen button i, 
        #eosGoalScreen button i {
            font-size: calc(1.5vh + 1.5vw);
            width: calc(1.5vh + 1.5vw);
            margin-left: calc(0.5vh + 0.5vw);
            margin-right: calc(1.5vh + 1.5vw);
        }
        #eosGoalScreen button i {
            margin-right: calc(0.5vh + 0.5vw);
        }

        #eosLevelButtonArea, 
        #eosChallengeButtonArea {
            overflow: scroll;
        }

        .levelNumber, 
        .challengeNumber {
            min-width: calc(3.5vh + 3.5vw);
            text-align: left;
        }
        .levelTitle, 
        .challengeTitle {
            text-align: left;
        }

        #eosLevelImageArea, 
        #eosLevelButtonArea,
        #eosChallengeImageArea, 
        #eosChallengeButtonArea, 
        #eosGoalDisplayCol, 
        #eosGoalDescriptionCol, 
        #eosExecutionCol, 
        #eosProgramCol { 
            height: 50vh;
            overflow: hidden;
        }
        @media screen and (min-width: 576px)
        {
            #eosLevelImageArea, 
            #eosLevelButtonArea,
            #eosChallengeImageArea, 
            #eosChallengeButtonArea,
            #eosGoalDisplayCol, 
            #eosGoalDescriptionCol, 
            #eosExecutionCol, 
            #eosProgramCol { 
                height: 100vh;
            }
        }


        #eosGoalDescriptionArea {
            margin-top: 10vh;
        } 
        #eosGoalDescriptionArea, 
        #eosGoalDisplayArea {
            cursor: pointer;
            height: 37.5vh;
        }
        @media screen and (min-width: 576px)
        {
            #eosGoalDescriptionArea {
                margin-top: 17.5vh;
            } 
            #eosGoalDescriptionArea, 
            #eosGoalDisplayArea {
                height: 75vh;
            }
        }

        #eosGoalControlAreaTop {
            position: absolute;
        }
        #eosGoalControlAreaBottom {
            position: absolute;
            right: 0;
            bottom: 0;
        }

        #eosAppControlArea {
            padding: 0.375rem;
            position: relative;
            background: rgba(256, 256, 256, 0.2);
        }
        #eosSituationControlArea {
            padding-right: 0.375rem;
            position: absolute;
            bottom: 0.125rem;
        }
        #eosExecutionControlArea {
            background: rgba(256, 256, 256, 0.3);
        }
        #eosExecutionExtraArea, 
        #eosExecutionButtonArea {
            padding: 0.375rem;
        }
        #eosMessageArea {
            background: rgba(256, 256, 256, 0.4);
        }
        #eosCodeArea {
            /* border: 1px solid red; */
            background: rgba(256, 256, 256, 0.5);
        } 
        #eosEditorControlArea {
            padding: 0.375rem;
            /* border: 1px solid blue; */
            background: rgba(256, 256, 256, 0.6);
        }

        #eosExecutionArea, 
        #eosAppControlArea, 
        #eosExecutionDisplayArea, 
        #eosProgramArea, 
        #eosCodeArea, 
        #eosEditorControlArea {
            height: 39vh;
            overflow: hidden;
        }
        #eosExecutionControlArea, 
        #eosMessageArea {
            height: 11vh;
            overflow: hidden;
        }
        @media screen and (min-width: 576px)
        {
            #eosExecutionArea, 
            #eosAppControlArea, 
            #eosExecutionDisplayArea, 
            #eosProgramArea, 
            #eosCodeArea, 
            #eosEditorControlArea {
                height: 78vh;
            }
            #eosExecutionControlArea, 
            #eosMessageArea {
                height: 22vh;
            }
        }
        #eosExecutionDisplayArea, 
        #eosMessageArea {
            overflow: auto;
        }

        #eosEditorControlArea {
            min-width: 125px;
        }
        #eosAppControlArea .btn, 
        #eosExecutionControlArea .btn, 
        #eosEditorControlArea .btn {
            min-width: 2.6rem;
            min-height: 2.5rem;
            margin-right: 0.3rem;
            margin-bottom: 0.3rem;
        }
        #eosAppControlArea .btn, 
        #eosExecutionExtraArea .btn {
            width: 100%;
        }

        #eosButtonSpeed {
            height: 1.5rem;
            padding: 0;
            background-color: transparent;
        }
        #eosNumberSpeed {
            text-align: center;
            padding-right: 0;
            background-color: transparent;
            border-color: transparent;
        }
        .btn-light {
            --bs-btn-color: #000;
            --bs-btn-bg: rgba(248 ,249, 250, 0.75);
            --bs-btn-border-color: rgba(248, 249, 250, 0.25);
            --bs-btn-hover-color: #000;
            --bs-btn-hover-bg: rgba(211, 212, 213, 0.75);
            --bs-btn-hover-border-color: rgba(198, 199, 200, 0.25);
            --bs-btn-focus-shadow-rgb: 211,212,213;
            --bs-btn-active-color: #000;
            --bs-btn-active-bg: #c6c7c8;
            --bs-btn-active-border-color: #babbbc;
            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            --bs-btn-disabled-color: #000;
            --bs-btn-disabled-bg: rgb(248, 249, 250, 0.75);
            --bs-btn-disabled-border-color: rgb(248, 249, 250, 0.25);
        }

        #eosEditor { 
            width: 100%;
            height: 100%;
            opacity: 0.7;
        }