@font-face {
  font-family: 'Grimheim';
  src: url('fonts/Grimheim/GrimheimRegular.woff2') format('woff2'),
       url('fonts/Grimheim/GrimheimRegular.woff') format('woff'),
       url('fonts/Grimheim/GrimheimRegular.ttf') format('truetype');
}

html {  
  font-family: 'Open Sans', sans-serif;
  color:white;
  font-size:1.6vh; /* 36px */
  font-weight:300;
  text-transform: uppercase;
  letter-spacing:0.1em;

  -webkit-font-smoothing:antialiased;
  
  background-image: url(img/background-qhd-3480x2160.jpg);
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
}

body {
  background-image: none;
  background-position: center top;
  background-repeat:no-repeat;
  background-size: auto 100%;
}

.site-portrait body,
.site-entermask body {
  background-image: url(img/blackbar.png);
}

.page-header {
  background-image: url(img/header-qhd-3298x438.png);
  background-position: center top;
  background-repeat:no-repeat;
  background-size: auto 20vh;
}

.page-footer {
  background-image: url(img/footer-qhd-3298x89.png);
  background-position: center bottom;
  background-repeat:no-repeat;
  background-size: auto 4.1vh;
}

html, body {
  padding:0;
  margin:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  text-align:center;
}

p {
  margin-top:0;
  margin-bottom:0.1em;
  font-weight:inherit;
  text-transform:inherit;
}

a {
  text-decoration:underline;
  color:inherit;
  font-weight:bold;
}

img {
  border:0;
}

h1, h2, h3 {
  font-weight:inherit;
  text-transform:inherit;
}

nav ul, li {
  padding:0;
  margin:0;
  text-indent:0;
  list-style-type:none;
  display: inline-block;
}

::selection {
  background: #950902;
  color:white;
}

.page-header a {
  display: inline-block;
  margin:0;
  height:20vh;
  width:100%;
  text-indent:9999px;
  overflow:hidden;
  white-space: nowrap;
  outline:none;
}

.page-footer {
  font-size:0.66rem;
  color:#8f8f8f;
  position: absolute;
  bottom:0;
  width:100%;
  box-sizing:border-box;
  padding:0 3.8vh 3.2vh 3.8vh;
  display: flex;
  justify-content: space-between;
  font-weight:500;
}

.page-footer a {
  font-weight:inherit;
  text-decoration:none;
}

.page-footer a:hover {
  color:white;
}

.page-footer nav ul li::before {
  content: "|";
  margin:0 0.35em 0 0.3em;
  letter-spacing:0.5em;
}

.page-footer nav ul li:first-child::before {
  content: "";
  margin:0;
}

[data-short] span {
  display: inline-block;
  text-indent:9999px;
  overflow:hidden;
  white-space:nowrap;
  width:0;
}

[data-short]::after {
  content: attr(data-short);
}

.content {
  margin-top:6vh;
}

.textblock {
  background-color:rgba(0, 0, 0, 0.36);
  padding:3vh 4.72vh;
  color:white;
  text-align:left;
  margin:auto;
  max-width:50rem;
  max-height:45vh;
  overflow:auto;
}

.textblock h2 {
  font-size:2.7rem;
  margin:0;
  margin-bottom:0.5em;
}

.textblock p {
  margin:0 0 2em 0;
}

.characterimage {
  height:47vh;
  width:auto;
  position:relative;
  display:inline-block;
  margin:auto;
  margin-bottom:1.41vh;
  box-shadow: 0px 0px 32px 16px rgba(0,0,0,0.75);
}

.characterimage img {
  height:100%;
  width:auto;
}

.characterimage::before {
  content: ' ';
  position:absolute;
  pointer-events:none;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
  width:100%;
  height:100%;
  padding:3%;
  background-image:url(img/portraitframe-qhd-1060x1058.png);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
}

.name {
  font-family: 'Grimheim', serif;
  font-size:2.7rem;
  margin-top:2.5vh;
  letter-spacing:0.1em;
  padding-bottom:1.4vh;
  background-image:url(img/whitenameunderline.png);
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:55vh auto;
  position:relative;
}

@supports (-webkit-background-clip: text) {
  .name span {
    background: -webkit-linear-gradient(#fff, #9e9e9e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.name::before {
  position: absolute;
  text-shadow: 0.3vh 0.3vh 2.2vh rgba(0, 0, 0, 1);
  top: 0;
  right: 0;
  left: 0;
  content: attr(data-name);
  bottom: 0;
  text-align: center;
  color: transparent;
  z-index:-1;
}

.instructions {
  color:#8f8f8f;
  font-weight:500;
  margin-top:2.3vh;
  position:absolute;
  bottom:10vh;
  left:50%;
  transform:translateX(-50%);
}

.instructions .big {
  font-size:1.3rem;
}

.creatorlink {
  color:#950902;
  border-bottom:1px solid #950902;
  text-decoration:none;
}

form {
  color:#8f8f8f;
}

form input, form select, form button {
  outline:none;
  text-transform:inherit;
  color:inherit;
  font-size:inherit;
}

form button {
  cursor:pointer;
  padding:1.4vh 3vh 1.37vh 3vh;
  border-radius:0.15em;
  border:0.14vh solid #595959;
  background: #2b2c2e;
  background: linear-gradient(to bottom, #2b2c2e 0%,#0f1011 100%);
}

form button:hover {
  filter:brightness(1.3);
}

form button:active {
  filter:brightness(1);
}

form > div {
  margin-top:1.4vh;
}

.sexchoice {
  display:flex;
}

.sexchoice .checkbox {
  flex:1;
}

.sexchoice .checkbox:first-child {
  text-align:right;
  margin-right:1.4vh;
}

.sexchoice .checkbox:last-child {
  text-align:left;
}

form > .namechoice {
  display:inline-block;
  margin-top:1vh;
}

.namechoice input[type=text] {
  appearance:none;
  letter-spacing:inherit;
  -webkit-appearance: none;
  background-color:transparent;
  text-transform:uppercase;
  font-family:serif;
  text-align:center;
  color:#595959;
  border:none;
  padding:2.6vh 4.6vh 2.6vh 4.6vh;
  width:31.5vh;
  outline:none;
  background-image:url(img/textbox-qhd-876x143png.png);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
}

::-webkit-input-placeholder, input::placeholder {
  text-transform: uppercase;
  color:#cccccc;
}

.checkbox {
  display: inline-block;
  cursor:pointer;
  margin:0;
  font-weight:600;
}

.checkbox input[type="radio"],
.checkbox input[type="checkbox"] {
  opacity: 0;
  display: inline-block;
  margin:0;
  height:1.5em;
  width:1.75em;
}

.checkbox label {
  position: relative;
  vertical-align:middle;
  cursor:pointer;
}

.checkbox label::before {
  position: absolute;
  top:0;
  bottom:0;
  left:-1.6em;
  top:50%;
  transform:translateY(-50%);
  content: "";
  display: inline-block;
  height: 100%;
  width: 1.20em;
  background-image:url(img/radio.png);
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
}

.checkbox input[type="radio"]:checked + label::before,
.checkbox input[type="checkbox"]:checked + label::before {
  background-image:url(img/radio-active.png);
}