@font-face {
  font-family: 'titlefont';
  src: url('source/titlefont.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'helreg';
  src: url('source/helreg.otf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'helital';
  src: url('source/helital.otf');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'helbold';
  src: url('source/helbold.otf');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'helboldital';
  src: url('source/helboldital.otf');
  font-weight: bold;
  font-style: italic;
}

a { color: #000}

heavy {
    font-family: 'helbold';
}

* {box-sizing: border-box; color: #000}
html, body, content {padding: 0; margin: 0;}

header {position: fixed; top: 10vh; right: 0; z-index: 3; font-size: 1.4em; width: 10vw; text-align: center;}
header a {display: block; margin-bottom: .1em;}

#photoback {position: fixed; height: 100vh; width: 100vw;}
#photoback .profilephoto { height: 100%; width: 100%; position: absolute;}
#photoback .profilephoto img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 0;  padding: 10vh 10vw;}
#photosecond {opacity: 0}

#textbox {
  position: relative;
  z-index; 2;
  padding: 80vh 10vw 0 10vw;
}

#nametitle {
  font-size:  8vw;
  font-family: 'titlefont';
  min-height: 20vh
}

#bodytext {
    font-size: 3vw;
  font-family: 'helreg';
}

#creditbox {
  padding: 100vh 0 40px;
}

@media (max-width:1024px) {
  
  header {
    top: 10vw;
  }
  
  #textbox {
      padding: 60vh 10vw 0 10vw;
  }
  
  #nametitle {
    font-size: 20vw;
    min-height: 40vh;
  }
  #photoback .profilephoto img {
    padding: 10vw;
  }
  
  #bodytext {
    font-size: 5vw;
  }
  
}