html {

          box-sizing: border-box;
          --bgColorMenu : #1d1d27;
          --duration: .7s;

      }

      html *,
      html *::before,
      html *::after {

          box-sizing: inherit;

      }

      body{

          margin: 0;
          padding: 0;
          background-color: var(--bgColorMenu);
          transition: background-color var(--duration);

      }

      html, body {
        width: 100%;
        height: 100%;  
      }

      .container {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;  
        height: 98%;
        border: none;
        margin: 0 auto;
        background-color: var(--bgColorMenu);

    }

    .view {
      width: 100%;
      height: 100%;
      border: none;
      border-radius: .5em;
      background-color: var(--bgColorMenu);
      transition: transform var(--duration);

    }

    .menu{

        margin: 0;
        width: 28.5em;
        display: flex;
        /* Works well with 100% width  */
        font-size: 1.5em;
        padding: 0 2.85em;
        position: relative;
        align-items: center;
        justify-content: center;
        background-color: var(--bgColorMenu);

    }

      .menu__item{

          all: unset;
          flex-grow: 1;
          z-index: 100;
          display: flex;
          cursor: pointer;
          position: relative;
          border-radius: 50%;
          align-items: center;
          will-change: transform;
          justify-content: center;
          padding: 0.55em 0 0.85em;
          transition: transform var(--timeOut , var(--duration));

      }

      .menu__item::before{

          content: "";
          z-index: -1;
          width: 4.2em;
          height: 4.2em;
          border-radius: 50%;
          position: absolute;
          transform: scale(0);
          transition: background-color var(--duration), transform var(--duration);

      }


      .menu__item.active {

          transform: translate3d(0, -.8em , 0);

      }

      .menu__item.active::before{

          transform: scale(1);
          background-color: var(--bgColorItem);

      }

      .icon{

          width: 2.6em;
          height: 2.6em;
          stroke: #ffffff;
          fill: transparent;
          stroke-width: 1pt;
          stroke-miterlimit: 10;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-dasharray: 400;

      }

      .menu__item.active .icon {

          animation: strok 1.5s reverse;

      }

      @keyframes strok {

          100% {

              stroke-dashoffset: 400;

          }

      }

      .menu__border{

          left: 0;
          bottom: 99%;
          width: 10.9em;
          height: 2.4em;
          position: absolute;
          clip-path: url(#menu);
          will-change: transform;
          background-color: var(--bgColorMenu);
          transition: transform var(--timeOut , var(--duration));

      }

      .svg-container {

          width: 0;
          height: 0;
      }


      @media screen and (max-width: 50em) {
          .menu{
              font-size: .8em;
          }
      }

      @media (prefers-color-scheme: dark) {
        body {
          background-color: #1d1d27;
          color: #ce0000;
        }
      }

      @media (prefers-color-scheme: dark) {
        .statusbar {
          background-color: #1d1d27;
          color: #ce0000;
        }
      }