@font-face {
    font-family: cabin;
    src: url("../Fonts/cabin.regular.ttf");
}
@font-face {
    font-family: arista;
    src: url("../Fonts/arista.ttf");
}
@font-face {
    font-family: rune;
    src: url("../Fonts/rune.ttf");
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #fff0f9;
  margin: 0;
  padding: 0;
  font-family: 'cabin', sans-serif;
}

.billElement{
    display: inline-block;
    position: absolute;
    left: 250px;
    top: 6px;
    font-size: 24px;
}

.startScreen{
    position:relative;
    background-color: white;
    width: 1280px;
    height: 720px;
    background-image: url('../images/BloodPrice/logo.png');
    z-index:1000;
}

.startScreenText {
    position: absolute;
    top: 482px;
    left: 515px;
    cursor:normal;

    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);

    font:40px arista;
    color: red;
}

.startButton {
    cursor:pointer;
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
    color: #ff80b2;
}

.startButton:hover {
    color:red;
}

.barcover {
    position:absolute;
    width:100%;
    height:100%;
    top: 0;
    left: 0;
    background-color:white;
    z-index:1000;
}

@keyframes startFade {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

.startFade {
    background-color:white;

    position:absolute;
    width: 1280px;
    height: 720px;
    z-index:1000;

    top:0;
    left:0;

    animation-name: startFade;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    z-index:1000;
    opacity:0;
}

.healthBar{
    width: 1280px;
    height: 50px;
    position: relative;
    background-color: #eb7cc1; /*#fdbee5;*/
    color: #fff0f9;
    font-size: 39px;
}

.girlHP{
    display: inline-block;
    position: absolute;
    left: 100px;
}

.fadeOut {
  font-size: 39px;
  top: 0px;

}

.epilogueEntry{
    display: inline-block;
}

.monstersona{
    position: absolute;
    opacity: 0.5;
}

.girlDamageGraphic{
display: inline-block;
   position: absolute;
   left: 170px;
   color: #fff0f9;
   top: 80px;
   z-index: 110;
}
.monsterDamageGraphic{
   display: inline-block;
   position: absolute;
   left: 970px;
   color: #fff0f9;
   top: 80px;
   z-index: 110;
}

.monsterHP{
   display: inline-block;
   position: absolute;
   left: 950px;
}

.outerBox {
    width: 1280px;
    height: 790px;
    position: relative;
    overflow:hidden;
}

.gameBox{
    background: url('../images/BGs/cityscape.png');
    width: 1280px;
    height: 720px;
    position: relative;
    overflow:hidden;
}

.bloodDoll, .monsterDoll{
    position: absolute;
    animation-iteration-count: infinite;
    animation-name: bobbing;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    z-index: 30;
}

.bloodDoll{
    top: 147px;
    left: 125px;
    animation-duration: 3.1s;
}

.monsterDoll{
    top: 0px;
    right: 0px;
    animation-duration: 4.3s;
    animation-delay: -2.1s;
}



.menuItem{
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
    vertical-align: middle;
    font-family: 'cabin', sans-serif;
    width: 301px;
    font-size: 39px;
    z-index: 13;
    cursor:pointer;
}

.menuItem::first-letter {
    font-size: 85%;
}

.menuHeader{
    font-size: 39px;
    width: 100%;
    text-align: center;
    background-color: #eb7cc1; /*#fdbee5;*/
    color: #fff0f9;
}

.menuInsides{
    font-size: 23px;
    margin-top: 25px;
    height: 130px;
}

.bloodPriceButton {
    padding: 5px;
    font-size: 39px;
    background-color: #a10000;
    color: #330000;
    border: 3px solid #aa0000;
    border-radius: 13px;
    cursor:pointer;
    margin-top:5px;
}

.cutsceneText {
   background-color: #fff0f9;
   border-radius: 13px;
   border: 3px solid #eb7cc1;
   padding: 8px;
   box-shadow: 0 5px 14px rgba(0,0,0,0.7);
   z-index:1000;
}

.replayButton{
    position: absolute;
   box-sizing:border-box;
   border: 6px solid #eb7cc1;
   opacity: 0.9;
   left: 400px;
   color: #fff0f9;
   top: 100px;
   padding: 15px;
   z-index: 1001;
   background-color: #fff0f9;
   width: 500px;
   height: 300px;
   vertical-align: top;
   font-family: 'cabin', sans-serif;
   color: #eb7cc1; /*#fdbee5;*/
   font-size: 72px;
   display: inline-block;
   border-radius: 13px;
   cursor:pointer;
}

.cutscene{
   position: absolute;
   box-sizing:border-box;
   border: 6px solid #eb7cc1;
   left: 10px;
   color: #fff0f9;
   top: 10px;
   padding: 15px;
   z-index: 1000;
   box-shadow: 0 0 0 20px #000000;
   background-color: #fff0f9;
   background: url('../images/BGs/cityscape.png');
   background-size: 4000px;
   background-position: -200px -300px;
   width: 1260px;
   height: 770px;
   vertical-align: top;
   font-family: 'cabin', sans-serif;
   color: #eb7cc1; /*#fdbee5;*/
   font-size: 34px;
   display: inline-block;
   border-radius: 13px;
   cursor:pointer;
   overflow:hidden;
}

.scene {
    width:1280px;
    height:770px;
    position: absolute;
    top:0px;
}

.autoscroller{
    position: relative;
    top: 0px;
    left: 0px;
}

.attackpopup{
   display: inline-block;
   position: absolute;
   left: 370px;
   color: #fff0f9;
   top: 80px;
   padding: 15px;
   z-index: 100;
   box-shadow: 0px 3px 13px #000000;
   background-color: #fff0f9;
   width: 530px;
   vertical-align: top;
   font-family: 'cabin', sans-serif;
   color: #eb7cc1; /*#fdbee5;*/
   font-size: 34px;
   display: inline-block;
   border-radius: 13px;
}


.menuItem:hover{
    background-color: #eb7cc1; /*#fdbee5;*/
    color: #fff0f9;

}

.invertedItem{
    background-color: #eb7cc1; /*#fdbee5;*/
    color: #fff0f9;
}



.menuHolder{
    border: 3px solid #eb7cc1; /*#fdbee5;*/
    position: absolute;
    bottom: 10px;
    left: 10px;
    box-shadow: 0px 3px 13px #000000;
    background-color: #fff0f9;
    width: 330px;
    height: 288px;
    vertical-align: top;
    font-family: 'cabin', sans-serif;
    color: #eb7cc1; /*#fdbee5;*/
    display: inline-block;
    border-radius: 13px;
    z-index: 100;
    overflow:hidden;
}

.bloodMenu1{
    left: 350px;
    display: none;
}

.bloodMenu2{
    left: 690px;
    width: 575px;
    display: none;
}


#output {
  padding: 20px;
  text-align: center;
}
.money{
    text-align: left;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.magicalCard{

}

.revertButton{
    position: absolute;
    top:400px;
    left:590px;
    font-size: 24px;
}

.purchaseButton{
    position: absolute;
    top:400px;
    left:790px;
    font-size: 24px;
}

button{
    background-color: #ffe2f8;
    border: 3px solid #eb7cc1; /*#fdbee5;*/
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
  font-family: 'cabin', sans-serif;
  color: #eb7cc1;
}
.portrait{
    border: 3px solid #eb7cc1; /*#fdbee5;*/
    float: left;
    margin:10px;
}
.tabs{
    text-align:left;
}
.tab{
    width:1000px;
     background-color: #ffe2f8;
    border: 3px solid #eb7cc1; /*#fdbee5;*/
    border-top:none;
}
.tabButton{
    margin: 0px;
    background-color: #ecd1e6;
    border-radius: 0px;
    border: 3px solid #efb3d8;
}


.tabButtonSelected{
    border: 3px solid #eb7cc1; /*#fdbee5;*/
    border-bottom: none;
    background-color: #ffe2f8;
    vertical-align: bottom;
}
.adventureContent{
    padding:10px;
}

.adventurePopup{
    border: 3px solid #eb7cc1; /*#fdbee5;*/
    background-color: #ffe2f8;
    padding: 25px;
    text-align: left;
    font-size: 18px;
    font-family: 'cabin', sans-serif;
    position: absolute;
    box-shadow: 0px 3px 13px #ef9ace;
    top: 5%;
    color: #ef9ace;
    left: 25%;
    border-radius: 13px;
    z-index: 10;
    width: 500px;
    height: 500px;
}

.girlContainer{
    display: inline-block;
    margin:10px;
    position: relative;
}
.ending{
    height: 650px;
    overflow: hidden;
    width: 1248px;
    position: absolute;
    left: 0;
    bottom: 0;
}
.sunGlow {
    width:2000px;
    height:2000px;
    position:absolute;
    background-image: radial-gradient(circle closest-side, rgba(255,65,0,1.0) 0%, rgba(255,65,0,0.3) 10%, rgba(255,65,0,0.0) 100%);
    top:175px;
    left:88px;
    mix-blend-mode: screen;

    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index:50;
}

@keyframes pulse {
    0% {
        width: 800px;
        height: 800px;
    }
    100% {
        width:400px;
        height:400px;
    }
}

.voidGlow {
    width:800px;
    height:800px;
    position:absolute;
    background-image: radial-gradient(circle closest-side, rgba(40,0,20,0.8) 0%, rgba(40,0,20,0.575) 25%, rgba(40,0,20,0.25) 50%, rgba(40,0,20,0.075) 75%, rgba(0,0,0,0.0) 100%);
    top:260px;
    left:960px;

    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

    animation-iteration-count: infinite;
    animation-name: pulse;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-duration: 1.2s;

    mix-blend-mode: multiply;

    z-index:15;

}

#birb {
    position:absolute;
    background-image: url('../images/protagonist.png');
    width:41px;
    height:41px;
    background-size:100% 100%;
    top:340px;
    left:120px;
    z-index: 31;
}

.friend {
    font-family: rune;
    position:relative;
    top:3px;
}

.eggCutscene{
    width: 200px;
    left: 500px;
    bottom: 100px;
    position: absolute;
}

.girlCutscene{
    bottom: 0px;
    position: absolute;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.birbCutscene{
    left: 300px;
    bottom: 100px;
    position: absolute;
    z-index: 100;
}



@keyframes bobbing {
    0% {
        -ms-transform: translate(0,0);
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }
    100% {
        -ms-transform: translate(0,-2%);
        -webkit-transform: translate(0,-2%);
        transform: translate(0,-2%);
    }
}

@keyframes hit {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: -8192px 0px;
    }
}

.hit {
    width:256px;
    height:256px;
    background-position: 0px 0px;

    position: absolute;
    animation-iteration-count: 1;
    animation-name: hit;
    animation-timing-function: steps(32, end);

    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

    z-index:60;
}

.hit1 {
    background-image: url("../images/BloodPrice/hit1.png");
    animation-duration: 0.75s;
}
.hit2 {
    background-image: url("../images/BloodPrice/hit2.png");
    animation-duration: 0.75s;
}

.damage {
    width: 1280px;
    height: 720px;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}

.damage1 {
    background-image: url('../images/BGs/damage1.png');
}
.damage2 {
    background-image: url('../images/BGs/damage2.png');
}
.damage3 {
    background-image: url('../images/BGs/damage3.png');
}