html {
            height: 100%;
    }
    body {
            background-color: rgb(0, 0, 0);
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
            color: white;
            font-family: 'Arial', sans-serif;
            font-size: 1vh;
    }

    .container {
            margin: auto;
            padding: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            aspect-ratio: unset;
    }

    @media (orientation: landscape) {
    /* CSS-Regeln für Bildschirme im Querformat */
        .container {
            height: 100%;
            width: unset;
            aspect-ratio: 3/4;
            left: 50%;
            transform: translate(-50%, 0);
            box-shadow: 0 0 10vmin 5vmin rgba(255, 255, 255, 0.15);
        }
    }

        .layer {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        #layer1 {
            z-index: 1;
            background-color: rgba(0, 0, 0, 0.5);
            /* transform:
                perspective(700px) rotateX(4deg) rotateY(-16deg) rotateZ(4deg); */
        }

        #walking-hand{
            display: flex;
            justify-content: center; /* Zentriert das Kind (das Bild) horizontal */
            align-items: center; /* Zentriert das Kind (das Bild) vertikal */
            height: 100%; /* Stellt die Höhe des Containers auf 100% ein */
            width: 100%; /* Stellt die Breite des Containers auf 100% ein */
        }

        #walking-hand img{
            width: 100%;
            height: auto;
            position: unset;
        }

        #layer2 {
            z-index: 2;

            /* transform:
                perspective(1000px) rotateX(4deg) rotateY(-16deg) rotateZ(4deg); */
        }

        #layer3 {
            z-index: 3;

            /* transform:
                perspective(1200px) rotateX(-4deg) rotateY(16deg) rotateZ(-4deg); */
        }

        #layer4 {
            z-index: 4;
            /* background-blend-mode: screen; */
            mix-blend-mode: screen;
            /* transform:
                perspective(1200px) rotateX(-4deg) rotateY(16deg) rotateZ(-4deg); */
        }

        #layer5 {
            z-index: 5;

            /* transform:
                perspective(1200px) rotateX(-4deg) rotateY(16deg) rotateZ(-4deg); */
        }

        #layer6 {
            z-index: 6;
            /* transform:
                perspective(1200px) rotateX(-4deg) rotateY(16deg) rotateZ(-4deg); */
        }

        @keyframes w200 {
            from {}

            to {
                width: 200%;
            }
        }

        .w200 {
            animation-name: w200;
            animation-duration: 8s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: linear;
        }

        @keyframes w100 {
            0% {
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                width: 100%;
                opacity: 1;
            }

            100% {
                width: 100%;
                opacity: 0;
            }
        }

        .w100 {
            animation-name: w100;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-timing-function: linear;
        }

        .canvas {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            /* background-color: rgba(0, 0, 0, 0.75); */
            /* mix-blend-mode: screen; */
            z-index: 10;
        }

        .blendMode {
            background-color: rgba(0, 0, 0, 1);
            mix-blend-mode: screen;
        }

        div {
            /* background-blend-mode: screen;
            mix-blend-mode: hard-light; */
            overflow: hidden;
            z-index: 1;
        }

        .bgcontainer {
            width: 100%;
            height: 100%;
            perspective: 20000px; /* Gibt an, wie weit das Element vom Betrachter entfernt ist */
        }

        .bgelement {
            width: 70%;
            height: 80%;
            margin: 50px;
            bottom: 0;
            position: absolute;
            transition: transform 1s; /* Glättet die Transformation */
            transform-style: preserve-3d; /* Ermöglicht die 3D-Transformation von Kinderelementen */
            transform: rotateX(9deg) rotateY(35deg) rotateZ(15deg);
        }

        .bg-pic {
            background-blend-mode: multiply;
            background: url("./assets/QDxr.gif");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom right;
            opacity: 0.25;
        }

        .bgelement-animation {
            animation-name: bgelementAnimation;
            animation-duration: 60s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: ease-in-out;
        }

        @keyframes bgelementAnimation {
            0% {
                transform: rotateX(29deg) rotateY(-15deg) rotateZ(25deg);
            }

             50% {
                transform: rotateX(19deg) rotateY(-5deg) rotateZ(5deg);
            }

            100% {
                transform: rotateX(14eg) rotateY(29deg) rotateZ(120deg) translateZ(-600px);
            }
        }

        #infoBoxContainer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 100;
        
        }

/* Animation beim Hovern */
.element:hover {
 
}

/* Container des Dropdown-Buttons */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Der Button, der das Dropdown-Menü öffnet/schließt */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Das Dropdown-Menü (initial versteckt) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links innerhalb des Dropdowns */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Ändere die Farbe der Dropdown-Links beim Hover */
.dropdown-content a:hover {background-color: #f1f1f1}