#settings-container {
  position: fixed;
  z-index: 6;
  display: flex;
  width: 100dvw;
  height: 4svh;
  text-align: center;
}

[type="radio"] {
  display: none;
}

label[for|="show"] {
  z-index: 6;
  width: 100%;
  background: var(--middle-green);
}

[id|="show"]:checked + label {
  background: var(--light-green);
}

input[name="settings-menu"] {
  display: none;
}

label[for|="tab"] {
  z-index: 3;
  height: 4svh;
  width: 100%;
  background: var(--darker-green);
  color: var(--light-green);
  text-align: center;
}

[id|="tab"]:checked + label {
  z-index: 4;
  background: var(--light-green);
  color: var(--darker-green);
}

[id|="page"] {
  position: absolute;
  z-index: 1;
  top: -100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: top 0.5s ease-in-out;
  background: var(--light-green);
  border-radius: 0 0 1vh 1vh;
  align-items: center;
}

[id$="dropdown"] {
  position: absolute;
  background: var(--light-green);
  z-index: 4;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: -100dvb;
  transition: top 0.5s ease-in-out;
  filter: drop-shadow(0dvb 0dvb 1dvb black);
}

#tab-a:checked ~ #page-A {
  top: 4svh;
}

#tab-b:checked ~ #page-B {
  top: 4svh;
}

#tab-c:checked ~ #page-C {
  top: 4svh;
}

#tab-d:checked ~ #page-D {
  top: 4svh;
}

#show-settings:checked ~ #settings-dropdown {
  top: 4svh;
}

#show-version:checked ~ #version-dropdown {
  top: 4svh;
  border-radius: 0 0 1vh 1vh;
}

#show-ribbit:checked ~ #ribbit-dropdown {
  top: 4svh;
  border-radius: 0 0 1vh 1vh;
}

#settings-dropdown {
  top: -100svh;
  flex-direction: row;
}

#version-dropdown {
  top: -100svh;
}

#ribbit-dropdown {
  top: -100svh;
}

[class|="settings"] {
  display: flex;
  flex-wrap: wrap;
  padding: 1svh;
  justify-content: space-between;
}

[class$="column"] {
  flex-direction: column;
}

[class$="row"] {
  flex-direction: row;
  max-width: 500px;
  width: 80%;
  border-bottom: 1px solid var(--darker-green);
}

[class$="row"]:last-child {
  border-bottom: none;
}

[id$="dropdown"] button,
[id|="page"] button,
[id|="page"] input,
[id|="page"] select,
[id|="page"] textarea {
  width: 40%;
  border-radius: 0.5svh;
  border: none;
  background: var(--lighter-green);
  outline: none;
  filter: drop-shadow(0dvb 0dvb 0.2dvb white);
}

[id$="dropdown"] button:only-child,
[id$="dropdown"] p:only-child,
[id|="page"] button:only-child,
[id|="page"] input:only-child,
[id|="page"] select:only-child {
  width: 60%;
}

[id$="dropdown"] img:only-child {
  width: 50%;
}

[class|="settings"]:has(img:only-child),
[class|="settings"]:has(p:only-child),
[class|="settings"]:has(button:only-child) {
  justify-content: center;
}