*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:"Trebuchet MS",san-serif;
  /*letter-spacing: .05em; line-height: 1.4em;*/
}

:root {
  --barW: 40px;
  --barH: 8px;
  --barGap: 2px;
  --foreground: #000;
  --background: #fff;
  --menucolor:#770000;
  --mb-margin: 16px;
  --aniTime: 400ms ease-in-out;
  --mbHeight: calc(var(--barH) * 3 + var(--barGap) * 2);
}

.menu2 {
  --x-width: calc(var(--mbHeight) * 1.41421356237);
  display: flex;
  flex-direction: column;
  gap: var(--barGap);
  width: max-content;
  position: absolute;
  top: var(--mb-margin);
  right: var(--mb-margin);
  z-index: 3;
  cursor: pointer;
}

.menu2:has(input:checked) {
  --foreground: white;
  --background: #fff;

}

/*.menu2:has(input:focus-visible)::before,
.menu2:has(input:focus-visible)::after,
.menu2 input:focus-visible {
  border: 6px solid var(--foreground);
  box-shadow: 8px 8px 8px 8px var(--foreground);
}*/

.menu2::before,
.menu2::after,
.menu2 input {
  content: "";
  width: var(--barW);
  height: var(--barH);
  background-color: var(--background);
  border-radius: 9999px;
border: 2px solid #550000;
  transform-origin: left center;
  transition: 
    opacity var(--aniTime),
    width var(--aniTime),
    rotate var(--aniTime), translate var(--aniTime),
    background-color var(--aniTime);
}

.menu2 input {
  appearance: none;
  padding: 0;
  margin: 0;
  outline: none;
  pointer-events: none;
  align-self: center;
}

.menu2:has(input:checked)::before {
  rotate: 45deg;
  width: var(--x-width);
  translate: 0 calc(var(--barH) / -2);
}

.menu2:has(input:checked)::after {
  rotate: -45deg;
  width: var(--x-width);
  translate: 0 calc(var(--barH) / 2);
}

.menu2 input:checked {
  opacity: 0;
  width: 0;
}

.sidebar {
  position: absolute;
  right: 0px;
  top: 0px;
  transition: translate var(--aniTime);
  translate:  100%;
  padding: 0.5rem 5rem;
  padding-top: calc(var(--mbHeight) + var(--mb-margin) + 1rem);
  background-color: var(--menucolor);
  color: var(--background);
  min-height: 100vh;
  z-index: 2;
  text-align: center;
  line-height: 1.2em;
}

.menu2:has(input:checked) + .sidebar {
  translate: 0;
}

.content {
  margin: 0 auto;
  width:90%;
  background-color: #ddd;
}

.mni {margin: 20px;}
a.mni{color:#ccc;font-size:1.3em;text-transform: capitalize;}
a.mni:hover{color:#fff}