html,
body {
  margin: 0;
  padding: 0;
  overflow: none;
  width: 100%;
  height: 100%;
}
.border {
  height: calc(100% - 20vh);
  width: calc(100% - 20vh);
  position: absolute;
  top: 10vh;
  left: 10vh;
  z-index: 5;
  box-sizing: border-box;
  pointer-events: none;
}
.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}
span {
  font-size: calc((8vw + 12vh) / 2);
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  width: calc(100% - 30vh);
  font-family: "Hershey";
  font-style: italic;
}

#setup {
  background: black;
  cursor: pointer;
}
#setup span {
  font-size: calc((8vw + 12vh) / 4);
  color: #dedede;
}
#setup .border {
  border: 0.38vw solid #dedede;
  outline: 0.38vw solid #dedede;
}

#welcome {
  background: #5f0505;
  cursor: pointer;
}
#welcome span {
  color: #b94444;
}
#welcome .border {
  border: 0.38vw solid #b94444;
  outline: 0.38vw solid #b94444;
}

#phrase {
  background: #b94444;
}
#phrase span {
  color: red;
  max-height: 80vh;
  overflow: hidden;
}
#phrase .border {
  border: 0.38vw solid red;
  outline: 0.38vw solid red;
}

@media only screen and (max-width: 600px) {
  span {
    font-size: calc((8vw + 12vh) / 2.5);
  }
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


@font-face {
  font-family: "Hershey";
  font-style: italic;
  src: url("fonts/Hershey-Noailles-Times-Duplex-Italic-Regular.eot"); /* IE9 Compat Modes */
  src: url("fonts/Hershey-Noailles-Times-Duplex-Italic-Regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("fonts/Hershey-Noailles-Times-Duplex-Italic-Regular.woff")
      format("woff"),
    /* Pretty Modern Browsers */
      url("fonts/Hershey-Noailles-Times-Duplex-Italic-Regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("fonts/Hershey-Noailles-Times-Duplex-Italic-Regular.svg#svgFontName")
      format("svg"); /* Legacy iOS */
}