@font-face {
    font-family: Alemandra-regular;
    src: url(./Almendra/Almendra-Regular.ttf);
}
@keyframes damageNumber{
    from {filter: opacity(100%); bottom:300px;}
    to {filter:opacity(0%); bottom:400px;}
}
@keyframes fighterImpact0{
    0% {left:  0px;}
    15% {left: -40px; filter:opacity(20%)}
    55% {left: 30px;filter:opacity(100%)}
    85% {left: -15px; filter:opacity(20%)}
    100% {left: 0px; filter:opacity(100%)}
}
@keyframes fighterImpact1{
    0% {left:  100px;}
    15% {left: 55px; filter:opacity(20%)}
    55% {left: 130px;filter:opacity(100%)}
    85% {left: 85px; filter:opacity(20%)}
    100% {left:100px; filter:opacity(100%)}
}
@keyframes fighterImpact2{
    0% {left:  200px;}
    15% {left: 155px; filter:opacity(20%)}
    55% {left: 230px;filter:opacity(100%)}
    85% {left: 185px; filter:opacity(20%)}
    100% {left:200px; filter:opacity(100%)}
}
@keyframes fighterImpact3{
    0% {left:  300px;}
    15% {left: 255px; filter:opacity(20%)}
    55% {left: 330px;filter:opacity(100%)}
    85% {left: 285px; filter:opacity(20%)}
    100% {left:300px; filter:opacity(100%)}
}

@keyframes enemyImpact0{
    0% {left:  400px;}
    15% {left: 445px; filter:opacity(20%)}
    55% {left: 370px;filter:opacity(100%)}
    85% {left: 415px; filter:opacity(20%)}
    100% {left:400px; filter:opacity(100%)}
}
@keyframes enemyImpact1{
    0% {left:  500px;}
    15% {left: 545px; filter:opacity(20%)}
    55% {left: 470px;filter:opacity(100%)}
    85% {left: 515px; filter:opacity(20%)}
    100% {left:500px; filter:opacity(100%)}
}
@keyframes enemyImpact2{
    0% {left:  600px;}
    15% {left: 645px; filter:opacity(20%)}
    55% {left: 570px;filter:opacity(100%)}
    85% {left: 615px; filter:opacity(20%)}
    100% {left:600px; filter:opacity(100%)}
}
@keyframes enemyImpact3{
    0% {left:  700px;}
    15% {left: 745px; filter:opacity(20%)}
    55% {left: 670px;filter:opacity(100%)}
    85% {left: 715px; filter:opacity(20%)}
    100% {left:700px; filter:opacity(100%)}
}


html{
    font-family: Alemandra-regular;
}
#background{
    position:relative;
    margin:auto;
    width: 800px;
    height:600px;
    border: medium solid black;
    background-repeat: no-repeat;
}

#mainTitle{
    position:absolute;
    margin:auto;
    margin-top:0px;
    top:0px;
}
#menuTitle{
    position:relative;
    margin:auto;
    text-align: center;
    /*left:300px;
    top:150px;*/
    visibility: hidden;
    font-size:95px;
}
#menuButton{
    position:relative;
    margin-left:325px;
    margin-top:100px;
    visibility: hidden;
    font-size: 50px;
    font-family: Alemandra-regular;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 5px 5px 5px 5px black;
    background-color:rgb(235, 206, 170);
}

#storyCard{
    visibility: hidden;
    margin:auto;
    margin-top:-350px;
    width:500px;
    background-color:rgba(94, 93, 93, 0.9);
    border: 2px solid rgba(34, 33, 33, 0.884);
    border-radius: 10px;
    font-family: Alemandra-regular;
    font-weight: 570;
    font-size:large;
}

#storyNext{
    margin-left:165px;
    margin-bottom:15px;
    font-family: Alemandra-regular;
    font-weight: 700;
    font-size:larger;
    border-radius: 10px;
    box-shadow: 1.5px 1.5px 1.5px 1.5px black;
    background-color:rgb(235, 206, 170);
}


#createParty{
    position:absolute;
    visibility: hidden;
    left:500px;
    top:150px;
    height:325px;
    width:250px;
    background-color:rgba(94, 93, 93, 0.8);
    border: 2px solid rgba(34, 33, 33, 0.884);
    border-radius: 10px;
    font-family: Alemandra-regular;
    text-align: left;
    font-weight: 550;
}

#classSelect{
    font-family: Alemandra-regular;
    font-weight: 550;
    background-color:rgb(235, 206, 170);
}
#className{
    font-family: Alemandra-regular;
    background-color:rgb(235, 206, 170);
    font-weight: 700;
}
.classButton{
    position:absolute;
    bottom:12px;
    font-family: Alemandra-regular;
    font-weight: 700;
    border-radius: 10px;
    background-color:rgb(235, 206, 170);
}

.combatant{
    position:absolute;
    bottom: 250px;
    visibility: hidden;
}
.damageNumber{
    font-size:65px;
    color:rgb(88, 9, 9);
    font-weight: 700;
    visibility: hidden;
    width: min-content;
    position:absolute;
    /*font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif*/
}

.arrow{
    position:absolute;
    left:0px;
    bottom:400px;
    visibility: hidden;
}

#figtherInfo{
    position:absolute;
    visibility: hidden;
    left:25px;
    top:375px;
    width:350px;
    background-color:rgba(94, 93, 93, 0.8);
    border: 2px solid rgba(34, 33, 33, 0.884);
    border-radius: 10px;
    font-family: Alemandra-regular;
    text-align: left;
    font-weight: 550;
}
#figtherInfo header{
    line-height: 70%;
    padding-left:20px;
}
.icons{
    /*float:left;*/
    display:inline;
    position:relative;
    top:2px;
    left:-2px;
}
#figtherInfo p{
    position:relative;
    left:10px;
    word-spacing: 150%;
    margin-top: -5px;
}
#abilities{
    position:relative;
    top:5px;
}
.abilityIcon{
    position:relative;
    bottom:0px;
    left:0px;
    margin: 7px;
}
#figtherInfo hr{
    color:rgb(42, 44, 48);
}

#enemyInfo{
    position:absolute;
    visibility: hidden;
    left:425px;
    top:375px;
    width:350px;
    background-color:rgba(94, 93, 93, 0.8);
    border: 2px solid rgba(34, 33, 33, 0.781);
    border-radius: 10px;
    font-family: Alemandra-regular;
    text-align: left;
    line-height: 70%;
}
#enemyInfo h2{
    padding-left:20px;
}
#enemyDescription{
    line-height:100%;
}
#campfireInfo{
    position:absolute;
    visibility: hidden;
    left:70px;
    top:20px;
    width:450px;
    height: 210px;
    background-color:rgba(94, 93, 93, 0.8);
    border: medium solid rgba(34, 33, 33, 0.781);
    border-radius: 10px;
    font-family: Alemandra-regular;
    text-align: left;
    font-weight: 600;
}
#campfireInfo h2{
    line-height: 50%;
    margin-bottom: -25px;
}
#xpStats{
    font-size:small;
    position: relative;
    left:250px;
    top: -20px;
    color:rgb(17, 17, 17);
    line-height: 90%;
}
.xpStatsLabel{
    font-weight: 600;
    color: black;
    font-size:medium;
}
#campfireInfo p{
    margin-top:-5px;
    margin-bottom:0px;
}
#sleepSelect{
    position:relative;
    width:64px;
    height:64px;
    margin:3px 3px 3px 10px;
}
#levelUpSelect{
    position:relative;
    filter: brightness(100%);
    width:64px;
    height:64px;
    margin:3px 3px 3px 10px;
}


#campfire{
    position:absolute;
    visibility: hidden;
    left:320px;
    top:220px;
    width:94px;
    height:186px;
}

#upgrade{
    position:absolute;
    visibility: hidden;
    left:70px;
    top:20px;
    width:450px;
    height: 180px;
    background-color:rgba(94, 93, 93, 0.8);
    border: medium solid rgba(34, 33, 33, 0.781);
    border-radius: 10px;
    font-family: Alemandra-regular;
    text-align: left;
    font-weight: 600;
}
#upgrade h3{
    margin-left:50px;
}
.upgradeStats{
    position:relative;
    font-size: 20px;
    font-family: Alemandra-regular;
    font-weight: 700;
    border-radius: 5px;
    box-shadow: 2px 2px 2px 2px black;
    background-color:rgb(235, 206, 170);
    margin-right:50px;
    margin-left:20px;
    width:45px;
}