html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  background: radial-gradient(circle at 50%, #EDF2F1, #7182A1 97%);
  user-select: none;
}

body.-found {
  background: radial-gradient(circle at 50%, #EDF2F1, rgb(206, 92, 0));
}

.selectable {
  user-select: text;
}

#screens {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.screen {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5fr 1fr;
}

#help-container {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 2;
  grid-row-end: -1;

  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;

  background-color: rgba(255,255,255,.2);
}

#help-element {
  grid-column-start: -2;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1;

  font-size: 10vh;
  margin: auto;
}

#help-element a {
  text-decoration: none;
}

#debug-element {
  grid-column-start: 1;
  grid-column-end: -2;
  grid-row-start: 1;
  grid-row-end: -1;

  margin: auto;
}

#navigation-container {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -2;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 4fr 1fr;
}

#nav-element {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 2;
  grid-row-end: 3;

  margin: auto;
  font-size: 35vh;
}

#nav-element.-blur {
  filter: blur(10px);
}

#nav-target {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: 2;

  margin: auto;
  font-size: 5vh;
}

#nav-target.-inactive {
  opacity: 0.5;
}

#nav-status-container {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 3;
  grid-row-end: 4;

  margin: auto;
}

#nav-status-input {
  font-size: 6vh;
}

#location-status-container {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: -2;
  grid-row-end: -1;

  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 1fr;

  background-color: rgba(255,255,255,.2);
}

#location-status-element {
  grid-column-start: 2;
  grid-column-end: -2;
  grid-row-start: 1;
  grid-row-end: -1;

  margin: auto;
}

.switch-screen.left {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: -1;

  margin: auto;
}

.switch-screen.right {
  grid-column-start: -2;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1;

  margin: auto;
}

#personal-container {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -2;

  margin: auto;
  font-size: 10vh;
}

#personal-status-container {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: -2;
  grid-row-end: -1;

  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 1fr;

  background-color: rgba(255,255,255,.2);
}

#personal-refcode {
  grid-column-start: 2;
  grid-column-end: -2;
  grid-row-start: 1;
  grid-row-end: -1;

  margin: auto;
}

#account-deletion-container {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -2;

  display: grid;

  margin-left: auto;
  margin-right: auto;
  margin-top: auto;

  font-size: 7vh;
}


#points-container {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -2;

  margin: auto;
  font-size: 10vh;
}

#points-container table{
  font-size: 5vh;
}

#points-status-container {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: -2;
  grid-row-end: -1;

  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 1fr;

  background-color: rgba(255,255,255,.2);
}

#upload-file-target {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 4;
  grid-row-end: -1;

  margin: auto;
}

#rating-container {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 4;
  grid-row-end: -1;

  margin: auto;

  font-size: 5vh;
}

#rating-container input[type=radio] {
  display: none;
}

#rating-container input[type="radio"]:checked+label {
  background-color: rgba(0,0,0,.5);
}

#upload-file-input {
  display: none;
}

#upload-file-target {
  font-size: 5vh;
}

.-running{
  opacity: 1;
}

.-done{
  animation: 3s ease 0s normal forwards 1 doneout;
}

@keyframes doneout {
  0% { opacity:1; }
  66% { opacity:1; }
  100% { opacity:0; }
}

.-hidden {
  display: none;
}

#permission-screen {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1;
}

#permission-container {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -2;

  display: grid;
}

#legal-container {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -2;

  display: grid;

  margin-left: auto;
  margin-right: auto;
  margin-top: auto;

  font-size: 7vh;
}

.permission-element {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1;

  font-size: 30vh;
  margin: auto;
  
  z-index: 2;
}

.highlight {
  border-radius:50%;
  border: 0.8em solid white;

  box-sizing: border-box;
  animation: pulsing 2s infinite;
  z-index: 1;
}

@keyframes pulsing {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  70% {
    transform: scale(1);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.medialink {
  font-size: 5vh;
  margin-top: 0px;
  margin-bottom: 0px;
}

.media {
  max-height: 30vh;
  display: block;
}

.heading {
  text-align: center;
}