:root {
  --primary-color: #ff9;
  --primary-color-low: #ff9d;
  --background: #102;
  --secondary-color: #fffd;
}
* {
  font-family: monospace;
  color: #0000;
  margin: 0;
  text-decoration: none;
}
a {
  color: var(--secondary-color);
}
a:hover {
  cursor: pointer;
  color: var(--primary-color);
}
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: var(--background);
}
button{
  border: none;
  cursor: pointer;
  font-size: 2rem;
  background: none;
}
canvas {
  image-rendering: pixelated;
}


.direction {
  font-size: 2rem;
}
.hide {
  display: none !important;
}
.key_interact {
  font-size: 1.25rem;
}
.spacer {
  flex-grow: 1;
}


#left, #right, #top, #bottom {
  flex-grow: 1;
}


#canvas {
  height: min(100vh, 100vw);
  width: min(100vh, 100vw);
}
#center {
  height: 100vh;
  width: min(100vh, 100vw);
  display: flex;
  flex-direction: column;
}
#content {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}
#durations {
  display: flex;
  margin-top: 7rem;
  width: 100vw;
}
#fps {
  text-align: right;
}
#notice_text {
  margin-top: 8rem;
  display: flex;
  width: 100vw;
}
#notice_text span {
  color: var(--primary-color-low);
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 10rem;
}
#overlay {
  display: flex;
  position: absolute;
  width: 100vw;
  height: 100vh;
}
#overlay-left {
  display: flex;
  flex-direction: column;
}
#overlay-left a {
  padding-top: 1rem;
  padding-left: 1rem;
}
#overlay p {
  color: var(--primary-color);
  padding: 1rem;
}
#overlay {
  z-index: 2;
}
#overlay-right {
  display: flex;
  flex-direction: column;
}
#overlay-right > * {
  color: var(--primary-color);
  padding: 0;
}
#overlay-right svg {
   fill: #fff8;
   max-width: 2rem;
   height: 2rem;
  cursor: pointer;
  margin-right: 1rem;
}
#overlay-right svg:hover {
  fill: #fffd;
}
#overlay-right #fps {
  color: #fffd;
}
#overlay-right a {
  align-items: end;
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}


#vic_text button {
  flex-direction: column;
  display: flex;
}

#vic_text button:hover {
  color: var(--primary-color);
}

#vic_text button * {
    color: var(--primary-color-low);
}
#vic_text button:hover * {
    color: var(--primary-color);
}

.vt, .direction {
  margin-bottom: 0.5rem;
}


#victory {
  pointer-events: none;
  z-index: 5;
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
}
#vic_text * {
  pointer-events: all;
}
#victory p {
  color: #ff90;
}
#victory_main {
  margin-top: 15vh;
  margin-bottom: auto;
}
#victory.yes {
  background-color: #fff1;
}
#victory.yes p {
  font-size: 3rem;
  color: #ff9d;
  text-align: center;
}
#victory.yes .spacer {
  width: 0;
  flex-grow: 1;
}
#vic_text {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
}
#vic_text button {
  width: 15rem;
}
#victory.yes #victory_duration_1 {
  font-size: 2rem;
}
#victory_duration {
  flex-grow: 0;
}
#victory_duration_lower, #victory_duration_higher {
  flex-grow: 1;
  width: 0;
}
#victory.yes #victory_duration_lower, #victory.yes #victory_duration_higher {
  font-size: 1.5rem;
  align-content: center;
  text-wrap: nowrap;
}
#victory.yes #victory_duration_lower {
  text-align:right;
  padding-right: 1rem;
  direction: rtl;
}
#victory.yes #victory_duration_higher {
  text-align:left;
  padding-left: 1rem;
}