html, body {
  background-color: #000;
  color: #FFF;
  text-align: center;
  margin-top: 5%;
  font-size: larger;
  line-height: 10px;
}

@font-face {
	font-family: 'Antonio';
	font-weight: 700;
	src: url('/assets/font/Antonio-Bold.woff2') format('woff2'),
			 url('/assets/font/Antonio-Bold.woff') format('woff')
}
@font-face {
	font-family: 'BIOS';
	font-weight: 700;
	src: url('/assets/font/WebPlus_IBM_VGA_9x16-2x.woff') format('woff')
}
@font-face {
	font-family: 'od';
	font-weight: 700;
	src: url('/assets/font/OpenDyslexic-Regular.otf')
}

:root {
  --arrow-bg: rgba(255, 255, 255, 0.3);
  --arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg);
  --option-bg: black;
  --select-bg: rgba(255, 255, 255, 0.6);
}

/* <select> styles */
select {
  /* Reset */
  appearance: none;
  font-family: inherit;
  font-size: large;
  border: 0;
  outline: 0;
  /* Personalize */
  width: 20rem;
  padding: 1rem 4rem 1rem 1rem;
  background: var(--arrow-icon) no-repeat right 0.8em center / 1.4em,
    linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
  color: black;
  border-radius: 0.25em;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/*@media screen and (orientation:portrait) {
  div {
    display: none;
  }
  #orientationinfo {
    display: block;
    margin-top: 50%;
    font-size: xx-large;
  }
}
@media screen and (orientation:landscape) {
  #orientationinfo {
    display: none;
  }
}*/


.fancy {
  font-family: 'Antonio';
}

.plain {
  font-family: sans-serif;
}

.od {
  font-family: 'od';
}

.button:link, .button:visited, button.button, input[type="button"].button, input[type="submit"].button {
  background-color: gray;
  border: 0px;
  color: black;
  padding: 14px 25px;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
  font-size: larger;
  cursor: pointer;
}

.button:hover, .button:active, input[type="button"].button:hover, input[type="submit"].button:hover {
  background-color: red;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ddd;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
}