html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

#topbar {
  margin-left: 0;
  height: 9.8vh;
  padding: 0.5vh;
  overflow-x: auto;
  display: flex;
  white-space: nowrap;
  border-bottom: 0.5vh solid #42454a;
}

.topbutton {
  height: 8.8vh;
  width: 8.8vh;
  margin: 0.5vh;
  cursor: pointer;
}

#piecemenu {
  position: absolute;
  top: 11.3vh;
  height: 88.7vh;
  padding: 0.5vh;
  overflow-y: auto;
}

.piecebut {
  width: 7.933vh;
  height: 7.933vh;
  margin: 0.5vh;
  border: 0.5vh solid #42454a;
  border-radius: 1vh;
  display: inline-block;
  background-color: #abcdef;
  cursor: pointer;
}

#deletepartbut {
  position: absolute;
  top: 1vh;
  right: 1vh;
  width: 8vh;
  height: 8vh;
  cursor: pointer;
}


@media (min-aspect-ratio: 1/1) {
  #c {
    position: absolute;
    width: calc(100vw - 50vh);
    height: 100vh;
    left: 50vh;
    display: block;
  }

  #menu {
    position: absolute;
    height: 100vh;
    width: 50vh;
    background-color: white;
  }

  #openmenubut {
    display: none;
  }

  #closemenubut {
    display: none;
  }

  #anglesliderz {
    position: absolute;
    bottom: 1vh;
    left: 51vh;
    width: calc(100vw - 52vh);
    height: 3vh;
  }
  #anglelabelz {
    position: absolute;
    bottom: 4vh;
    left: 51vh;
    font-size: 2vh;
  }

  #angleslidery {
    position: absolute;
    bottom: 6vh;
    left: 51vh;
    width: calc(100vw - 52vh);
    height: 3vh;
  }
  #anglelabely {
    position: absolute;
    bottom: 9vh;
    left: 51vh;
    font-size: 2vh;
  }

  #anglesliderx {
    position: absolute;
    bottom: 11vh;
    left: 51vh;
    width: calc(100vw - 52vh);
    height: 3vh;
  }
  #anglelabelx {
    position: absolute;
    bottom: 15vh;
    left: 51vh;
    font-size: 2vh;
  }

  #lightbut {
    position: absolute;
    top: 1vh;
    left: 51vh;
    width: 8vh;
    height: 8vh;
    cursor: pointer;
  }

  #zoomslider {
    display: none;
  }
  #zoomlabel {
    display: none;
  }
}

@media (max-aspect-ratio: 1/1.000001) {
  #c {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: block;
  }

  #menu {
    position: absolute;
    height: 100vh;
    width: 100vw;
    transition: left 0.25s;
    top: 0;
    left: -100vw;
    background-color: white;
  }

  #openmenubut {
    position: absolute;
    height: 10vh;
    width: 10vh;
    transition: left 0.25s;
    top: 0;
    left: 0;
    display: block;
    cursor: pointer;
  }

  #closemenubut {
    display: inline;
  }

  .topbutton {
    flex: 0 0 8.8vh;
    height: 8.8vh;
    box-sizing: border-box;
  }

  #anglesliderz {
    position: absolute;
    bottom: 1vh;
    left: 1vh;
    width: calc(100vw - 2vh);
    height: 3vh;
  }
  #anglelabelz {
    position: absolute;
    bottom: 4vh;
    left: 1vh;
    font-size: 2vh;
  }

  #angleslidery {
    position: absolute;
    bottom: 6vh;
    left: 1vh;
    width: calc(100vw - 2vh);
    height: 3vh;
  }
  #anglelabely {
    position: absolute;
    bottom: 9vh;
    left: 1vh;
    font-size: 2vh;
  }

  #anglesliderx {
    position: absolute;
    bottom: 11vh;
    left: 1vh;
    width: calc(100vw - 2vh);
    height: 3vh;
  }
  #anglelabelx {
    position: absolute;
    bottom: 15vh;
    left: 1vh;
    font-size: 2vh;
  }

  #lightbut {
    position: absolute;
    top: 1vh;
    left: 11vh;
    width: 8vh;
    height: 8vh;
    cursor: pointer;
  }

  #zoomslider {
    display: block;
    position: absolute;
    top: 1vh;
    left: 11vh;
    width: calc(100vw - 12vh);
    height: 3vh;
  }
  #zoomlabel {
    display: block;
    position: absolute;
    top: 4vh;
    left: 11vh;
    font-size: 2vh;
  }
}