body {
  font-family: 'Courier';
  background-color: #FBEC5D;
  margin: 0;
}

.header {
  background-color: #262416;
  color: #FFFFFF;
  height: 10vw;
  font-size: 9vw;
  padding: 3vw 4vw;
  margin-bottom: 12vh;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.header a {
  text-decoration: none;
  color: inherit;
  position: relative;
}

.header .hero {
  float: left;
}

.header .expired {
  float: right;
  color: #EE7600;
  display: none;
  cursor: default;
}

.header .tooltip {
  position: absolute;
  font-size: 2vw;
  top: 15.95vw;
  background-color: #262416;
  border-left: 1vw solid #262416;
  border-bottom: 1vw solid #262416;
  border-right: 1vw solid #262416;
  box-sizing: border-box;
  display: none;
}
 
.content {
  width: 80%;
  margin: auto;
  overflow-x: hidden;
}

.content ::selection {
  background: #FF9900; /* WebKit/Blink Browsers */
  color: #202020;
}
.content ::-moz-selection {
  background: #FF9900; /* Gecko Browsers */
  color: #202020;
}

.content .input {
  width: 100%;
  height: 8vw;
  width: 100%;
  height: 8vw;
  font-size: 5vw;
  padding-left: 1vw;
  margin-bottom: 5vw;
  border: 1vw solid #262416;
  box-sizing: border-box;
}

.content .input:focus {
  outline: none; 
}

.content .message {
  background-color: #262416;
  padding: 2vw 2vw;
  font-size: 2vw;
  color: #FFFFFF;
  display: none;
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  -o-user-select: text;
  user-select: text;
}

.content .is-invalid {
  display: none;
}

.shoutout {
  position: fixed;
  bottom: 1vh;   
  right: 1vh;
}
.shoutout a {
  text-decoration: none;
  color: inherit;
  font-size: 2vw;
}