html
{
  height:100%;
}
body
{
  height:100%;
  font-family: 'Roboto', 'Work Sans', sans-serif;
  background-color: white;
  color: black;
}
h1, h2, h3, h4, h5, h6
{
  font-family: 'Rajdhani', 'Roboto', 'Work Sans', sans-serif;
  font-weight: bold;
  font-size: xx-large;
}
header
{
  position: fixed;
  top: 0;
  display: grid;
  grid-template-columns: auto auto;
  background-color:black;
  color: white;
  width:100%;
  height:100px;
  padding: 0.5em;
  z-index: 100;
}
header h1, header nav
{
  margin: 0;
  height: 100px;
  line-height: 100px;
}
header h1
{
  padding-left:50px;
  height:100px;
}
header h1 img
{
  display: block;
  -moz-box-sizing: border-box;
  width: 217px;
  height: 100px;
}
header h1 a
{
  color: white;
  text-decoration: none;
}
header nav
{
  text-align:right;
}
header nav a
{
  text-align:center;
  color: white;
  text-decoration: none;
  font-size:1.5em;
  display:inline-block;
  padding-left:1em;
  padding-right:1em;
  font-family: 'Rajdhani', 'Roboto', 'Work Sans', sans-serif;
  font-weight: bold;
}
header nav a:hover
{
  color: #ed3135;
}
header nav a#nav_tafl
{
  margin-right:-3em;
}
.comingsoon
{
  font-family: 'Roboto', 'Work Sans', sans-serif;
  font-variant: all-small-caps;
  font-weight:bold;
  position: relative;
  color:white;
  background-color: #ed3135;
  background-image: linear-gradient(#ed3135, #902b2c);
  border: 1px solid #541819;
  padding: 3px;
  border-radius: 0.5em;
  text-shadow: 0 -1px 0 #411213;
  white-space: nowrap;
}
header nav a sup
{
  top: -2.5em;
  left: -6em;
  font-size: x-small;
}
header nav a:hover sup
{
  color: white;
}
div#content
{
  display:grid;
  grid-template-columns: 10vw auto 10vw;
  height:100%;
}
div#fourofour
{
  display:grid;
  background-image:url('../img/404.jpg');
  background-size: cover;
  background-position: center;
  color: white;
}
div#fourofour div.content
{
  height:100vh;
}
div#fourofour div.content div
{
  font-size:3em;
  background: black;
  background: rgba(0, 0, 0, 0.5);
  height:35vh;
  padding-top:15vh;
  margin-top:25vh;
}
div#fourofour div.content div h2, div#fourofour div.content div p
{
  margin: 0;
  line-height:10vh;
}
div.parallax
{
  height: 100vh;
  grid-column-start: 1;
  grid-column-end: 4;
  text-align: center;
  background-color: #cccccc;
  background-size: cover;
  background-attachment: fixed;
  background-position: center 100px;
}
div.parallax#cover
{
  height: calc(100vh - 100px - 1em);
  padding-top:calc(100px + 1em);
  font-size:3em;
  background-image:url('../img/cover.jpg');
}
div.parallax#cover div
{
  height: 70vh;
  margin-top: calc(15vh - 50px - 0.5em);
  color: white;
  text-shadow: 0 0 8px rgba(0, 0, 0, 1);
}
div.parallax#cover div p
{
  /*font-variant: all-small-caps;*/
  /*font-size: 3.5em;*/
  font-family: 'Rajdhani', 'Roboto', 'Work Sans', sans-serif;
  line-height: 1em;
  margin:0;
}
div.parallax#cover div img
{
  display:block;
  max-width: 100vw;
  min-height: 6em;
  max-height: calc(70vh - 3.5em);
  margin-left:auto;
  margin-right:auto;
  -webkit-filter: drop-shadow(0px 0px 5px #000000);
  filter:         drop-shadow(0px 0px 5px #000000);
}
div.parallax#parallax-1
{
  background-image:url('../img/console.jpg');
}
div.parallax#parallax-2
{
  background-image:url('../img/vr.jpg');
}
div.content
{
  grid-column-start: 2;
  grid-column-end: 3;
  text-align: center;
  /*padding-top:50px;*/
  padding-bottom:50px;
}
div#tafl
{
  grid-column-start: 1;
  grid-column-end: 4;
  background-image: url("../img/tafl/herobackground.jpg");
  background-size: cover;
  background-position: center;
  padding-bottom: 0;
}
div#tafl h2
{
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  margin-top: 0;
  padding-top: 150px;
}
div#tafl h2 img
{
  -moz-box-sizing: border-box;
  width: 290px;
  height: 200px;
}
div#tafl p.comingsoon
{
  width: 290px;
  font-size: 2em;
  display:inline-block;
  margin:0;
}
div#tafl div#tafl_description
{
  color: white;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75));
  padding-top: 50px;
  padding-bottom: 50px;
}
div#tafl div#tafl_description div
{
  width: 60vw;
  margin-left: auto;
  margin-right: auto;
}
p.action_btn
{
  font-size: x-large;
  display: inline-block;
  margin: 0 3px 5px;
}
p.action_btn a
{
  display:block;
  margin-left: auto;
  margin-right: auto;
  width: 290px;
  padding: 3px;
  border-radius: 0.5em;
  font-family: 'Roboto', 'Work Sans', sans-serif;
  font-variant: all-small-caps;
  text-decoration: none;
  font-weight: bold;
}
p.action_btn#findoutmore a
{
  color: white;
  background-color: #003382;
  background-image: linear-gradient(#003382, #001e4d);
  border: 1px solid #001328;
  text-shadow: 0 -1px 0 #001328;
}
p.action_btn#findoutmore a:hover
{
  background-image: linear-gradient(#0038b7, #002b84);
}
p.action_btn#joinplaytest a
{
  color: white;
  background-color: #4e8200;
  background-image: linear-gradient(#4e8200, #274d00);
  border: 1px solid #082800;
  text-shadow: 0 -1px 0 #082800;
}
p.action_btn#joinplaytest a:hover
{
  background-image: linear-gradient(#75b700, #398400);
}
div:target
{
  padding-top:100px;
  margin-top:-100px;
}
div#tafl:target
{
  padding-top:0;
  margin-top:-100px;
}
div#steamiframe
{
  position: relative;
  overflow: hidden;
  width:646px;
  height:190px;
  max-width: 646px;
  max-height: 190px;
}
div#steamiframe iframe
{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
div#preorder
{
  padding:1em;
}
div#preorder img
{
  display:inline-block;
  margin:5px;
}
p#aim
{
  font-size: 1.2em;
  line-height: 1.2em;
  font-weight: bold;
}
p#aim span
{
  display:block;
  margin-top:1em;
  color: #ed3135;
}
p#feedbacklink
{

  font-size:2em;
  font-family: monospace;
  border: 2px solid #ffffff;
  border-radius: 25px;
  display:inline-block;
  background-color: #000000;
  margin:0;
}
p#feedbacklink a
{
  color:#ffffff;
  text-decoration: none;
  padding:25px;
  display:inline-block;
}
p#feedbacklink:hover a
{
  color:#ed3135;
}
div#playtestlinks
{
  background-color: rgba(0,0,0,0);
  text-align: center;
  /*display:grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 5px;*/
}
div#playtestlinks a
{
  display:inline-block;
  background-color: #000000;
  color:#ffffff;
  text-decoration: none;
  font-family: monospace;
  border: 2px solid #ffffff;
  border-radius: 15px;
  padding:15px;
  font-size:2em;
}
div#playtestlinks a:hover
{
  color:#ed3135;
}
div#privacy
{
  text-align: left;
}
div#privacy h3
{
  border-bottom: 1px solid #333333;
}
div#privacy strong
{
  font-size: 1.2em;
}
div#tldr
{
  background-color: rgba(255, 215, 0, 0.35);
  padding: 1em;
}
div#tldr h3
{
  text-align: center;
}
div#tldr_lists
{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  grid-column-gap: 10px;
}
div#tldr_lists div:first-child
{
  background-color: rgba(255, 162, 0, 0.53);
}
div#tldr_lists div:last-child
{
  background-color: rgba(133, 203, 0, 0.42);
}
div#tldr_lists h4
{
  text-align: center;
  margin:0;
}
div#tldr ul#last_list
{
  width:75%;
  margin-left: auto;
  margin-right: auto;
}
div#topics
{
  padding:1em;
  background-color: #eeeeee;
  border: 1px solid #999999;
  margin-top: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  color: #333333;
}
div#topics a
{
  color: #555555;
}
footer
{
  grid-column-start: 1;
  grid-column-end: 4;
  background: black;
  color: white;
  padding-right: 1em;
  text-align: center;
}
footer a
{
  color: white;
}
footer p#company_reg
{
  font-size: small;
}