@font-face {
  font-family: roboto;
  src: url("../data/Roboto-Thin.ttf");
}
.block {
  display: block;
}

.tp-dfwv {
  width: 50%;
}

.center {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
  color: aliceblue;
  position: absolute;
  margin: 0px;
}

#flags {
  z-index: 11;
  position: absolute;
  top: 20px;
  right: 40px;
  width: 30px;
  min-height: 30px;
  height: 100px;
}
#flags:hover {
  display: block !important;
}
#flags:hover .content {
  display: block !important;
}
#flags .content {
  display: none;
}
#flags img {
  width: 100%;
  height: 100%;
}

.up {
  z-index: 10;
}

.up11 {
  z-index: 11;
}

.hide {
  display: none !important;
}

.inverted {
  background-color: white;
  color: black;
}

.full {
  background-color: black;
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.wrap {
  white-space: pre-wrap;
}

h1, .center {
  justify-content: center;
  white-space: pre-wrap;
}

/* Syntax Highlighter */
.string {
  color: #f1fa8c;
}

.number {
  color: #f4b86c;
}

.boolean {
  color: #ff79c6;
}

.null {
  color: #50f97a;
}

.key {
  color: #fff;
}

input[type=range] {
  transform: rotate(-90deg);
  height: 10px;
  margin: 0px;
}

button {
  white-space: nowrap;
  margin: 10px;
  display: block;
  font-size: medium;
  text-indent: 0px;
  padding: 5px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 20px;
  box-shadow: 0px 0px 8px 4px #888888;
  background-color: aliceblue;
  border: black solid 1px;
}

#request, #welcome, .column2 {
  display: grid;
  grid-template-columns: 50% 50%;
  justify-content: center;
  align-items: center;
  row-gap: 0px;
}
#request h1, #request h2, #welcome h1, #welcome h2, .column2 h1, .column2 h2 {
  height: 20vh;
  margin: auto !important;
}
@media (orientation: portrait) {
  #request h1, #request h2, #welcome h1, #welcome h2, .column2 h1, .column2 h2 {
    margin-top: 15vh !important;
  }
}
#request .content, #welcome .content, .column2 .content {
  margin: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#request .content button, #welcome .content button, .column2 .content button {
  margin: 0px;
}
#request .content .content_buton > *, #welcome .content .content_buton > *, .column2 .content .content_buton > * {
  display: inline-flex;
  text-align: center;
  margin: 0px;
  margin-bottom: 15px;
}
#request .content .content_buton > .block, #welcome .content .content_buton > .block, .column2 .content .content_buton > .block {
  display: inline-flex;
  text-align: center;
  margin: 0px;
  padding: 0px;
  margin-bottom: 15px;
}

@media (orientation: landscape) {
  #display {
    font-size: 8vw;
    flex-direction: row;
  }
}
@media (orientation: portrait) {
  #display {
    font-size: 8vh;
    flex-direction: column;
    text-align: center;
  }
}

@media (orientation: landscape) {
  #request, #welcome, .column2 {
    grid-template-columns: 50% 50%;
  }
}
@media (orientation: portrait) {
  #request, #welcome, .column2 {
    grid-template-columns: 100%;
  }
}

.started {
  background-color: #888888;
}

.compass {
  min-width: 260px;
  min-height: 260px;
  width: 260px;
  height: 260px;
}

.popup {
  position: absolute;
  margin: 5%;
  top: 0px;
  left: 0px;
  width: 90% !important;
  height: 90% !important;
  background-color: #2b2b2b;
  border: whitesmoke 3px solid;
  border-radius: 20px;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #444444;
  border: whitesmoke 2px solid;
  padding: 5px;
  border-radius: 20px;
}