:root {
            --header-image: url("pics/Hummingbirds\ Flora\ -\ Sample\ _\ Fuchsia\ on\ Racing\ Green.jpeg");
            --body-bg-image: url("pics/Tapete\ Kyra\ Dunkelgrün.jpeg");

            /* Farbpalette */
            --main-beige: #d3b994;       /* Hauptfarbe (Beige) */
            --dark-green: #697541;       /* dunkelste Farbe */
            --accent-pink: #b14b76;      /* Akzentfarbe */
        }

        body {
            font-family: 'Nunito', sans-serif;
            background-size: 100%;
            background-color: var(--dark-green);
            background-image: url("pics/Green\ Vintage\ Aesthetic\ Laptop\ Wallpaper.jpeg");
        }

        * {
            box-sizing: border-box;
        }

        #container {
            max-width: 900px;
            margin: 0 auto;
        }

        #container a {
            color: var(--accent-pink);
            font-weight: bold;
        }

        #header {
            width: 100%;
            background-color: var(--clear);
            height: 100px;
            background-image: var(--clear);
            background-size: cover;
        }

         #header2 {
            width: 100%;
            background-color: var(--main-beige);
            height: 200px;
            background-image: url(pics/Hummingbirds\ Flora\ -\ Sample\ _\ Fuchsia\ on\ Racing\ Green.jpeg);
            background-size: cover;
        }

        #navbar {
            height: 40px;
            background-color: var(--dark-green);
            width: 100%;
        }

        #navbar ul {
            display: flex;
            padding: 0;
            margin: 0;
            list-style-type: none;
            justify-content: space-evenly;
        }

        #navbar li {
            padding-top: 10px;
        }

        #navbar li a {
            color: var(--accent-pink);
            font-weight: 800;
            text-decoration: none;
        }

        #navbar li a:hover {
            color: var(--main-beige);
            text-decoration: underline;
        }

        #flex {
            display: flex;
        }

        aside {
            background-color: var(--main-beige);
            width: 200px;
            padding: 20px;
            font-size: smaller;
        }

        main {
            background-color: var(--dark-green);
            flex: 1;
            padding: 20px;
            order: 2;
            color: var(--main-beige);
        }

        #leftSidebar {
            order: 1;
        }

        #rightSidebar {
            order: 3;
        }

        footer {
            background-color: var(--main-beige);
            width: 100%;
            height: 40px;
            padding: 10px;
            text-align: center;
            color: var(--accent-pink);
            width: 100%;
            background-color: var(--clear);
            height: 50px;
            background-image: var(--clear);
            background-size: cover;
        }

        h1, h2, h3 {
            color: var(--accent-pink);
        }

        h1 {
            font-size: 25px;
        }

        strong {
            color: var(--accent-pink);
        }

        .box {
            background-color: var(--dark-green);
            border: 1px solid var(--accent-pink);
            padding: 10px;
            color: var(--main-beige);
        }

        #topBar {
            width: 100%;
            height: 30px;
            padding: 10px;
            font-size: smaller;
            background-color: var(--main-beige);
        }

        @media only screen and (max-width: 800px) {
            #flex {
                flex-wrap: wrap;
            }

            aside {
                width: 100%;
            }

            main {
                order: 1;
            }

            #leftSidebar {
                order: 2;
            }

            #rightSidebar {
                order: 3;
            }

            #navbar ul {
                flex-wrap: wrap;
            }
        }