/*@import url('https://fonts.googleapis.com/css2?family=Mirza&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Galdeano&display=swap');*/

@font-face {
    font-family: 'galdeanoregular';
    src: url('fonts/galdeano-regular-webfont.woff2') format('woff2'),
         url('fonts/galdeano-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('fonts/AveriaSerifLibre-Regular.woff2') format('woff2'),
        url('fonts/AveriaSerifLibre-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


html, body {
    margin:0;
    height: 100%;
}

body {
    min-height: 100%;
    background: #222;   
}



body {
    /*font-family: 'Rosario', serif;
    font-family: 'Mirza', cursive;*/
    font-family: 'galdeanoregular', sans-serif;
    font-size: 1.2em;
}

a, a:visited {
    text-decoration: none;
}

h2 {
    text-decoration: underline;
}

img {
    max-width: 100%;
    margin: auto;	
}

#page-body strong {
    color: #d9d9d9;;
}

.img-uploaded {
    width: 100%;
    max-width: 375px;
}

#main-container {
    display: block;
    min-height: 100%;
    /*background: linear-gradient(rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.8)),url(../gamegraphics/forest.webp)no-repeat center center !important;*/
    background-size: cover !important;
    background-attachment: fixed !important;
    padding: 40px;
}

.filter-animation {
    animation: filter-animation 0.75s forwards;
    -webkit-animation: filter-animation 0.75s forwards;
}
  
@keyframes filter-animation {

    0% {
        filter: opacity(0%);
    }

    100% {
        filter: opacity(100%);
    }
}

.white {
    color: #fff;
}

.center {
    text-align: center;
}

.number-good {
    color: yellowgreen;
}

.number-bad {
    color: orangered;
}

.number-neutral {
    color: #2e85ca;
}

.number-white {
    color: white;
}

#read-container {
    
    /*background: #efd8b0 url(../gamegraphics/parch2.jpg);
    background: linear-gradient(180deg, rgb(239 210 152) 0%, rgb(228 198 159) 50%);
    box-shadow: inset 0 0 50px #ff98005e;
    background: linear-gradient(180deg, rgb(239 210 152) 0%, rgb(243 195 133) 100%);
    background-size: cover;
    background: rgb(33, 33, 38);*/
    background: rgb(30, 30, 31);
    color: #bebebe;
    width: 700px;
    font-size: 1.2em;
    line-height: 1.4em;
    margin: 40px auto 0px auto;
    padding: 40px;
    /*animation: createBox .25s;*/
    min-height: 600px;
}

@keyframes createBox {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

#page-number, #dialog-name {
    text-align: center;
    font-size: 1.8em;
    line-height: 1.1em;
    font-weight: bold;
    margin-bottom: 50px;
    color: #fff;
}

#page-body, #dialog-body {
    /*display: inline-block;*/
    width: 100%;
}

/* img[src$='.jpg'], img[src$='.png'] */
#page-body img[src$='.jpg'] {
    /*-webkit-box-shadow: 0 0px 30px 0 rgb(173 116 3 / 75%);
    box-shadow: 0 0px 30px 0 rgb(173 116 3 / 75%); */
    border: solid 10px #8da2a5;
    background: #2b2b2b;
}

.link {
    font-weight: bold;
    text-decoration: none;
    color: #2e85ca;
    cursor: pointer;
}

.link:hover {
    color: teal;
}

.link-history {
    color: #828282;
}

.handout {
    font-family: 'Averia Serif Libre';
    background: #131313;
    font-size: 0.8em;
    margin: 40px 0px;
    padding: 25px;
    border-style: dotted;
    border-color: #4f4f4f;
}

#button-play, #button-roll-reject, #button-roll-accept, #dialog-roll, .dialog-combat-option, .button-spend, .generic-button {
 
    background-image: -webkit-linear-gradient(top, #414141, #171717);
    background-image: -moz-linear-gradient(top, #414141, #171717);
    background-image: -ms-linear-gradient(top, #414141, #171717);
    background-image: -o-linear-gradient(top, #414141, #171717);
    background-image: linear-gradient(top, #414141, #171717);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-shadow: 0 0 5px #000000;
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    padding: 10px;
    border: solid #0c0c0c 3px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    margin: 20px 0px 0px 0px;
}

@media (hover: hover) {
    #button-play:hover, #button-roll-reject:hover, #button-roll-accept:hover, #dialog-roll:hover, .dialog-combat-option:hover, .button-spend:hover, .generic-button:hover {
        background: #dbad9d;
        -webkit-box-shadow: 0 0px 30px 0 rgb(173 116 3 / 75%);
        box-shadow: 0 0px 30px 0 rgb(173 116 3 / 75%);
        color: #000;
        text-shadow: none;
    }
}

#button-play:active, #button-roll-reject:active, #button-roll-accept:active, #dialog-roll:active, .dialog-combat-option:active, .button-spend:active, .generic-button:active {
        background: #dbad9d;
        -webkit-box-shadow: 0 0px 30px 0 rgb(173 116 3 / 75%);
        box-shadow: 0 0px 30px 0 rgb(173 116 3 / 75%);
        color: #000;
        text-shadow: none;
    }

#button-play::selection, #button-roll-reject::selection, #button-roll-accept::selection, #dialog-roll::selection, .dialog-combat-option::selection, .stat-icon::selection, .button-spend::selection, .generic-button::selection {
    color: none;
    background: none;
}

#button-play::-moz-selection, #button-roll-reject::-moz-selection, #button-roll-accept::-moz-selection, #dialog-roll::-moz-selection, .dialog-combat-option::-moz-selection, .stat-icon::selection, .button-spend::-moz-selection, .generic-button::-moz-selection {
    color: none;
    background: none;
}

.dialog-combat-option {
    text-align: left;
}

.dialog-combat-option img, .dialog-combat-option span {
    vertical-align: middle;
    /*-webkit-filter: drop-shadow(0px 2px 2px #222);
    filter: drop-shadow(0px 2px 2px #222);*/
}
.dialog-combat-option .stat-icon {
    width: 50px !important;
}


#stats-table td, #character-attributes td, #character-abilities td, #character-inventory td, #character-roll-attributes td, #character-roll-abilities td {
    text-align: center;
    vertical-align: middle;
}

#character-attributes, #character-abilities, #character-roll-attributes, #character-roll-abilities {
    background: #00000024;
    padding: 20px;
    border-radius: 5px;
    width: 47%;
    border: solid 1px #525252;
}

#character-inventory {
    margin-top: 20px;
    background: #00000024;
    padding: 20px;
    border-radius: 5px;
    width: 100%;
    border: solid 1px #525252;
}

#character-fortune {
    margin-top: 10px;
    background: #00000024;
    padding: 20px;
    border-radius: 5px;
    border: solid 1px #525252;
    font-size: 0.9em;
}

#character-fortune h2 {
    text-decoration: none;
    margin: 5px auto 5px auto;
    color: #eee;
}

#character-attributes h2, #character-abilities h2, #character-inventory h2, #character-roll-attributes h2, #character-roll-abilities h2 {

    text-decoration: none;
    margin: 5px auto 20px auto;
    color: #eee;
}

#character-attributes {
    float: left;
}

#character-attributes hr, #character-abilities hr, #character-inventory hr, #character-roll-attributes hr, #character-roll-abilities hr  {
    color: #525252;
    margin: 8px 0px;
}

#character-abilities {
    float: right;
}

#stats-table h2 {
    text-decoration: none;
    color: #fff;
}

.stat-icon {
    width: 60px;
    margin: 0px 20px 0px 0px;
    border: solid 1px #8a8a8a;
    vertical-align: middle;
}

.stat-icon-combat {
    width: 50px;
    margin: 0px 20px 0px 0px;
}

#inventory-container {
    background: #181818;
    padding: 20px;
    border: solid 1px #666;
}

.inv-item {
    width: 25%;
    float: left;
    font-size: 0.9em;
    text-align: center;
    margin: 10px 0px;
}

.inv-icon {
    /*height: 70px;*/
    cursor: pointer;
    max-height: 100px;
    /*margin: 0px 20px 0px 0px;
    margin: 0px 0px 15px 0px;*/
}

.ui-inspect {
    width: 70px;
    margin: 0px 20px 0px 0px;
    cursor: pointer;
}

.inv-icon-inspect {
    width: 100px;
   }
#object-inspect {
    text-align: center;
}

.stat-number, .stats-table-value {
    font-weight: bold;
    font-size: 1.3em;
    color: #eee;
}

/* Dialog */

#dialog-container {
    position: fixed;
    width: 100%;
    top: 0;
    background: #00000099;
    height: 100vh;
}

#dialog-container {
    display: none;
}

#dialog {
    width: 100%;
    /*background: #00000024;*/
    padding: 40px;
    /*border: solid 1px #525252;
    border-radius: 5px;*/
}

#dialog h2 {
    text-decoration: none;
    margin-top: 0;
}

#dialog-title {
    text-align: center;
}

#dialog-description {
    text-align: center;
}

#dialog-description .stat-icon {
    margin: 0px;
}

#dialog-description .stat-icon {
    width: 150px;
    animation: grow 0.75s;   
}



@keyframes grow {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(2.5) rotate(360deg); }
    100% { transform: scale(1) rotate(0deg); }
    90% { box-shadow: 0 0px 30px 0 rgb(173 116 3 / 75%); }
}

#dialog-content {
    text-align: center;
    /*height: 210px;*/
    margin-top: 20px;
}

#dialog-interact {
    font-size: 1.2em;
    text-align: center;
}

#dialog-interact a {
    color: #2e85ca;
}

#dialog-roll-text {
    font-size: 1.4em;
    line-height: 1.1em;
}

#dialog-roll-text strong {
    color: #eee;
}

.dialog-close {
    font-size: 2em;
    cursor: pointer;
}

.reward-xp, .roll-request-dice {
    margin: 0;
    height: 40px;
    -webkit-filter: drop-shadow(0px 2px 2px #222);
    filter: drop-shadow(0px 2px 2px #222);
    vertical-align: middle;
}

#rewards-spend {
    margin: auto;
}

#rewards-spend td {
    padding: 5px;
}

#rewards-spend .stat-icon {
    width: 70px;
}

.rewards-spend-text {
    font-size: 1.2em;
}

#rewards-spend .button-spend {
    margin: 0;
}

#dialog-content .dice {
    margin: 0;
    max-width: 130px;
}

#dialog-content .dice-rolled-holder {
    width: 150px;
    height: 150px;
}

#stat-sides-display {
    font-size: 1em;
    margin: 0;
}

.combat-stat-icon-top {
    width: 97px;
    margin: 0px 20px 0px 0px;
    animation: grow 0.75s;
    /*border: solid 1px #a19f9f;*/
    float: left;
}

.combat-header {
    min-height: 112px;
    background: #141414;
    padding: 10px;
    border: solid 1px #474747;
    font-size: 20px !important;
}

.combat-monster {
    padding: 0px;
}



#combat-round {
    background: #141414;
    padding: 10px;
    border: solid 1px #474747;
}


.combat-result {
    font-size: 1.2em;
}

.combat-result a {
    color: #2e85ca;
}

.less {
    color: orangered;
}

.okay {
    color: #3dad1f;
}

.dice {
    animation: rotateDice 1s;
}

.history-entry {
    background: #181818;
    padding: 10px 20px;
    margin: 5px 0px;
}

.history-open-close {
    background: #111;
    padding: 20px;
}

#character-roll-attributes {
    float: left;
}

#character-roll-abilities {
    float: right;
}

.character-roll-title {
    font-size: 1.3em;
    color: #fff;
    text-align: center;
    padding-bottom: 20px;
}

.ql-size-large {
    font-size: 1.5em;
    color: #6abbd5;
}

#view-information strong {
    color: #eee;
}



/* The Modal (background) */
.modal {
    display: none;
    z-index: 1;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #101010;
    color: #bcbcbc;
    font-size: 1.5em;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%; 
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* The Close Button */
  
  /*
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 40px;
    font-weight: bold;
  }

.close:hover, .close:focus {
    color: limegreen;
    text-decoration: none;
    cursor: pointer;
  }

  */

  .close {
    float: right;
  }

  .close img {
    height: 30px;
    cursor: pointer;
  }
  
  

  .modal a, .modal a:visited {
    color: #2e85ca;
  }


@keyframes rotateDice {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}




@media only screen and (max-width: 800px) {

    #view-body {
        margin: 0 auto;
        width: 100%;
    }

    #read-container, #main-container {
        width: 100% !important;
        display: flex;
        margin: 0px auto;
        padding: 40px 20px 20px 20px;
    }

    #main-container {
        width: 100% !important;
        margin: 0px auto;
        padding: 20px 0px 0px 0px;
    }

    .modal-content {
        width: 80%;
    }
}

@media only screen and (max-width: 550px) {

    #character-attributes, #character-abilities, #character-roll-attributes, #character-roll-abilities {
        float: revert;
        margin: auto;
        width: 100% !important;
        margin-bottom: 20px;
    }

    #character-inventory td {
        padding: 10px;
    }

    #dialog {
        height: 80%;
        top: 15%;
    }

    #dialog-content .dice {
        margin: 0;
        max-width: 100px;
        height: 100px;
    }

    #dialog-content .dice-rolled-holder {
        height: 100px;
        max-width: 100px;
    }

    .rewards-spend-icon {
        padding: 0px !important;
    }
}

@media only screen and (max-width: 450px) {

    .dialog-combat-option span {
        display: block;
        margin-top: 10px;
    }

    .dialog-combat-option {
        text-align: center;
    }

    .inv-icon {
        width: auto;
    }

    .modal-content {
        font-size: 0.9em;
    }
}