.hamburger-icon {
  position: relative;
  z-index: 2;
  top: 5vh;
  left: .5vh;
  width: 3vh;
}

.hamburger-icon span {
  height: .3vh;
  width: 2.4vh;
  background-color: var(--textColor);
  display: block;
  margin: .3vh 0 .3vh 0;
  transition: 0.7s ease-in-out;
  transform: none;
}

input.hamburger-checkbox {
  position: absolute;
  z-index: 3;
  top: 5vh;
  left: 1vh;
  width: 2vh;
  opacity: 0;
  height: 3vh;
}

#openmenu:checked ~ .menu-pane {
  left: 0;
  top: 4vh;
  transform: translateX(0);
}

#openmenu:checked ~ .hamburger-icon span:nth-of-type(2) {  
  background-color: var(--menuTxtColor);
  transform: translate(0%, 175%) rotate(-45deg);
}

#openmenu:checked ~ .hamburger-icon span:nth-of-type(3) {  
  background-color: var(--menuTxtColor);
  transform: rotate(45deg);
}

#openmenu:checked ~ .hamburger-icon span:nth-of-type(1) {  
  background-color: var(--menuTxtColor);
  opacity: 0;
}

#openmenu:checked ~ .hamburger-icon span:nth-of-type(4) {  
  background-color: var(--menuTxtColor);
  opacity: 0;
}

div.menu-pane {
  border: thin #dddddd solid;
  position: absolute;
  transform: translateX(-105vh);
  transform-origin: (0, 0);
  width: 28vh;
  transition: 0.6s ease-in-out;
  background-image: linear-gradient(to bottom right, #000000, var(--menuBkgColor));
  z-index: 1;
}

.menu-pane nav {
  padding: 8vh 1.5vh 1.5vh 1.5vh;
  font-size: var(--fontSize);
}

.section {
  position: static;
  display:  block;
  color: var(--menuTxtColor);
  border-bottom: thin var(--menuTxtColor) solid;
  margin: 0 0 1vh 0;
  width: 23.5vh;
  height: 1.6vh;
  padding: 1vh 1vh 1.5vh 0;
}

.section p {
  color: var(--menuTxtColor);
  margin: 0;
  text-align: left;
}
/*
nav form {
  text-align: left;
  width: 25vh;
  box-sizing: border-box;
}

@scope (#kwdform) {
 input:nth-of-type(1) {
   width: calc(20vh - 2em);
   box-sizing: border-box;
 }

 input:nth-of-type(2) {
   width: 2em;
 }
}*/

nav form {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  position: static;
}

@scope (#kwdform) {
 input:nth-of-type(1) {
   width: calc(22vh - 2em);
 }

 input:nth-of-type(2) {
   width: 2em;
 }
}

nav > a {
  color: var(--menuTxtColor);
  display: block;
  text-decoration: none;
  text-align: left;
  padding-bottom: .5em;
  font-size: var(--fontSize);
  text-shadow: none;
}

nav > a img {
  height: 1.6em;
  padding: .5vh .5vh .15vh 0;
  vertical-align: text-bottom;
}

nav label {
  color: var(--menuTxtColor);
  display: block;
  text-align: left;
  padding-left: .5vh;
}

label input {
   float: right;
   margin: 1vh 2vh 0 0;
   accent-color: black;
   transform: scale(1.5);
}

div.opt {
   position: relative;
   text-align: left;
   color: var(--menuTxtColor);
   padding-left: .5vh;
   line-height: 2em;
   width: 25vh;
}

.opt span {
   float: right;
   margin-right: 1vh;
   font-size: var(--fontSize);;
}

.subopt {
   position: relative;
   text-align: left;
   color: var(--menuTxtColor);
   margin-left: 1vh;
   padding-left: 1.5vh;
   line-height: 2em;
   width: 22.5vh;
}

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: static;
}

.flex-container a img {
   height: 4vh;
   margin: .5vh 1.25vh 0 1.25vh;
}

.flex-container > div {
   height: var(--fontSize);
   /*width: 6vh;*/
   background-color: #666666;
   position: relative;
   margin: 0 0 1vh 0;
   /*padding: 0 1vh 0 1vh;*/
   border-radius: 1vh;
   box-sizing: border-box;
}

#toggleLeft {
   position: relative;
   font-size: var(--fontSize);
   top: -.8vh;
   left: 0;
   opacity: 1;
}

#toggleRt {
   position: relative;
   font-size: var(--fontSize);
   top: -.8vh;
   left: 0;
   opacity: 0;
}

#toggleLeft:hover {
   opacity: 1;
}

#toggleLeft:hover + a {
   opacity: 0;
}

#toggleRt:hover {
   opacity: 1;
}

#toggleLeft:has(+ a:hover) {
   opacity: 0;
}

/*.subopt input {
   padding-right: 1vh;
}*/

.subopt span {
   float: right;
   margin-right: 1em;
   font-size: var(--fontSize);;
}