html {
  box-sizing: border-box;
}

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

*:focus {
  outline: none !important;
}

body {
  min-height: 100vh;
  margin: 0;
  background-color: var(--white);
  background-size: 100vw 100vh;
}

main {
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column-reverse;
  background-color: #c0c0c0;
}

.topbar {
  margin-bottom: auto;
  display: flex;
}

.topbar > * {
  width: 50%;
}

details.options > summary {
  list-style: none;
  font-size: 2rem;
  width: 100%;
  text-align: end;
  color: #008080;
  font-size: 1.5rem;
}

.connection-state {
  display: flex;
}

.connection-state > span {
  margin-block: 0.5rem;
  margin-inline: 0.25rem;
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 4px solid rgb(190, 0, 0);
  background-color: red;
}

.connection-state > span.on {
  border-color: green;
  background-color: rgb(0, 165, 0);
}

.connection-state > p {
  margin-block: 0.5rem;
}
.connection-state > button {
  height: 2rem;
}

.fullscreen {
  color: #818181;
  text-align: end;
  font-size: 2rem;
  margin-bottom: 1rem;
}

form {
  width: 100%;
  margin-block: 0.25rem;
}

#textinput {
  width: 100%;
  font-size: 1rem;
  height: 2rem;
}

.keyboard-buttons {
  margin-block: 0.25rem;
  display: flex;
  gap: 0.5rem;
}

.keyboard-buttons > button {
  width: 100%;
  height: 3rem;
}

.mouse-buttons {
  display: flex;
}

.mouse-buttons > button {
  width: 100%;
  height: 6.5rem;
  display: flex;
  padding: 0;
}

details.hold {
  width: 40%;
  margin: 2px;
  background-color: #818181;
  height: 30%;
}

details.hold[open] {
  height: 55%;
}

details.hold > summary::marker {
  font-size: 1.6rem;
}

details.hold > label {
  margin-top: 0.3rem;
}

.pad {
  width: 100%;
  height: 50vh;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 82vw;
}

.param {
  display: flex;
  flex-direction: column;
}

.mg-bot-1 {
  margin-bottom: 1rem;
}