html{
    background: black;
}
body {
    margin: 0 auto;
}

body > div {
    height: 100vh;
}

button:hover{
    cursor: pointer;
}


/* /////////Title Page///////////// */
body > div#first {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center; /* aligns item top to bottom on column*/
    align-items: center;  /* aligns items left to right on column*/
    padding: 8px;
    background-color: black;
}

h1#title{
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-size: 150px;
    text-shadow: 10px 20px 5px red;
    margin-top: 0;
}
button#start {
    color: red;
    text-transform: uppercase;
    font-size: 70px;
    background: transparent;
}


/* /////////Story Page///////////// */
body > div#story {
    background-color: black;
    display: none;
    /* display: flex; */
    flex-direction: column;
}
.story-text {
    flex: 1;
    text-align: left;
    font-size: 3em;
    color: white;
    animation-name: story-paragraph;
    animation-duration: 15s;
    /* margin-top: 900px; */
}
@keyframes story-paragraph {
    from {margin-top: 100vh;}
    to {margin-top: 0;}
}
/* .story-animation {
    flex: 1;
    background-color: black;
} */


/* /////////Create Page///////////// */
body > div#create {
    display: none;
    flex-direction: row;
    padding: 2px;
}
div.create-char {
    display: flex;
    flex-direction: column;
    background-color: black;
    justify-content: space-between;
}
.create-char > h2 {
    font-size: 50px;
    text-align: center;
    color: white;
}
.create-char > h4 {
    font-size: 30px;
    margin: 50px 0 0 0;
    text-align: center;
    color: white;
}
.char-gender {
    display: flex;
    border: solid black;
    margin-bottom: 20px;
    
}
.char-gender > button {
    flex: 1;
    font-size: 1.5em;
    color: white;
    background-color: transparent;
}
.char-race{
    display: flex;
    border: solid black;
    margin-bottom: 20px;
}
.char-race > button {
    flex: 1;
    font-size: 1.5em;
    color: white;
    background-color: transparent;
}
.char-class {
    display: flex;
    border: solid black;
    margin-bottom: 20px;
}
.char-class > button {
    flex: 1;
    font-size: 1.5em;
    color: white;
    background-color: transparent;
}
.create-char > label {
    margin-top: 110px;
    font-size: 3em;
    text-align: center;
    color: white;
}
.create-char > input:nth-of-type(1){
    border: double;
    background-color: white;
    text-align: center;
    color: black;
    height: 30px;
    font-size: 1em;
    margin: 10px 80px;
}
.create-char > input:nth-of-type(2){
    margin-top: 120px;
    font-size: 3em;
    color: white;
    background-color: transparent;
}

.create-char > input:nth-of-type(2):hover {
    cursor: pointer;
}

div#char-image {
    flex: 1;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

div#char-image > p {
    font-size: 1.5em;
    color: white;
}

div#char-image > div{
    background: #0000007d;
    visibility: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

div#char-image > div > ul {
    margin: 0;
    font-size: 1.5em;
    list-style: none;
    display: flex;
    justify-content: space-around;
    padding: 5px 0;
    color: white;
}

div#char-image > div > p{
    margin: 0;
    padding: 10px 20px;
    font-size: 1.5em;
    color: white;
}

div#char-image > div > p#stats-description {
    position: absolute;
    background: #0000007d;
    top: 100%;
    visibility: hidden;
}

/* Characters on Create Page */
.male-human-melee{
    display: none;
    /* position: absolute;
    top: 17%;
    left: 45%; */
}
.male-human-range{
    display: none;
    max-width: 100%;
    max-height: 618px;
}
.male-elf-range {
    display: none;
    /* position: absolute;
    top: 17%;
    left: 45%; */
}
.male-elf-magic {
    display: none;
    /* position: absolute;
    top: 17%;
    left: 45%; */
}
.female-human-range {
    display: none;
    max-width: 100%;
    max-height: 618px;
    /* position: absolute;
    height: 700px;
    left: 30%;
    bottom: 15%; */
}

.female-human-melee{
    display: none;
    max-width: 100%;
    max-height: 618px;
}

.female-human-magic{
    display: none;
    max-width: 100%;
    max-height: 618px;
}



/* /////////Main Page///////////// */
body > div#main {
    display: none;
    flex-direction: column;
    justify-content: space-between;
}
div.character {
    display: flex;
    flex-direction: column;
    width: fit-content;
    justify-content: space-around;
    font-size: 1.5em;
    background-color: rgb(0 218 253 / 35%);
    background: #0000007d;
    color: white;
    height: 200px;
    padding: 10px;
    position: relative;
}
div.character > i{
    cursor: pointer;
    width: fit-content;
}
div.character > i:hover{
    color: red;
}
div.character > small {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 45px;
    visibility: hidden;
}
div.character > i:hover ~ small {
    visibility: visible;
}
div.character > div {
    display: flex;
    align-items: baseline;
    justify-content: center;
}
div.character > div > div {
    padding: 0 20px;
}
div.buttons {
    position: relative;
    display: flex;;
    justify-content: stretch;
    background-color: black;
    padding: 3px 0px;
}
#fights-left {
    display: none;
    font-size: 2rem;
    margin: 0;
    color: white;
    position: absolute;
    z-index: 2;
    bottom: 80%;
    left: 43%;
    background: #0000007d;
    padding: 5px;
}

div#char-image2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Characters on Main Page */
.male-human-melee2{
    display: none;
    /* position: absolute;
    top: 20%;
    left: 40%; */
}
.male-human-range2{
    display: none;
    max-width: 100%;
    max-height: 618px;
}
.male-elf-range2 {
    display: none;
    /* position: absolute;
    top: 20%;
    left: 40%; */
}
.male-elf-magic2 {
    display: none;
    /* position: absolute;
    top: 20%;
    left: 40%; */
}
.female-human-range2 {
    display: none;
    max-width: 100%;
    max-height: 618px;
    /* position: absolute;
    height: 700px;
    left: 20%;
    bottom: 12%; */
}

.female-human-melee2{
    display: none;
    max-width: 100%;
    max-height: 618px;
}

.female-human-magic2{
    display: none;
    max-width: 100%;
    max-height: 618px;
}


/* /////////Store Pop up///////////// */
div.store {
    display: none;
    height: 600px;
    width: 900px;
    flex-direction: column;
    border: solid black;
    background-color: rgba(200, 200, 200, 0.8);
    background-image: url(https://i.imgur.com/1FwyJIz.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: overlay;
    margin: 0 540px;
}
.store > button {
    background-color: black;
    color: red;
    width: 50px;
    margin-right: 832px;
}
.store > h2 {
    flex: 1;
    color: black;
    font-size: 3em;
    margin: 10px;
    text-transform: uppercase;
    text-align: center;
}
.store > #atk-potion {
    flex: 2;
    display: flex;
    gap: 10px;
}
#atk-potion > img {
    height: 235px;
}
#atk-potion > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
#atk-potion > div >  p {
    color: black;
    font-size: x-large;
    margin: 10px 0;
}
#atk-potion > div > button {
    background-color: black;
    color: white;
    font-size: 1.5em;
    flex-grow: .5;
    width: 100px;
    padding: 0;
}
#atk-potion > div > button:hover {
    color: red
}
.store > #def-potion {
    flex: 2;
    display: flex;
    gap: 10px;
}
#def-potion > img {
    height: 235px;
    width: 154px;
}
#def-potion > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
#def-potion > div > p {
    color: black;
    font-size: x-large;
    margin: 10px 0;
}
#def-potion > div > button {
    background-color: black;
    color: white;
    font-size: 1.5em;
    flex-grow: .5;
    width: 100px;
    padding: 0;
}
#def-potion > div > button:hover {
    color: red;
}


/* /////////Fight Pop up///////////// */
div.fight {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    border: solid black;
    background-color: white;
    height: 600px;
    margin: 0 100px;
    background-image: url("https://i.imgur.com/N4djzUk.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.fight > button {
    background-color: black;
    color: red;
    width: 50px;
}
.fight > div.fight-animation{
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.fight-animation > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
progress {
    width: 200px;
    background: none;
    color: green;
}
  
progress::-moz-progress-bar {
    background: red;
}
  
progress::-webkit-progress-value {
    background: green;
}
  
progress::-webkit-progress-bar {
    background: red;
}
.fight > div:nth-of-type(2) {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    height: 10vh;
    background-color: rgb(250, 250, 250, .8);   
}
.fight > div:nth-of-type(2) > .fight-text {
    overflow: auto;
    width: 100%;
    text-align: center;
}
#first-text {
    list-style-type: none;
    font-size: 2.5em;
}
#second-text {
    font-size: 2.5em;
}
.fight > div:nth-of-type(2) > button {
    color: white;
    font-size: 1.5em;
    background-color: black;
    text-transform: uppercase;
}
.fight > div:nth-of-type(2) > button:hover {
    color:red;
}


/* Characters on Fight Pop Up */
.male-human-melee3{
    display: none;
    height: 300px;
    width: 300px;
    padding-left: 30%;
}

.male-human-melee-enemy {
    display: none;
    height: 300px;
    width: 300px;
    padding-left: 30%;
    transform: rotateY(180deg);
    filter: hue-rotate(110deg);
}

.male-human-range3{
    display: none;
    height: 300px;
    width: 100%;
}

.male-human-range-enemy{
    display: none;
    height: 300px;
    width: 100%;
    transform: rotateY(180deg);
    filter: hue-rotate(110deg);
}

.male-elf-range3 {
    display: none;
    height: 300px;
    width: 300px;
}

.male-elf-range-enemy {
    display: none;
    height: 300px;
    width: 300px;
    transform: rotateY(180deg);
    filter: hue-rotate(110deg);
}

.male-elf-magic3 {
    display: none;
    height: 300px;
    width: 300px;
}

.male-elf-magic-enemy {
    display: none;
    height: 300px;
    width: 300px;
    transform: rotateY(180deg);
    filter: hue-rotate(110deg);
}
.female-human-range3 {
    display: none;
    height: 300px;
    width: 260px;
}
.female-human-range-enemy {
    display: none;
    height: 300px;
    width: 260px;
    transform: rotateY(180deg);
    filter: hue-rotate(110deg);
}

.female-human-melee3{
    display: none;
    height: 300px;
    width: 100%;
}
.female-human-melee-enemy{
    display: none;
    height: 300px;
    width: 100%;
    transform: rotateY(180deg);
    filter: hue-rotate(110deg);
}

.female-human-magic3{
    display: none;
    height: 300px;
    width: 100%;
}
.female-human-magic-enemy{
    display: none;
    height: 300px;
    width: 100%;
    transform: rotateY(180deg);
    filter: hue-rotate(110deg);
}

 /* Weapons */
.arrow {
    /* display: none; */
    height: 25px;
    width: 110px;
    position: absolute;
    bottom: 38%;
    left: 20%;
    opacity: 0;
}
.spell {
    /* display: none; */
    width: 90px;
    position: absolute;
    bottom: 37%;
    left: 17%;
    opacity: 0;
}

/* Fight animations */
.pl-arrow-animation{
    animation-name: arrow-animation;
    animation-duration: 1s;
}
.en-arrow-animation {
    animation-name: enemy-arrow-animation;
    animation-duration: 1s;
}
.player-spell-animation {
    animation-name: spell-animation;
    animation-duration: 1s;
}
.enemy-spell-animation{
    animation-name: enemy-spell-animation;
    animation-duration: 1s;
}
@keyframes arrow-animation {
    0% {left: 20%;}
    5%{opacity: 1;}
    90% {opacity: 1;}
    100% {left: 79%; opacity: 0;}
}
@keyframes enemy-arrow-animation {
    0% {left: 75%; filter: hue-rotate(110deg); transform: rotateY(180deg);}
    5%{opacity: 1;}
    90% {opacity: 1;}
    100% {left: 16%; opacity: 0; filter: hue-rotate(110deg); transform: rotateY(180deg);}
}
@keyframes spell-animation {
    0% {left: 17%;}
    5%{opacity: 1;}
    90% {opacity: 1;}
    100% {left: 80%; opacity: 0;}
}
@keyframes enemy-spell-animation {
    0% {left: 78%; filter: hue-rotate(110deg);}
    5% {opacity: 1;}
    90% {opacity: 1;}
    100% {left: 16%; opacity: 0; filter: hue-rotate(110deg);}
}


/* /////////Eat Pop up///////////// */
div.eat {
    display: none;
    height: 600px;
    width: 900px;
    flex-direction: column;
    justify-content: space-between;
    border: solid black;
    background-color: white;
    margin: 0 540px;
}
.eat > button {
    background-color: black;
    color: red;
    width: 50px;
}
.eat > div:nth-of-type(1) {
    flex: 1;
}
.eat > div:nth-of-type(2) {
    flex: 1;
    background-color: rgba(0,0,0,.8);
    overflow: auto;
}
#eat-list {
    list-style-type: none;
    color: white;
    text-align: center;
}
.eat > div > #eat-text {
    color: white;
    text-align: center;
    font-size: 1.5em;
}


/* /////////Work Pop up///////////// */
div.work {
    display: none;
    height: 600px;
    width: 900px;
    flex-direction: column;
    justify-content: space-between;
    border: solid black;
    background-color: white;
    margin: 0 540px;
}
.work > button {
    background-color: black;
    color: red;
    width: 50px;
}
.work > div:nth-of-type(1) {
    flex: 1;
}
.work > div:nth-of-type(2) {
    flex: 1;
    background-color: rgba(0,0,0,.8);
    overflow: auto;
}
#work-list {
    list-style-type: none;
    color: white;
    text-align: center;
}
.work > div >  #work-text {
    color: white;
    text-align: center;
    font-size: 1.5em;
}
#store{
    flex: 2;
    color: white;
    background-color: transparent;
    font-size: 250%;
    text-transform: capitalize;
    padding: 10px 0px;
}
#fight {
    flex: 4;
    color: white;
    background-color: transparent;
    font-size: 250%;
    text-transform: capitalize;
}
#eat {
    flex: 1;
    color: white;
    background-color: transparent;
    font-size: 150%;
    text-transform: capitalize;
    background-color: transparent;
}
#work {
    flex:1;
    color: white;
    background-color: transparent;
    font-size: 150%;
    text-transform: capitalize;
}

/* Background images */

.human-background {
    background-image: url("https://i.imgur.com/KQPZFI0.png" );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.elf-background {
    background-image: url("https://i.imgur.com/hpmfpZd.png" );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.dwarf-background {
    background-image: url("https://i.imgur.com/GV9ndDe.jpg" );
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



/* /////////Modal///////////// */
.display{
    display: inline-block!important;
}
.pop-up {
    display: flex!important;
}