@font-face {
  font-family: "Beleza-Regular";
  src: url("Belleza-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Smokum-Regular";
  src: url("Smokum-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Underwater-Love";
  src: url("Underwater-Love.ttf") format("truetype");
}
@font-face {
  font-family: "Spyced";
  src: url("Spyced.ttf") format("truetype");
}
@font-face {
  font-family: "Treamd";
  src: url("Treamd.ttf") format("truetype");
}
@font-face {
  font-family: "CookieMonster";
  src: url("CookieMonster.ttf") format("truetype");
}
@font-face {
  font-family: "JLSSpaceGothic";
  src: url("JLSSpaceGothic.otf") format("opentype");
}
@font-face {
  font-family: "KeepCalm-Medium";
  src: url("KeepCalm-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Viking";
  src: url("Viking.ttf") format("truetype");
}
@font-face {
  font-family: "HeartBreakingBad";
  src: url("HeartBreakingBad.otf") format("opentype");
}
@font-face {
  font-family: "KilledDJ";
  src: url("KilledDJ.ttf") format("truetype");
}
@font-face {
  font-family: "MostWazted";
  src: url("MostWazted.ttf") format("truetype");
}
html,
body {
  position: relative;
  margin: 0pt;
  padding: 0pt;
  width: 100%;
  height: 100%;
}
#social-container {
  position: fixed !important;
  margin-right: -120pt;
  padding: 15pt;
}
.fb-share-button {
  z-index: 1 !important;
}
.twitter-share-button {
  width: 100px !important;
  z-index: 1 !important;
  margin-top: 4pt;
}
.container {
  margin: 0pt;
  padding: 0pt;
  width: 100%;
  height: 100%;
}
.inner-container {
  margin-left: auto;
  margin-right: auto;
  padding-top: 80pt;
  text-align: middle;
}
.name {
  white-space: nowrap;
}
.image {
  height: 50%;
  width: auto;
}
.text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.text-container .name {
  font-size: 4vw;
}
.text-container .job {
  font-size: 5vw;
}
#ninja {
  font-family: "Beleza-Regular";
  text-shadow: 0px 2px 2px #e8e8e8;
  background-image: url("ninja-background.png");
}
#ninja #name {
  font-size: 3.2vw;
  color: #777;
}
#ninja #job {
  font-size: 17vw;
  color: #333;
}
#ninja .image {
  position: absolute;
  bottom: 0pt;
  left: 0pt;
}
#cowboy {
  font-family: "Smokum-Regular";
  background: url("cowboy-background.jpg") no-repeat;
  background-size: 100% 100%;
}
#cowboy #name {
  font-size: 4.5vw;
  color: #7a4000;
}
#cowboy #job {
  font-size: 17vw;
  color: #333;
}
#cowboy .image {
  position: absolute;
  bottom: -100%;
  right: 50pt;
}
#dolphin {
  font-family: "Underwater-Love";
  background: url("dolphin-background.jpg");
}
#dolphin #name {
  font-size: 3vw;
  color: #193d8f;
}
#dolphin #job {
  font-size: 10vw;
  color: #333;
}
#dolphin .image {
  position: absolute;
  bottom: -200%;
  left: 50pt;
}
#dragon {
  font-family: "Spyced";
  background: url("dragon-background.jpg");
}
#dragon #name {
  font-size: 3.5vw;
  color: #6d0000;
}
#dragon #job {
  font-size: 13.5vw;
  color: #333;
}
#dragon .image {
  position: absolute;
  bottom: -300%;
  right: 50pt;
}
#pirate {
  font-family: "Treamd";
  background: url("pirate-background.jpg") no-repeat;
  background-size: 100% 100%;
}
#pirate #name {
  font-size: 2.5vw;
  color: #48210e;
}
#pirate #job {
  font-size: 21vw;
  color: #333;
}
#pirate .image {
  position: absolute;
  bottom: -400%;
  left: 50pt;
}
#lady {
  font-family: "CookieMonster";
  background: url("lady-background.jpg");
}
#lady #name {
  font-size: 3.5vw;
  color: #7d0088;
}
#lady #job {
  font-size: 16vw;
  color: #333;
}
#lady .image {
  position: absolute;
  bottom: -500%;
  right: 50pt;
}
#scientist {
  font-family: "JLSSpaceGothic";
  background: url("scientist-background.jpg");
}
#scientist #name {
  font-size: 4.5vw;
  color: #0a5c2c;
}
#scientist #job {
  font-size: 16vw;
  color: #333;
}
#scientist .image {
  position: absolute;
  bottom: -600%;
  left: 0pt;
}
#lord {
  font-family: "KeepCalm-Medium";
  background: url("lord-background.jpg");
}
#lord #name {
  font-size: 3vw;
  color: #00256e;
}
#lord #job {
  font-size: 17vw;
  color: #333;
}
#lord .image {
  position: absolute;
  bottom: -700%;
  right: 20pt;
}
#viking {
  font-family: "Viking";
  background: url("viking-background.jpg");
}
#viking #name {
  font-size: 2.5vw;
  color: #584023;
}
#viking #job {
  font-size: 11vw;
  color: #333;
}
#viking .image {
  position: absolute;
  bottom: -800%;
  left: 0pt;
}
#meth-cook {
  font-family: "HeartBreakingBad";
  background: url("meth-cook-background.jpg") no-repeat;
  overflow: hidden;
}
#meth-cook #name {
  font-size: 3vw;
  color: #8ddd82;
}
#meth-cook #job {
  font-size: 11vw;
  color: #b6b6b6;
}
#meth-cook .image {
  position: absolute;
  bottom: -900%;
  right: 10pt;
}
#dj {
  font-family: "KilledDJ";
  background: url("dj-background.jpg") no-repeat;
  background-size: auto 100%;
}
#dj #name {
  text-shadow: -1px 0px 2px #000000;
  font-size: 3vw;
  color: #ff0000;
}
#dj #job {
  text-shadow: -1px 0px 2px #ffffff;
  font-size: 19vw;
  color: #333;
}
#dj .image {
  position: absolute;
  bottom: -1000%;
  left: 15pt;
}
#homeless {
  font-family: "MostWazted";
  background: url("homeless-background.jpg") no-repeat;
  overflow: hidden;
}
#homeless #name {
  font-size: 4vw;
  text-shadow: -1px 0px 2px #000000;
  color: #0080ff;
}
#homeless #job {
  font-size: 11vw;
  color: #222;
}
#homeless .image {
  position: absolute;
  bottom: -1100%;
  right: 15pt;
}
@media screen and (max-height: 450px) and (orientation: portrait) {
  #meth-cook,
  #homeless {
    background-size: 100% auto;
  }
}
@media screen and (max-height: 450px) and (orientation: landscape) {
  #meth-cook,
  #homeless {
    background-size: auto 100%;
  }
}