/* TODO: FIX WIDTH SCALING FOR NON-PHONES */
:root {
  --xx-large: 20vw;
  --extra-large: 16vw;
  --large: 15vw;
  --medium: 12vw;
  --small: 10vw;
  --extra-small: 8vw;
}

* {
  background-color: #000;
}

body {
  margin: auto;
  padding: 0;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  max-width: 95vw;
  font-size: 1.1em;
  background-attachment: fixed;
  font-family: Play, sans-serif;
  color: #ccc;
}

h1 {
  font-size: 1.5em;
  padding: 0;
  margin: 0;
  margin-top: 0.25em;
  text-align: center;
}

.subtitle {
  font-size: 1.1em;
  text-align: center;
  margin-bottom: 0.5em;
}

form {
  text-align: center;
}

legend {
  font-weight: bold;
}

fieldset {
  margin-bottom: 0.5em;
  border-radius: 1em;
  padding: 0.25em;
}

button {
  border: 0px;
    touch-action: manipulation;
}

hr {
  margin: 0.5em 10em;
  border-top: 1px dotted #aaa;
}

.hidden {
	display: none;
	max-height: 1vh;
}

.clickIcon img {
	width: var(--large);
}

.incrementButton img {
	width: var(--extra-small);
}

.credDisplay img {
	height: var(--extra-large);
}

.credNum {
	font-size: var(--xx-large);
	font-weight: bold;
	color: #fff;
}

.agendaDisplay img {
	width: var(--medium);
}

.agendaNum {
	font-size: var(--extra-large);
	font-weight: bold;
}

.win {
  color: #0fa;
}

.muIcon img {
	width: var(--medium);
}

#fxZone .incrementButton img {
	width: var(--extra-small);
}

#fxZone {
	font-size: var(--medium);
	font-weight: bold;
}

.bpDisplay img {
	width: var(--medium);
}

.coreDisplay img {
	width: var(--medium);
}

.tagDisplay img {
	width: var(--medium);
}

.gapSpacer {
	display: inline-block;
	width: var(--small);
}

.settings {
	font-size: 1em;
	color: #FFF;
	border: 1px dotted;
}

.visToggle {
	font-size: 1em;
	color: #FFF;
}

.visToggle img{
	max-width: var(--small);
	max-height: var(--small);
}

.reset {
	font-size: 1em;
	color: #F70;
	border: 1px dotted;
}

.cancel {
	font-size: 1em;
	color: #aaa;
	border: 1px dotted;
}

.corp {
	font-size: 1em;	
	color: #77f;
	border: 1px dotted;
}

.runner {
	font-size: 1em;
	color: #f77;
	border: 1px dotted;
}

@media (min-width: 600px) {
	:root {
	  --xx-large: 120px;
	  --extra-large: 72px;
	  --large: 90px;
	  --medium: 72px;
	  --small: 60px;
	  --extra-small: 48px;
	}
}

#log {
	text-align: center;
}

#log > a {
	color: #aaa;
}