/* ------ my ------*/
/*  global settings */

/* typography */
@font-face {
    font-family: 'Comics';
    src: url('../fonts/anime2_regular.ttf');
}
 
@font-face {
    font-family: 'Comics';
    src: url('../fonts/anime2_bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'Comics';
    src: url('../fonts/anime2_italic.ttf');
    font-style: italic;
}

* {
    box-sizing: border-box;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: #2a2529;
    background-size: cover;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 100%;
    
    overflow: hidden;
    background-position: center center;
    font-family: 'Comics', cursive;
    font-size: 3.5vw;
    touch-action: manipulation;
}

@media (min-width: 768px) { /* Devices larger than tablets */
    body {
        max-width: calc(100vh * 0.5625); /* Dynamic width for non-mobile screens */
        margin: 0 auto;
        overflow-x: hidden;
    }
}


/* typography */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
p, a, ul, ol, li, span, div, u {
    margin:0;
    padding:0;
    -webkit-tap-highlight-color: transparent;
    text-shadow: none;
    text-decoration: none;
}

hr {
    border-color:#28c0b2;
    background-color: #28c0b2;
    color: #28c0b2;
}

.font-huge { font-size: 6vw; }
.font-large { font-size: 4vw; }
.font-regular { font-size: 3.5vw; }
.font-small { font-size: 3vw; }
.font-tiny { font-size: 2.5vw; }

.color-blue-head { color: #28c0b2; }
.color-blue-side { color: #6ea4ff; }
.color-blue-content { color: #c5fdff; }

.color-fire { color: #ff4e25; }
.color-earth { color: #e6a367; }
.color-plant { color: #b0f84a; }
.color-water { color: #1493ff; }
.color-cold { color: #cdf0ff; }
.color-air { color: #c437ff; }
.color-electricity { color: #ffd237; }
.color-metal { color: #c5c3b8; }
.color-light { color: #fcf9ea; }
.color-dark { color: #0c051a; }

.color-stat-head-fitness {color: #ff534b; }
.color-state-content-fitness {color: #ffc9b9; }
.color-stat-head-charisma {color: #ffd34c; }
.color-state-content-charisma {color: #ffecb1; }
.color-stat-head-wizardry {color: #5dfff5; }
.color-state-content-wizardry {color: #d2fffc; }
.color-stat-head-nature {color: #83ff83; }
.color-state-content-nature {color: #c5ffc5; }

.color-gold {color:#f1b324}

.color-white { color: white; }
.color-twhite { color: #ffffffd4; }
.color-note { color: #b9adff; }
.color-warning { color: #ffb7db; }


.line100 { line-height: 100%;}
.line120 { line-height: 120%;}
.line140 { line-height: 140%;}
.line160 { line-height: 160%;}
.gap1 {gap: 1vw;}
.gap25 {gap: 2.5vw;}


.shadow-dark {
    -webkit-text-stroke: 0.7vw rgba(18, 0, 0, 0.64);
    paint-order: stroke fill;
    text-shadow: none;
}
.shadow-brown {
    -webkit-text-stroke: 0.7vw #321506;
    paint-order: stroke fill;
    text-shadow: none;
}

.glow-dark {
    text-shadow: 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014, 0 0 0.9vw #12000014;
}


.textright { text-align: right;}
.textcenter { text-align: center;}