@import url("https://fonts.googleapis.com/css?family=Fjalla+One");
html {
  font-size: 16px;
}

body {
  height: 100vh;
  background: #fcfbcf;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Fjalla One", sans-serif;
}

.container {
  flex: 0 0 auto;
  /* width: 438.9px; */
  width: 437.9px; 
  height: 590.7px;
  position: relative;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.16), 0px 2px 5px 0px rgba(0, 0, 0, 0.26);
  perspective: 800px;
}

h1 {
  margin: 0;
  color: white;
}

.bg {
  /* background: url("https://s3-ap-southeast-2.amazonaws.com/mephystoprojects/sam/bg.jpg"); */
  background: url("../imgdj/bg.jpg");
  width: 438.9px;
  height: 590.7px;
  background-size: cover;
}

.sam {
  position: absolute;
  top: 0;
  left: 0;
}

.body {
  /* background: url("https://s3-ap-southeast-2.amazonaws.com/mephystoprojects/sam/body.png"); */
  background: url("../imgdj/body.png");
  width: 294.03px;
  height: 257.07px;
  background-size: cover;
  top: 159.72px;
  left: 79.2px;
}

.arm {
  /* background: url("https://s3-ap-southeast-2.amazonaws.com/mephystoprojects/sam/arm.png"); */
  background: url("../imgdj/arm.png");
  width: 103.29px;
  height: 136.95px;
  background-size: cover;
  top: 236.28px;
  left: 96.36px;
  transform-origin: 25% 75%;
}

.hand {
  /* background: url("https://s3-ap-southeast-2.amazonaws.com/mephystoprojects/sam/hand.png"); */
  background: url("../imgdj/hand.png");
  width: 61.38px;
  height: 71.94px;
  background-size: cover;
  top: 207.24px;
  left: 171.6px;
}

.face {
  /* background: url("https://s3-ap-southeast-2.amazonaws.com/mephystoprojects/sam/face.png"); */
  background: url("../imgdj/DJ-SAM2.png");
  width: 157.74px;
  height: 236.61px;
  background-size: cover;
  top: 34.32px;
  left: 130.02px;
}

.text {
  position: absolute;
  bottom: 33px;
  left: 0;
  width: 100%;
}
.text p {
  color: #333;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 3rem;
  text-shadow: -1px -1px 0 crimson, 1px -1px 0 crimson, -1px 1px 0 crimson, 1px 1px 0 crimson;
}
.text p strong {
  color: crimson;
  text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
  font-weight: normal;
  font-size: 1.2em;
}

pre {
  padding: 0;
  margin-top: 20px;
  margin-bottom: 0;
}