.maform{
  outline:0;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: transform 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
          transition: transform 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
  /*filter: drop-shadow(0 0 2px rgb(100 0 0 / 0.9 ));*/
}
.maform:focus {
    outline:0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

.maform .m4 {
  -webkit-transform: rotate3d(1, 0, 0, 0deg);
          transform: rotate3d(1, 0, 0, 0deg);
	-webkit-transition: transform 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
	        transition: transform 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.maform:focus .m4 {
	-webkit-transform: rotate3d(1, 0, 0, 180deg);
          transform: rotate3d(1, 0, 0, 180deg);
}

.maform .leg {
  -webkit-transform: rotate3d(1, 1, 0, 0deg);
          transform: rotate3d(1, 1, 0, 0deg);
	-webkit-transition: transform 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
	        transition: transform 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.maform:focus .leg {
   -webkit-transform: rotate3d(1, 1, 0, 180deg);
           transform: rotate3d(1, 1, 0, 180deg);
}

.maform .m1 {
  -webkit-transform: rotate3d(1, 0, 0, 0deg);
          transform: rotate3d(1, 0, 0, 0deg);
	-webkit-transition: transform 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
	        transition: transform 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.maform:focus .m1 {
  -webkit-transform: rotate3d(1, 0, 0, 180deg);
          transform: rotate3d(1, 0, 0, 180deg);
}

.ddd {transform: perspective(50px);
  transform-style: preserve-3d;
}

.m1, .m2, .m3, .m4 {
  /*filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.1 ));*/
}
.float {
position:fixed;
  top:0;
  right:0;
  margin-top:0;
}
.none { display:none;}
.box {border-style: solid;}

.cent:has(.maform) {
  display: flex;
  justify-content: right;
  margin: auto;
  margin-top:-3px;
  --wb:75px;
  width:98vw;
  max-width: 600px;
  height: calc( var(--wb) / 1.6 );
  background-color: var(--bga);
  border-radius: 5px;
  z-index: 9999;
  backdrop-filter: blur(3px) contrast(0.3) brightness(1.0);
  box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.2 ));

	transition: margin 0.2s cubic-bezier(1, 0, 0, 1), height 0.2s cubic-bezier(1, 0, 0, 1);

/*	 transition-property: width, height;
   transition-duration: 0.3s;
   transition-timing-function: cubic-bezier(0.2,0.8, 0.450, 0.940); */
}

.cent:has(.maform:focus) {
  height: calc( 100vh - 20px );
  margin: 0;
  transition: margin 0.2s cubic-bezier(1, 0, 0, 1), height 0.2s cubic-bezier(1, 0, 0, 1);
}

#menu {
    position: fixed;
    margin:auto;
    width: 100vw;
    left:0;
    z-index: 999;
}

#logo{min-width:60px;min-height:60px;margin-top:5px;
  fill: var(--txt);
  stroke: var(--bg);
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.3 ));
}