:root {
      --box-size: max(50%);      
      --color1: #64d3c3;
      --color2: #fbf144;
      --color3: #6a3696;
      --color4: #8cc7b6;
      --color5: #8c7c6c;
  }

  @media only screen and  (min-width: 20em) and (max-width: 20em) {
      :root {
          --box-size: max(100%, 300px);         
      }
      body {
           background-color: yellow;
      }
      .bild {
          width: var(--box-size);              
          height: auto;                       
  }
}


body{
      background-color: rgb(75, 184, 77);      
}
body, html, nav, ul, li, span{
      font-size: 10px;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      background-color: --color1;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      border: none;
}

.navbar{
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 70rem;
      margin-top: 10vw;
      transition: all .5s ease;
      background-color: darken(--color2, 20%);
      .navbar-container{
            list-style: none;
            display: flex;
            justify-content: center;
            perspective: 50rem;
            /* background-color: darken($color: --color1, $amount: 20);  */
            background-color: darken(--color1, 20%);
            box-shadow: 0 0 19px 11px rgba(0,0,0,0.2);

            .navbar-container_sub{
                  position: absolute;
                  width: 100%;
                  list-style: none;
                  border-radius: 0 0 5px 5px;
                  top: 100%;
                  left: 0;
                  padding: 0;
            /*      transform: rotateY(180deg) scaleY(0);
                  transform-origin: top;                    */
                  opacity: 0;
                  visibility: hidden;
                  transition: all .7s ease;
                  box-shadow: 0 0 19px 11px rgba(0,0,0,0.2);
            }

      }
      .navbar-item{
            flex-grow: 1;
            padding: 1rem;
            font-size: 2rem;
            background-color: var(--color5)color3;
            font-weight: bold;
            text-align: center;
            /* color: darken($color: $color1, $amount: 20);  */
            color: whitesmoke;
            transition: all .7s ease;
            /*   transform: rotateY(0deg);                  */
            position: relative;
            z-index: 1;
            cursor: pointer;
      
            &:hover{
                
            /*       transform: rotateY(180deg);            */                  
                  & > .navbar-container_sub{
                    /*    transform: rotateY(180deg) scaleY(1);         */      
                        opacity: 1;
                        visibility: visible;
                  }

                  & > .navbar-item_label {
                        transform: scaley(1) rotateY(180deg);
                        opacity: 1;
                        visibility: visible;
                  }
                  
            }
            .navbar-item_sub{
                  padding: 1rem;
                  font-size: 2rem;
                  background-color: transparent;
                  position: relative;
                  overflow: hidden;
                  color: whitesmoke;
                  text-align: end;
                  transition: color .3s ease-in;
                  &:hover {
                        color: --color3;
                  }
                  &:after{
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: -2;
                        background-color: --color4;
                  }

                  &:before{
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 120%;
                        width: 120%;
                        height: 100%;
                        z-index: -1;
                        background-color: --color2;
                        transform: skewX(-30deg);
                        transform-origin: right;
                        transition: all .3s ease-in;
                  }

                  &:hover{                        
                        background-color: red;
                  }

                  &:hover:before{
                        left: -10%;
                  }
            }

            &_label{
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  padding: inherit;
                  font-size: inherit;
                  font-weight: bold;
                  text-align: right;
                  transform: scaleY(0) rotateY(180deg);
                  transform-origin: top;
                  opacity: 0;
                  visibility: hidden;
                  transition: all .4s ease .1s;
                  background-color: --color2;
                  color: --color3;
            }
            .navbar-item_main{
                  padding: 1rem;
                  font-size: 2rem;
                  background-color: transparent;
                  position: relative;
                  overflow: hidden;
                  color: whitesmoke;
                  text-align: end;
                  transition: color .3s ease-in;
                  &:hover {
                        color: --color3;
                  }
                  &:after{
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: -2;
                        background-color: --color4;
                  }

                  &:before{
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 120%;
                        width: 120%;
                        height: 100%;
                        z-index: -1;
                        background-color: --color2;
                        transform: skewX(-30deg);
                        transform-origin: right;
                        transition: all .3s ease-in;
                  }

                  &:hover{                        
                        background-color: rgb(119, 0, 255);
                  }

                  &:hover:before{
                        left: -10%;
                  }
            }

            &_label{
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  padding: inherit;
                  font-size: inherit;
                  font-weight: bold;
                  text-align: right;
                  transform: scaleY(0) rotateY(180deg);
                  transform-origin: top;
                  opacity: 0;
                  visibility: hidden;
                  transition: all .4s ease .1s;
                  background-color: --color2;
                  color: --color3;
            }
      }
}