@font-face
{
  font-family: RockSalt;
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/RockSalt-Regular.ttf') format('truetype');
}

#loadingLogo
{
  background-size: 60vh;
}

#loadingUI, #hud_curtain
{
  top:0;
}

.ico_sett {
  width: 86%;
}

.story_image
{
  background: url(images/result_faces.png);
  background-position: 2% 2.45%;
  width: 17.3vh;
  height: 16.3vh;
  top: -0.4vh;
  left: 3.7vh;
  background-size: 35vh;
  position: absolute;
}

.story_bg
{
  background: url(images/face_bg.png);
  background-position: -1% 0%;
  background-size: 33vh;
}

#story_textbox
{
  position: absolute;
  width: 17.6vh;
  height: 9.7vh;
  padding: 1vh;
  top: -7vh;
  left: 12vh;
  background: url(images/face_bg.png);
  background-position: 1% 76%;
  background-size: 35vh;
}

#story_slide
{
  position: absolute;

  z-index: 3;
  top: 15%;
  width: 24.3vh;
  height: 16.3%;
  z-index: 3;
}

.story_slide
{
  left: -5.75vh;  
  transition: left .75s cubic-bezier(.55,-0.12,.23,1.29);
}

.story_slide_off
{
  left: -40vh;
} 

#story_text
{
  position: absolute;
  left: 1vh;
  top: 0.2vh;
  font: 1.7vh RockSalt, sans-serif;
  font-weight: bold;
  line-height: 3vh;
  margin: 0.5vh;
}

#story_ff
{
  position: absolute;
  background: url(images/ui_atlas.png);
  background-size: 52vh;
}

#story_ff
{
  left: 7vh;
  top: 15.5vh;
  height: 9.5vh;
  width: 9.5vh;
  background-position: 72.8% 83.5%;
}

.ff_ico
{
  position: absolute;
  background: url(images/ui_atlas.png);
  background-size: 52vh;
  left: 2.5vh;
  top: 3.2vh;
  height: 3vh;
  width: 5.4vh;
  background-position: 39% 22.5%;
}

.ff_ico_dn
{
  background-position-y: 14.6%;
}

.face_bigwin
{
  background-position: 100% 96%;
}

.face_push
{
  background-position: 2% 96%
}

.face_craps
{
  background-position: 100% 3.4%;
}

.face_win
{
  background-position: 2% 3.4%;
}

#settings_profanity
{
  top:0;
  bottom:0;
  height:84vh;
  width:56vh;
  
  background: url(images/bg-scene.jpg);
  background-size: 192vh;
  background-position-y: 84%;
  font: 3vh OpenSansCondBold, sans-serif;
  color: white;
  overflow: hidden;
}

#btn_PROF_BACK
{
  left: 0;
  margin: auto;
  right: 0;
  bottom: 5.5vh;
  background-color: darkmagenta;
  background-image: linear-gradient(#980dd4, #2d093d);
  position: absolute;
}

.prof_txt_BG
{
  position: absolute;
  background: url(images/face_bg.png);
  width: 42.5vh;
  height: 16vh;
  top: 23vh;
  left: 8vh;
  background-position: 0% 71%;
  background-size: 82vh 73vh;
  z-index: -1;
  color:darkred;
  font: 3.1vh RockSalt, sans-serif;
  line-height: 4vh;
  font-weight: bold;
  padding: 2.5vh;
}

.prof_BG
{
  background: url("images/bodyshots.png");
  height: 44vh;
  width: 44vh;
  position: absolute;
  top:39vh;
  left: 1vh;
  background-size: 58vh;
  background-position-x: 100%;
  z-index: -2;
}

.prof_btn_value
{
  top: 6.2vh;
  font-size: 2.2vh;
  width:14vh;
  right: -4vh;
  position: absolute;
  text-align: center;
  white-space: nowrap;
  color: wheat;
}

.prof_btn_selected
{
  border-width: 0.5vh;
}
.prof_btn_value_selected
{
  font-size: 2.4vh;
  color:white;
  text-decoration: underline;
  text-underline-offset: 0.5vh;
}

.prof_very_dice_btn,
.prof_little_dice_btn,
.prof_no_dice_btn
{
  top: 10vh;
  background-size: 71.1vh;
}

.prof_very_dice_btn
{
  right: 15vh;
  background-position: 28.3% 30%;
}

.prof_little_dice_btn
{
  right: 24vh;
  background-position: 28.3% 19.3%;
}

.prof_no_dice_btn
{
  right: 34vh;
  background-position: 28.3% 8.6%;
}

#btn_PROF
{
  right: 0vh;
  left:0vh;
  margin: auto;
  bottom: 18.2vh;
  background-color: crimson;
  background-image: linear-gradient(#FF0800, #560800);
  font-size: 2.5vh;
  line-height: 4.5vh;
}

.prof_checkbox_div
{
  position: absolute;
  color: white;
  font-size: 2vh;
  width: 18vh;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 1.5vh;
}


#STR_TUTORIAL_BODY_TEXT_0
{
  width: 55%;
}

/* Rules for Portrait */
@media
only screen and (max-aspect-ratio: 5/3)
{
  .tutorial_BG_1 
  {
    background-position: 25% 1%;
    background-size: 208vh;
  }
}

/* iPhone 12 / 12 max / 11/ X / XS / XR / XS Max PORTRAIT support */
/* Override values for windows that get thinner than a 16:9 phone display */
/* Return to height based values for windows that get thinner than we support */
/* Defined before thinner than 9:16 rules so those can win over these */
@media 
only screen and (max-aspect-ratio: 14/25),
only screen and (device-width : 390px) and (device-height : 844px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait),
only screen and (device-width : 428px) and (device-height : 926px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait),
only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait),
only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 2) and (orientation : portrait),
only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait), 
only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 2) and (orientation : portrait) 
{
  #settings_profanity
  {
    left:-10vh;
    right:-10vh;
    transform: scale(0.8);
  }

  .prof_txt_BG
  {
    font-size: 2.9vh;
  }

  #story_text
  {
    font-size: 1.6vh;
    margin: 0.4vh;
  }
}


/* Rules for any screen thinner than 9:16 portrait */
/* SIZE CONVERSION: multiply portrait vh units by 1.778 */
@media
only screen and (max-aspect-ratio: 9/16)
{
  #settings_profanity
  {
    font-size: 5.33vw;
    padding-bottom: 5.33vw;
    width: 95vw;
    height: 136vw;
  }

  #btn_PROF_BACK
  {
    bottom: 9.77vw;
  }
  
  .prof_txt_BG
  {
    width: 73vw;
    height: 28.44vw;
    top: 40.89vw;
    left: 14vw;
    background-size: 140.44vw 132vw;
    font-size:5.68vw;
    line-height: 7.11vw;
    padding: 4.44vw;
  }
  
  .prof_BG
  {
    height: 78.22vw;
    width: 78.22vw;
    top: 69.33vw;
    left: 1.77vw;
    background-size: 103.11vw;
  }
  
  .prof_btn_value
  {
    top:11.02vw;
    font-size: 3.91vw;
    width: 24.89vw;
    right: -7.11vw;
  }
  
  .prof_btn_selected
  {
    border-width: 0.89vw;
  }
  .prof_btn_value_selected
  {
    font-size: 4.26vw;
    text-underline-offset: 0.89vw;
  }
  
  .prof_very_dice_btn,
  .prof_little_dice_btn,
  .prof_no_dice_btn
  {
    top: 17.77vw;
    background-size: 126.4vw;
  }
  
  .prof_very_dice_btn
  {
    right: 26vw;
  }
  
  .prof_little_dice_btn
  {
    right: 42vw;
  }
  
  .prof_no_dice_btn
  {
    right: 57vw;
  }
  
  #btn_PROF
  {
    bottom: 32.35vw;
    font-size: 4.44vw;
    line-height: 8vw;
  }
  
  .prof_checkbox_div
  {
    font-size: 4.44vw;
    width: 40vw;
    bottom: 2.66vw;
  }

  .tutorial_BG_1 
  {
    background-size: 369.8vw;
  }

}

/* Rules for Landscape */
/* SIZE CONVERSION: multiply portrait vh units by 1.778 */
/* SIZE CONVERSION: to convert to portrait, multiply landscape vh units by 0.5625 */
@media
only screen and (min-aspect-ratio: 5/3)
{

  #story_slide
  {
    transform: scale(1.9);
    top: 20%;
  }

  .story_slide
  {
    left:0;
  }

  .story_slide_off
  {
    left: -30%;
  }
}

/* Start of media overrides */
/* iPhone 12 / 12 max / 11/ X / XS / XR / XS Max LANDSCAPE support 
   adjustments for swipe area and things that break when browser headers are visible*/
@media 
only screen and (device-width : 390px) and (device-height : 844px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape),
only screen and (device-width : 428px) and (device-height : 926px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape),
only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape),
only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 2) and (orientation : landscape),
only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape),
only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 2) and (orientation : landscape) 
{
  #story_slide
  {
    transform: scale(1.6);
    top: 25%;
  }

  #settings_profanity
  {
    transform: scale(0.8);
  }

  .prof_txt_BG
  {
    font-size: 2.6vh;
  }
  
  #story_text
  {
    font-size: 1.45vh;
    margin: 0.4vh;
  }
}