:root {
  --height_navigation: 50px;
}

html, body {
  position: relative;

  height: 100dvh;
  width: 100dvw;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: #ffffff;
}

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

iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 5%;

  height: calc(
    100dvh -
    var(
      --height_navigation
    )
  );
  width: 100dvw;

  border: 0;
}

nav {
  display: flex;

  justify-content: space-evenly;

  position: absolute;
  top: calc(
    100dvh -
    var(
      --height_navigation
    )
  );
  left: 0;
  right: 0;
  bottom: 0;

  height: var(
    --height_navigation
  );

  width: 100dvw;

  overflow-x: scroll;
  overflow-y: hidden;

  font-size: 8px;

  border-top: 1px solid #000000;
}

nav button {
  height: var(
    --height_navigation
  );

  line-height: 8px;

  padding: 0 2em;

  border: 0;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;

  background: #eeeeee;

  box-shadow: inset 0 0 5px rgba(
    255,
    255,
    255,
    0.5
  );

  cursor: pointer;
}

nav button:hover {
  background: #dddddd;

  box-shadow: inset 0 0 3px rgba(
    0,
    0,
    0,
    0.2
  );
}

nav button:active {
  background: #cccccc;

  box-shadow: inset 0 0 5px rgba(
    0,
    0,
    0,
    0.4
  );
}