document, body {
  margin: 0;
  color: #FFF;
  font-family: sans-serif;
  font-size: max(14px, min(2vh, 2vw));
  overflow: hidden;
  touch-action: none;
  
  cursor: url("graphics/cursor_1.png"), default;
}

table {
  /* Apparently the user agent stylesheet takes precedence over body here? Whaatt? */
  font-size: max(14px, min(2vh, 2vw));
}

body.tier2world {
  cursor: url("graphics/cursor_2.png"), default;
}

body.tier3world {
  cursor: url("graphics/cursor_3.png"), default;
}

.clickable {
  cursor: url("graphics/cursor_1_p.png"), pointer;
}

body.tier2world .clickable {
  cursor: url("graphics/cursor_2_p.png"), pointer;
}

body.tier3world .clickable {
  cursor: url("graphics/cursor_3_p.png"), pointer;
}

.icon {
  font-family: RPGAwesome, sans-serif;  
}

#science-button {
  font-size: max(28px, min(4vh, 4vw));
  animation: 2s infinite alternate excited;
  color: #4CF;
}

#science-button:hover {
  color: #0FF;
}

#learned-button {
  font-size: max(28px, min(4vh, 4vw));
  color: #FC4;
}

#learned-button:hover {
  color: #FF0;
}

@keyframes excited {
  from { transform: none; }
  15% { transform: none; }
  20% { transform: rotate(15deg); }  
  30% { transform: rotate(-15deg); }
  45% { transform: none; }
  90% { transform: none; }
  to { transform: translate(0, -50%); }
}

@keyframes slidein {
  from { transform: translate(-200%); }
  to { transform: none; }
}

@keyframes slideout {
  from { transform: none; }
  to { transform: translate(-200%); }
}

.blinky {
  animation: 4s infinite alternate blink;
}

@keyframes blink {
  from { opacity: 100%; }
  50% { opacity: 100%; }
  51% { opacity: 0%; }
  52% { opacity: 100%; }
  60% { opacity: 100%; }
  61% { opacity: 0%; }
  62% { opacity: 100%; }
  95% { opacity: 100%; }
  to {opacity: 0%; }
}

table {
  width: 100%;
  border-collapse: collapse;
}

.off-screen {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-200%, -200%);
}

.planet-title {
  color: #FFB;
  font-size: max(17px, min(2.4vh, 2.4vw));
  margin: 0.5rem 1rem;
}

.hover-outer {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;  
}

.hover-inner {
  display: inline-block;
  color: #FFF;
  background: #000;
  border: 1px solid #FFF;
  max-width: 50vw;
}

.textbox-container {
  position: absolute;
  left: 0;
  top: 0;  
}

.box {
  position: absolute;
  left: 0;
  top: 0;
  color: #FFF;
}

.box-frame {
  margin: 0.5rem 1rem;
  background: #000;
}

.box-center {
  position: relative;
  text-align: center;
  left: -50%;
  padding: 0.25rem 0.5rem;
  background: #000;
}

.projects tr {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

.projects td {
  padding: 0.5rem;
}

.projects tr.clickable:hover, tr.clickable:hover .nameblocker {
  background: #333;
}

.project-tier {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.inputs {
  word-wrap: break-word;
  max-width: 11rem;
}

.outputs {
}

.nameblocker {
  padding: 0.5rem;
  background: #000;
}

.projects td.project-name {
  padding: 0;
}

.project-tiers {
}

.project-spacer {
  background-image:
    linear-gradient( 45deg, #fff 25%, transparent 25%),
    linear-gradient(135deg, #fff 25%, transparent 25%),
    linear-gradient( 45deg, transparent 75%, #fff 75%),
    linear-gradient(135deg, transparent 75%, #fff 75%);
  background-size: 4px 4px;
}

.projects tr.tier2, .tier2 {
  border: 1.5px solid #A6C;
}

.projects tr.tier3, .tier3 {
  border: 1.5px solid #FC0;
}

.project-spacer-purple, .tier2 .project-name {
  background-image:
    linear-gradient( 45deg, #A6C 25%, transparent 25%),
    linear-gradient(135deg, #A6C 25%, transparent 25%),
    linear-gradient( 45deg, transparent 75%, #A6C 75%),
    linear-gradient(135deg, transparent 75%, #A6C 75%);
  background-size: 4px 4px;
}

.project-spacer-gold, .tier3 .project-name {
  background-image:
    linear-gradient( 45deg, #FC0 25%, transparent 25%),
    linear-gradient(135deg, #FC0 25%, transparent 25%),
    linear-gradient( 45deg, transparent 75%, #FC0 75%),
    linear-gradient(135deg, transparent 75%, #FC0 75%);
  background-size: 4px 4px;
}

#gui, #settings-buttons {
  background: #000;
  position: absolute;
  display: inline-block;
  padding: 0.5rem 1rem;
}

.tech-title, #gui, #settings-buttons {
  font-size: max(17px, min(2.4vh, 2.4vw));
}

#gui {
  right: 0;
  bottom: 0;
  z-index: 3; 
  display: flex;
  align-items: center;
}

#settings-buttons {
  right: 0;
  top: 0;
  z-index: 20;
}

#settings-button, #fullscreen-button {
  text-align: center;
  padding: 0.1rem 0.2rem;
}

#gui div {
  padding: 0.1rem 0.2rem;
}

#tutorial {
  display: none;
  align-items: flex-end;
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  background: rgba(0,0,0,0.0);
  z-index: 5;

  background: #000;
  border: 1px solid white;
}

#tutorial.hide {
  display: flex;
  animation: 2s slideout;
  transform: translate(-200%, 0);
}

#tutorial.show {
  display: flex;
  animation: 1s slidein;
  transform: translate(0, 0);
}

#advisor {
  position: relative;
  bottom: -2rem;
  max-width: 33vw;
  max-height: 33vh;
  min-width: 15vw;
  margin: -1.5rem;
}

#tutorial-text {
  max-width: 33vw;
  padding: 1rem;
  font-size: max(17px, min(2.4vh, 2.4vw));
  font-family: sans-serif, RPGAwesome;  
}


.overlay {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
}

.overlay.show {
  display:flex;
}

#message-overlay {
  z-index: 10;
}

#settings-overlay.show {
  z-index: 21;  
}

#credits-overlay {
  z-index: 22;  
}

#learned-overlay {
  z-index: 13;
}

.modal {
  display: inline-block;
  margin: auto;
  background: #000;
  padding: 0.5rem 1rem;
  max-width: 66vw;
}

.modal > div {
  padding: 0.5rem 1rem;  
}

#settings h3, #start-buttons h3, #end-buttons h3 {
  display: inline-block;
}

.button {
  border: 2px solid #776;
  padding: 0.25rem 0.5rem;
  background: #000;
}

.button:active {
  border-color: #DDD;
  background: #48F;  
}

.button:hover {
  background: #333;
}

.checker {
  display: inline-block;
  border: 2px solid #776;
  width: 1rem;
  height: 1rem;
  margin: 0 1rem;
  box-sizing: border-box;
}

.checker.checked {
  border-color: #DDD;
  background: #48F;
}

.tech-description {
  margin: 0 0 0.2rem;
}

.choice:hover, .choice:hover .nameblocker {
/*  padding: 0.5rem 1rem; */
  background: #333;
}

.tech-title {
  color: #8FF;
}


.message-title {
  color: #FF8;
  font-size: max(20px, min(2.8vh, 2.8vw));
  text-align: center;
}

@font-face {
  font-family: 'RPGAwesome';
  src: url("rpgawesome-webfont.woff?v=0.1.0");
}

.upgrade {
  text-align: center;
  padding: 0.5rem;
}

.slider-holder {
  height: 1.5rem;
}

.slider {
  background: #776;
  top: 50%;
  transform: translate(0, -50%);
  width: 33vw;
  height: 0.25rem;
  position: relative;
}

.slideGoo {
  position: relative;
  background: #48F;
  height: 100%;
  width: 100%;
}

.slidee {
  position: absolute;
  right: 0;
  width: 0.5rem;
  height: 1rem;
  top: 50%;
  transform: translate(50%, -50%);
  background: #DDD;
}

#learned-content.modal {
  width:80vw;
  height:60vh;
}

#learned-ui {
  display: flex;
}

#learned-list {
  flex: 0 0 auto;
}

#learned-list .tech-title {
  font-size: max(14px, min(2vh, 2vw));
}

#learned-item {
  margin-left: 1rem;
  flex: 1 1 auto;
}

.tech-effect {
  display: flex;
  justify-content: center;
}

.tech-effect > div {
  flex: 1 1 1px;
}

.tech-effect .project-name {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.tech-effect .tech-projects {
  padding: 0.1rem 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;  
}

.tech-effect > div:first-child, .tech-cancel-container {
  text-align: right;
  margin-right: 1rem;
}

.tech-cancel {
  color: #FF8;
  display: inline-block;
  text-align: center;
  border: 1px solid #FF8;
  padding: 0.5rem 1rem;
}

.tech-cancel:hover {
  background: #331;
}

.center {
  text-align: center;
}

#credits {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}

#end {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;  
}

#end.show {
  display:flex;
}

.congrats, #start-buttons {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  background: #000;
  padding: 0.5rem 1rem;
  max-width: 66vw;
}

.congrats .title {
  font-size: min(72px, min(10vh, 10vw));
}

.congrats .title.woo {
  color: #F8F;
}

.congrats .title.ai {
  color: #FD0;
}

.congrats .title.center {
  color: #0DF;
}

#score-table td {
  padding: 0.125rem 1rem;
}

#score-table td:last-child {
    text-align: right;
}

#final-score {
  border-top: 1px solid white;
}

.congrats .button, #title .button {
  margin: 0.5rem 1rem;
}

#end-buttons, #start-buttons {
  background: none;
}


.mouse {
  z-index: 1000;
  position: absolute;
  left: 0;
  top: 0;
}

#title {
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 19;  
}

#title-title img {
  min-width: 50vw;
  max-width: 100vw;
}

#start-buttons .button {
  padding: 0.5rem 1rem;
  font-size: max(21px, min(3vh, 3vw));
}

.intitlescreen .novisibleintitle {
  display: none !important;
}

.hidden {
  display: none !important;
}


@media (orientation: portrait) {
  .slider {
    width: 66vw;
  }
  
  .hover-inner {
    max-width: 66vw;
  }

  #message, .congrats {
    max-width: 90vw;
  }
}