@charset "utf-8";

:root{
    --cor01: rgba(255, 255, 255, 0.85);
    --cor02: #ffffff;
    --cor03: #e6e6e6;
    --cor04: #00233c;
    --cor05: #00233cd2;
    --cor06: #010816;
    --cor07: #E8164E;
    --cor07: #F25561;
}

.caracteres {
    color: var(--cor06);
    text-align: center;
    font-weight: bold;
    padding-top: 1em;
}
#mapadecaracteres {
    height: 80vw;
    background-image: url("../midia/imagens/background-lines-large_02.png");
    background-position: top center;
    background-size: 100%;
    background-attachment: local;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}
#map {
    margin:0 16.82vw;
/*     height: 740px;
    overflow: auto; */
}

.charmap {
    position: relative;
    float: left;
    text-align: center;
    padding-top: 8vw;
    font-size: 2.65em;
    line-height: 1.2em;
}

.char {
    text-align: center;
    color: var(--cor06);
    padding: 0;
    font-weight: bold;
    display: inline-block;  
    width: 5vw;
    height: 5vw;
    box-sizing: border-box;
}
.char:hover { 
    background-color: #33333310;
    border:1px solid var(--cor06);
    cursor: crosshair;

}

.char:active { 
    position: fixed;
    top: 50vh;
    left: 75vh;
    font-size: 13.25em;
    color: var(--cor05);
    z-index: 2000;
}
.ss01 { 
    font-feature-settings: "dlig", "ss01";
    -moz-font-feature-settings: "dlig", "ss01";
    -webkit-font-feature-settings: "dlig", "ss01";
    -ms-font-feature-settings: "dlig", "ss01";
    -o-font-feature-settings: "dlig", "ss01";
}
.liga {
    font-feature-settings: "kern" on, "liga" on, "calt" off, "dlig";
    -moz-font-feature-settings: "kern" on, "liga" on, "calt" off, "dlig";
    -webkit-font-feature-settings: "kern" on, "liga" on, "calt" off, "dlig";
    -ms-font-feature-settings: "kern" on, "liga" on, "calt" off, "dlig";
    -o-font-feature-settings: "kern" on, "liga" on, "calt" off, "dlig";
}

.tnum { 
    font-feature-settings: "tnum";
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    -ms-font-feature-settings: "tnum";
    -o-font-feature-settings: "tnum";
}

.pnum {
    font-feature-settings: "pnum";
    -moz-font-feature-settings: "pnum";
    -webkit-font-feature-settings: "pnum";
    -ms-font-feature-settings: "pnum";
    -o-font-feature-settings: "pnum";
} 

.onum {
    font-feature-settings: "onum";
    -moz-font-feature-settings: "onum";
    -webkit-font-feature-settings: "onum";
    -ms-font-feature-settings: "onum";
    -o-font-feature-settings: "onum";
}

.numr {
    font-feature-settings: "kern" off, "liga" off, "calt" off, "numr";
    -moz-font-feature-settings: "kern" off, "liga" off, "calt" off, "numr";
    -webkit-font-feature-settings: "kern" off, "liga" off, "calt" off, "numr";
    -ms-font-feature-settings: "kern" off, "liga" off, "calt" off, "numr";
    -o-font-feature-settings: "kern" off, "liga" off, "calt" off, "numr";
}

.dnum {
    font-feature-settings: "dnom";
    -moz-font-feature-settings:  "dnom";
    -webkit-font-feature-settings: "dnom";
    -ms-font-feature-settings: "dnom";
    -o-font-feature-settings: "dnom";
}

.NDL {
    font-feature-settings: "kern" on, "calt" on;
    -moz-font-feature-settings: "kern" on, "calt" on;
    -webkit-font-feature-settings: "kern" on, "calt" on;
    -ms-font-feature-settings: "kern" on, "calt" on;
    -o-font-feature-settings: "kern" on, "calt" on;
}

@media screen and (min-width: 641px) and (max-width: 960px){
    #mapadecaracteres {
        background-image: url("../midia/imagens/background-lines-media_02.png");
        background-position: top center;
        background-size: 100%;
        background-attachment: local;
        background-repeat: no-repeat;
        background-blend-mode: multiply;
    }
    #map {
        margin:0 4vw;
    }
    
    .charmap {
        padding-top: 8vw;
        font-size: 2.16em;
        line-height: 1.1em;
    }
    
    .char {
        width: 9vw;
        height: 9vw;
    }
    
    .char:active { 
        left: 35vw;
        font-size: 13em;
    }
}

@media screen and (min-width: 481px) and (max-width: 640px){
    #mapadecaracteres {
        background-image: url("../midia/imagens/background-lines-peque_02.png");
        background-position: top center;
        background-size: 100%;
        background-attachment: local;
        background-repeat: no-repeat;
        background-blend-mode: multiply;
    }
    #map {
        margin:0 2vw;
    }
    
    .charmap {
        padding-top: 8vw;
        font-size: 2.32em;
        line-height: 1.15em;
    }
    
    .char {
        width: 7vw;
        height: 7vw;
    }
    
    .char:active { 
        left: 35vw;
        font-size: 13em;
    }
}

@media screen and (min-width: 280px) and (max-width: 480px){

    #map {
        margin:0 1vw;
    }
    
    .charmap {
        padding-top: 8vw;
        font-size: 2.08em;
        line-height: 1.1em;
    }
    
    .char {
        width: 11vw;
        height: 11vw;
    }
    
    .char:active { 
        left: 20vw;
        font-size: 13em;
    }
}