div.centerer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h2.wrap {
  white-space: normal;
  max-width: 200px; /* Magic number */
}

.sr-only {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

/* Back button */
div.back-arrow-container {
  display: flex;
  position: relative;
  width: 100%;
}

button.back-arrow {
  /* Get rid of default button styling. */
  /* border: 0px;
  padding: 0px;
  content: ''; */
  /* float: left; */
}

/* Intro menu */
div#menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Needed so the log scrolls correctly. */
  width: 100%;
  height: 100%;
}

p.log-button-row {
  display: flex;
}

div#inner-container button.log-info {
  /* Get rid of default button styling. */
  border: 0px;
  padding: 0px;
  margin: 0px;
  background: url("info.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.8;
  width: 30px;
  height: 38px;
  transition: opacity 0.2s;
}

div#inner-container button.log-info:hover, button.log-info:focus {
  opacity: 1;
}

div#inner-container button#log {
  margin: 0px;
}

div#inner-container button.log-info:hover, button.log-info:focus {
  opacity: 1;
}

div.log-button-container {
  position: relative;
}

div.frozen-log {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(60deg, transparent 30%, rgba(255, 255, 255, 0.8) 31%, transparent 32%, transparent),
              linear-gradient(140deg, transparent 40%, rgba(255, 255, 255, 0.8) 41%, transparent 42%, transparent),
              linear-gradient(400deg, transparent 60%, rgba(255, 255, 255, 0.8) 61%, transparent 62%, transparent),
              linear-gradient(15deg, transparent 60%, rgba(255, 255, 255, 0.8) 61%, transparent 62%, transparent),
              linear-gradient(20deg, transparent 20%, rgba(255, 255, 255, 0.8) 21%, transparent 22%, transparent),
              linear-gradient(100deg, transparent 80%, rgba(255, 255, 255, 0.8) 81%, transparent 82%, transparent),
            rgba(0, 255, 255, 0.3);
}

p.ship-log-note {
  margin: 1em;
}

div#inner-container img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

div#gyro-setup {
  flex-direction: column;
  align-items: center;
}

/* Only needed with default website CSS */
div#inner-container h1 {
  font-size: 1.5em;
}

div#inner-container h2 {
  font-size: 1em;
  text-align: center;
}

/* Make buttons look tolerable */
/* Not needed with the default website CSS */
/* div#inner-container button {
  padding: 0.6em 1em;
  border-radius: 6px;
  border: 1px solid black;
}

div#inner-container button:hover {
  filter: brightness(70%);
} */

/* Make special GPH site buttons look disabled */
button:disabled:not(#log){
  background-color: #999;
  opacity: 0.7;
}

button:disabled:hover {
  border: 1px solid #bbb;
  color: #555;
}

div#start-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

/* Inter-level styling */

/* The fancy stars stuff is in star-animation.css */
div#inter-level {
  display: none; /* flex when visible */
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div#inter-level h1#inter-level-title {
  color: var(--font-color-dark);
}

div#inter-level div#inter-level-body {
  color: #FFF;
  display: flex; /* OK since parent, div#inter-level, is usually hidden. */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

div#inter-level div#inter-level-body button {
  color: #CCC;
}

div#inter-level div#inter-level-body button:hover {
  color: #FFF;
  border-color: #FFF;
}

/* Slot choice screen styling */
div.slot-choice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.slot-choice button.slot-button {
  height: auto;
}

div.slot-choice p {
  margin-bottom: 0px;
  line-height: 2em;
}

div.slot-choice p.slot-id {
  font-size: 1.5em;
  color: #333;
}

div.slot-choice p:not(.slot-id) {
  font-size: 1em;
}

/* Log screen styling */
div#log-holder {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

/* Important styling for panel */
div#outer-container::backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
}

div#inner-container {
  background-color: white;
  height: 100vh;
  width: 400px;
  max-width: 90vw;
  min-width: 200px;
}

div#rotation-container {
  transition: transform 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

div#rotation-container.inverted {
  transform: rotate(180deg);
}

@keyframes horizontal-shaking {
 0% { transform: translateX(0) }
 25% { transform: translateX(5px) }
 50% { transform: translateX(-5px) }
 75% { transform: translateX(5px) }
 100% { transform: translateX(0) }
}

div#inner-container.shaking {
  animation: horizontal-shaking 0.15s infinite;
}

div#inner-container h2 {
  margin: 0px;
}

div#inner-container {
  border: 1px solid black;
  padding: 5px;
  overflow: hidden;
}

div#level {
  max-height: 95vh;
  width: 400px;
  max-width: 90vw;
  min-width: 200px;
  position: relative; /* Needed for safe overlay */
}

div#top {
  width: 100%;
}

div#progress {
  height: 10vh;
}

h1#command {
  max-height: 20vh;
  margin: 0px;
}

div#panel {
  display: flex;
  flex-wrap: wrap;
  height: 75vh;
  width: 400px;
  max-width: min(400px, 90vw);
  border: 1px solid black;
  transition: filter 0.5s linear;
}

div#panel > * {
  flex-grow: 1;
}

div.dangle-container > * {
  background-color: #FFF;
}

/* Ship progress */
div#progress {
  position: relative;
}

img#ship {
  position: absolute;
  height: 100%;
  transform: translate(-50%, 0);
  transition: left 1s;
}

div#fire {
  position: absolute;
  height: 100%;
  width: 100%;
  transition: left 1s;
}

/* Color fade-in-fade-out */
div#top {
  position: relative;
}

div#red-overlay {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0;
  transition: opacity 0.5s;
}

div#red-overlay.visible {
  opacity: 0.8;
}

/* SAFE flashes */
div#safe-overlay {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: green;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

div#safe-overlay.visible {
  opacity: 0.8;
}

div#safe-overlay img.safe-image {
  max-width: 100px;
  height: auto;
}

/* Command timer */

/* See https://stackoverflow.com/questions/31109581/javascript-timer-progress-bar */
/* and https://css-tricks.com/restart-css-animation/ */
div#command-timer {
  width: 100%;
}

div#command-timer div.animating {
  width: 100%;
  height: 5px;
  animation: progressbar-countdown;
  /* Placeholder, this will be updated using javascript */
  animation-duration: 40s;
  /* We stop in the end */
  animation-iteration-count: 1;
  /* Stay on pause when the animation is finished finished */
  animation-fill-mode: forwards;
  /* We start paused, we start the animation using javascript */
  animation-play-state: paused;
  /* We want a linear animation, ease-out is standard */
  animation-timing-function: linear;
}

@keyframes progressbar-countdown {
  0% {
    width: 100%;
    background: white;
  }
  100% {
    width: 0%;
    background: red;
  }
}

/* Individual controls */

/* Slider */
.slide-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  position: relative;
  width: 100%;
  height: 100%;
}

/* The slider itself */
.slide-and-label .slider {
  /* -webkit-appearance: none;  /* Override default CSS styles */
  /* appearance: none;
  background: #d3d3d3; /* Grey background */
  /* opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  /* -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  /* transition: opacity .2s;
}

.slide-and-label:not(.vertical) .slider {
  /* width: calc(100% - 15px); /* Full-width */
  /* height: 15px; /* Specified height */
  /* margin-top: 1.5em; /* This is where the labels are. */
  /* margin-left: 15px; */
  /* margin-right: 15px; */
}

.slide-and-label:not(.vertical) .slider {
  margin-top: 1.5em; /* This is where the labels are. */
  width: calc(100% - 10px);
}

.slide-and-label.vertical input[type=range][orient=vertical].slider {
  -webkit-appearance: slider-vertical; /* Chromium */
  margin-left: 1.5em; /* This is where the labels are. */
  width: 15px;
  /* min-height: 50px;
  max-height: calc(100% - 15px);
  width: 15px;
  margin-left: 1.5em; /* This is where the labels are. */
  /* margin-top: 15px;
  margin-bottom: 15px; */

}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
  /* -webkit-appearance: none; /* Override default look */
  /* appearance: none; */
  /* background: #222; Background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  /* background: #222; Background */
  cursor: pointer; /* Cursor on hover */
}

.slide-and-label:not(.vertical) .slider::-webkit-slider-thumb {
  /* width: 10px; Set a specific slider handle width */
  /* height: 15px; Slider handle height */
}

.slide-and-label:not(.vertical) .slider::-moz-range-thumb {
  /* width: 10px; Set a specific slider handle width */
  /* height: 15px; Slider handle height */
}


.slide-and-label.vertical .slider::-webkit-slider-thumb {
  /* width: 15px;
  height: 10px; */
}

.slide-and-label.vertical .slider::-moz-range-thumb {
  /* width: 15px;
  height: 10px; */
}

.slide-and-label:not(.vertical) .slide-labels {
  width: calc(100% - 25px);
  position: relative;
}

.slide-and-label.vertical .slide-labels {
  /* Non-GPH site */
  /* height: calc(100% - 25px); */
  height: calc(100% - 35px);
  margin-bottom: 17px;
  position: relative;
}

.slide-and-label {
  width: 100%;
  height: 100%;
}

.slide-and-label:not(.vertical) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.slide-and-label.vertical {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* Switch */
.switch-container {
  border: 1px solid black;
  --toggle-indicator-size: 24px;
  --track-height: calc(var(--toggle-indicator-size) + 5px);
  --track-width: calc(var(--toggle-indicator-size) * 2.5);
  --highContrastModeSupport: solid 2x transparent;
  --dark: #000;
  --mid: #777;
  --light: #eee;
  --track-border: var(--mid);
  --track-background: var(--light);
  --speed: 0.5s;
  --focus-ring: 0px 0px 5px black;
  display: flex;
  align-items: center;
  justify-content: center;
  background: inherit;
  position: relative;
  width: 100%;
  height: 100%;
}

.switch-name {
	border-radius: 100px;
	font-weight: 700;
	margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.switch-name:last-of-type {
  margin: 0;
}

/* Since we can't style the checkbox directly, we "hide" it so we can draw the toggle. */
.toggle__input {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.toggle__input:not([disabled]):active + .toggle-track,
	.toggle__input:not([disabled]):focus + .toggle-track {
  box-shadow: var(--focus-ring);
}

.toggle-track {
	background: var(--track-background);
	border: 1px solid var(--track-border);
	border-radius: 100px;
	cursor: pointer;
	display: flex;
	position: relative;
}

.toggle-track:not(.vertical) {
	height: var(--track-height);
	margin-right: 12px;
	width: var(--track-width);
}

.toggle-track.vertical {
  height: var(--track-width);
  width: var(--track-height);
  margin-top: 5px;
  margin-bottom: 5px;
}

.toggle-indicator {
	align-items: center;
	background: var(--dark);
	border-radius: var(--toggle-indicator-size);
	bottom: 2px;
	display: flex;
	height: var(--toggle-indicator-size);
	justify-content: center;
	left: 2px;
	position: absolute;
	transition: var(--speed);
	width: var(--toggle-indicator-size);
}

.toggle__input:checked + .toggle-track:not(.vertical) .toggle-indicator {
	transform: translateX(calc(var(--track-width) - var(--track-height)));
}


.toggle__input:checked + .toggle-track.vertical .toggle-indicator {
	transform: translateY(calc(var(--track-height) - var(--track-width)));
}

.toggle__input:checked + .toggle-track {
	background: #666;
}

@media screen and (-ms-high-contrast: active) {
	.toggle-track {
		border-radius: 0;
	}
}

/* Knob styling */
.knob-with-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  position: relative;
  width: 100%;
  height: 100%;
}

.knob-container {
  position: relative;
  width: 5em;
  height: 5em;
}

.knob-numbers {
  /* Make sure people can still turn the dial! */
  pointer-events: none;
  width: 4em;
  height: 4em;
  position: absolute;
  left: 0.5em;
  top: 0.5em;
}

x-knob {
  width: 3em;
  height: 3em;
  position: absolute;
  left: 1em;
  top: 1em;
}

/* Text button styling */
div.textbuttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  position: relative;
  width: 100%;
  height: 100%;
}

/* Number button styling */
div.numberbuttons-with-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  position: relative;
  width: 100%;
  height: 100%;
}

/*div.numberbuttons-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
}

button.numberbutton {
  font-family: monospace;
} */

/* Test number button styling */
.button-wrap {
  position: relative;
  text-align: center;
  top: 50%;
  margin-top: -2.5em;
  position: relative;
}

.button-label {
  display: inline-block;
  padding: 0.5em 0.5em;
  cursor: pointer;
  color: black;
  border-radius: 0.25em;
  background: #eee;
  border: 1px solid black;
  /* box-shadow: 0 3px 10px rgba(0,0,0,0.2), inset 0 -3px 0 rgba(0,0,0,0.22); */
  transition: 0.3s;
  user-select: none;
  font-family: monospace;
}

.button-label h1 {
  font-size: 1em;
}

.button-label:hover {
  filter: brightness(70%);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2), inset 0 -3px 0 rgba(0,0,0,0.32);
}

.button-label:active {
  transform: translateY(2px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2), inset 0px -1px 0 rgba(0,0,0,0.22); 
}

.radio-label:checked + .button-label {
  background: gray;
  color: white;
}

.radio-label:hover + .button-label {
  filter: brightness(70%);
}

.radio-label:focus + .button-label {
  filter: brightness(70%);
}

/* Plain button with label styling */
.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
  position: relative;
  width: 100%;
  height: 100%;
}

/* Ice styling */
div#inner-container button.frozen {
  /* Get rid of default button styling. */
  border: 0px;
  padding: 0px;
  content: '';
  /* Get rid of my inner-container button styling. */
  border-radius: 0px;
  /* Now do the rest. */
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(60deg, transparent 30%, rgba(255, 255, 255, 0.8) 31%, transparent 32%, transparent),
              linear-gradient(140deg, transparent 40%, rgba(255, 255, 255, 0.8) 41%, transparent 42%, transparent),
              linear-gradient(400deg, transparent 60%, rgba(255, 255, 255, 0.8) 61%, transparent 62%, transparent),
              linear-gradient(15deg, transparent 60%, rgba(255, 255, 255, 0.8) 61%, transparent 62%, transparent),
              linear-gradient(20deg, transparent 20%, rgba(255, 255, 255, 0.8) 21%, transparent 22%, transparent),
              linear-gradient(100deg, transparent 80%, rgba(255, 255, 255, 0.8) 81%, transparent 82%, transparent),
            rgba(0, 255, 255, 0.8);
}

div#inner-container button.frozen.click {
  background: linear-gradient(60deg, transparent 30%, rgba(255, 255, 255, 0.8) 31%, transparent 32%, transparent),
              linear-gradient(140deg, transparent 40%, rgba(255, 255, 255, 0.8) 41%, transparent 42%, transparent),
              linear-gradient(400deg, transparent 60%, rgba(255, 255, 255, 0.8) 61%, transparent 62%, transparent),
              linear-gradient(15deg, transparent 60%, rgba(255, 255, 255, 0.8) 61%, transparent 62%, transparent),
              linear-gradient(20deg, transparent 20%, rgba(255, 255, 255, 0.8) 21%, transparent 22%, transparent),
              linear-gradient(100deg, transparent 80%, rgba(255, 255, 255, 0.8) 81%, transparent 82%, transparent),
            rgba(0, 255, 255, 0.3);
}