/* Importação de fontes */
    @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Maven+Pro:wght@400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
    /*@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');*/

/* Importação de estilos diferentes */
@import 'https://cdn.quilljs.com/1.3.6/quill.snow.css';

/* Definições bases para o site e variáveis */
    :root {
        /* font-family: 'Roboto', sans-serif; */
        font-family: 'Roboto', sans-serif;
        font-weight: normal;
        font-size: 18px;
        color: #313131;
        --azul: #3FA9F5;
        --branco: #FFFFFF;
        --preto: #000000;
        --pretoSecundario: #313131;
        --verde: #26A65C;
        --marronClaro: #F1B264;
        --dourado: #F2B263;
        --marrom: #733838;
        --bordaGazeta: #BF6341;
        --laranja: #BF372A;
        --vermelho: #BF372B;
        --vinho: #723938;
        --cinzaClaro: #F2F2F2;
        --cinza: #888585;
        --cinzaEscuro: #313131;
        --shadow-color: 0deg 0% 61%;
        --shadow-elevation-low:
            0px 1px 1.3px hsl(var(--shadow-color) / 0.28),
            0px 4.1px 5.4px -1.3px hsl(var(--shadow-color) / 0.54);
        --shadow-elevation-medium:
            0px 1px 1.3px hsl(var(--shadow-color) / 0.26),
            0.1px 6.1px 8px -0.6px hsl(var(--shadow-color) / 0.43),
            0.2px 20.5px 26.8px -1.3px hsl(var(--shadow-color) / 0.59);
        --shadow-elevation-high:
            0px 1px 1.3px hsl(var(--shadow-color) / 0.29),
            0.1px 13.4px 17.5px -0.3px hsl(var(--shadow-color) / 0.4),
            0.3px 28.4px 37.1px -0.6px hsl(var(--shadow-color) / 0.51),
            0.5px 55.7px 72.7px -1px hsl(var(--shadow-color) / 0.62),
            0.9px 105px 137px -1.3px hsl(var(--shadow-color) / 0.73);
        --fonteTexto: 'Roboto', sans-serif;
        --fonteTextoSecundario: 'Maven Pro', sans-serif;
        --fonteTitulo: 'Source Serif 4', serif;
        --fontSubTitulo: 'Libre Franklin', sans-serif;
    }
    
    * {
        transition: all .3s ease;
    }

    html, body {
        margin: 0;
    }
    body {
        background-color: var(--cinzaClaro);
    }
    
    .page-wrap {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    #page-wrapper {
        padding: 1rem;
        transition: all 300ms ease;
        min-height: 90dvh;
        margin: 1rem 0;
    }
    
    .cartao {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
        height: 100%;
        width: 100%;
        border-radius: 4px;
        transition: all .5s ease;
        overflow: hidden;

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .cartao:hover {
        box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
        transform: translateY(-3px) scale(1.1);
    }

    .loader {
        width: 15px;
        aspect-ratio: 1;
        border-radius: 50%;
        animation: l5-loaderAnimation 1s infinite linear alternate;
    }
    #backdrop-atualizacao {
        position: fixed;
        top: 0;
        width: 100dvw;
        height: 100dvh;
        z-index: 15;
        background-color: rgba(0,0,0,0.7);
        display: grid;
        place-items: center;
    }
    #backdrop-atualizacao .loader {
        width: 70px;
        height: 26px;
        background: var(--vinho);
        border-radius: 50px;
        --c:no-repeat radial-gradient(farthest-side,#000 92%,#0000);
        --s:18px 18px;
        mask: 
            var(--c) left  4px top 50%,
            var(--c) center,
            var(--c) right 4px top 50%,
            linear-gradient(#000 0 0);
        -webkit-mask:
            var(--c) left  4px top 50%,
            var(--c) center,
            var(--c) right 4px top 50%,
            linear-gradient(#000 0 0);
        -webkit-mask-composite:xor;
                mask-composite:exclude;
        animation: l1 1.5s infinite;
    }
    @keyframes l1 {
        0%    {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
        16.67%{-webkit-mask-size:var(--s),0    0  ,0    0  ,auto}
        33.33%{-webkit-mask-size:var(--s),var(--s),0    0  ,auto}
        50%   {-webkit-mask-size:var(--s),var(--s),var(--s),auto}
        66.67%{-webkit-mask-size:0    0  ,var(--s),var(--s),auto}
        83.33%{-webkit-mask-size:0    0  ,0    0  ,var(--s),auto}
        100%  {-webkit-mask-size:0    0  ,0    0  ,0    0  ,auto}
    }
    @keyframes l5-loaderAnimation {
        0%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }
        33% {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}
        66% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}
        100%{box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }
    }
    @keyframes l5-loaderAnimationSmall {
        0%  {box-shadow: 15px 0 #000, -15px 0 #0002;background: #000 }
        33% {box-shadow: 15px 0 #000, -15px 0 #0002;background: #0002}
        66% {box-shadow: 15px 0 #0002,-15px 0 #000; background: #0002}
        100%{box-shadow: 15px 0 #0002,-15px 0 #000; background: #000 }
    }
    
    .alterar-informacoes {
        max-width: 16px;
        transition: all 300ms ease;
    }

/* Fim definições base e variáveis */

/* Personalizadas */

    .cor-texto {
        color: var(--corTexto) !important;
    }
    .maiusculo {
        text-transform: uppercase;
    }
    .cor-fundo {
        background-color: var(--corFundo);
    }
    .cor-fundo-gradiente {
        background: var(--corFundoGradiente)
    }
    .full-bleed {
        box-shadow: 0 0 0 100vmax var(--corFundo);
        clip-path: inset(-.1vmax -100vmax);
    }
    .padding {
        padding: var(--padding);
    }
    .padding-important {
        padding: var(--padding) !important;
    }
    .margin {
        margin: var(--margin);
    }
    .margin-important {
        margin: var(--margin) !important;
    }

    .caixa-painel {
        width: 100%;
        background-color: var(--vinho);
        border: 2px solid var(--dourado);
        /*
        -webkit-box-shadow: 2px 5px 11px 0px rgba(64, 35, 25, 1);
        -moz-box-shadow: 2px 5px 11px 0px rgba(64, 35, 25, 1);
        box-shadow: 2px 5px 11px 0px rgba(64, 35, 25, 1);
        */
        -webkit-box-shadow: 2px 5px 2px 0px rgba(64, 35, 25, 1);
        -moz-box-shadow: 2px 5px 2px 0px rgba(64, 35, 25, 1);
        box-shadow: 2px 5px 2px 0px rgba(64, 35, 25, 1);
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }
    .caixa-painel::before {
        content: " ";
        position: absolute;
        top: -8px;
        left: -8px;
        width: 16px;
        height: 16px;
        background: var(--dourado);
        border-radius: 50%;
    }
    .caixa-painel::after {
        content: " ";
        position: absolute;
        top: -8px;
        right: -8px;
        width: 16px;
        height: 16px;
        background: var(--dourado);
        border-radius: 50%;
    }
    
    .input-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1em;
        position: relative;
    }
    

    .input-container input,
    .input-container select {
        font-size: 16px;
        padding: 5px 10px;
        display: block;
        width: 100%;
        border: 1px solid var(--marrom);
        color: var(--marrom);
        transition: all .2s ease;
    }
    .input-container input::placeholder,
    .input-container select::placeholder {
        font-size: 16px;
        display: block;
        color: var(--marrom);
        transition: all .2s ease;
    }
    .input-container input:focus,
    .input-container select:focus {
        border-color: var(--vermelho); 
        box-shadow: 0 0 10px var(--vermelho);
        outline: none;
        outline: none;
    }

    form .botao {
        transition: all 300ms ease;
        width: 100%;
        margin-top: 1rem;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 500;
    }

/* Fim personalizadas */

/* Gerais */

    h1, h2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;

        text-transform: uppercase;
        font-family: var(--fonteTitulo);
        font-size: 41px;
        line-height: 41px;
        font-weight: 400;
        letter-spacing: -1px;
        
        color: var(--preto);
        z-index: 4;
        transition: all .3s ease;
    }
    h1 span {
        font-family: var(--fontSubTitulo);
        font-weight: 600;
        font-size: 41px;
    }
    h2 span {
        margin-top: .2em;
        font-family: var(--fonteTexto);
        font-weight: 600;
    }
    p {
        font-family: var(--fonteTexto);
        transition: all .3s ease;
        font-size: 18px;
    }

    h1.texto-branco, h2.texto-branco {
        color: var(--branco);
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .linha {
        display: flex;
    }
    .coluna {
        display: flex;
        flex-direction: column;
    }
    .coluna-reversa {
        flex-direction: column-reverse;
    }
    .linha-reversa {
        flex-direction: row-reverse;
    }
    
    .switch {
        width: 50px;
        height: 10px;
        display: inline-block;
    }
    .switch input {
        display: none;
    }
    .switch .slider {
        position: absolute;
        background-color: var(--preto);
        width: inherit;
        height: inherit;
        border-radius: 34px;
        cursor: pointer;
        transition: background-color 1s linear;
    }
    .switch .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        transform: translate(0px, -5px);
        border-radius: 50px;
        background-color: var(--branco);
        border: 1px solid var(--preto);
        transition: 0.4s, background-color 1s linear;
    }
    .switch input:checked + .slider {
        background-color: var(--verde);
    }
    .switch input:checked + .slider:before {
        transform: translate(30px, -5px);
    }

/* Fim gerais */

/* Galeria */

    .fotos-galeria {
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        grid-auto-rows: 240px;
        grid-auto-flow: dense;
    }
    .cartao img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    @media screen and (min-width: 600px) {
        .cartao.vertical {
            grid-row: span 2 / auto;
        }
        .cartao.horizontal {
            grid-column: span 2 / auto;
        }
        .quadrado {
            grid-row: span 1;
            grid-column: span 1;
        }
        .quadrado-grande {
            grid-row: span 2;
            grid-column: span 2;
        }
    }
/* Fim galeria */

/* Definições de botões e formulários */
    .botao {
        padding: .5em 2em;
        border: none;
        background-color: var(--preto);
        color: var(--branco);
        font-size: 22px;
        font-weight: bold;
        cursor: pointer;
    }

    .botao.vermelho {
        background-color: var(--vermelho);
    }
    .botao.verde {
        background-color: var(--verde);
    }
    .botao.marrom {
        background-color: var(--marrom);
    }
/* Fim definição de botões e formulários */

/* Definições do blog/gazeta */

    .container.noticia .detalhes p {
        width: 100%;
    }
/* Fim blog/gazeta */

/* Personagens */

h3.titulo {
    font-weight: 600;
    font-size: 32px;
    text-transform: uppercase;
    font-family: var(--fontSubTitulo);
    margin-bottom: 2rem;
}
.container-inventario {
    border: 1px solid var(--marrom);
    border-radius: 10px;
    overflow: hidden;
}
.container-inventario p {
    margin-bottom: 0;
}
.container-inventario .titulo {
    display: flex;
    background-color: var(--marrom);
    color: var(--branco);
    padding: 5px;
}
.container-inventario .titulo p {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}
/* Fim personagens */

/* Configurações para tamanhos de telas diferentes */

    /* Telas muito pequenas */
    @media only screen and (max-width: 575.98px) {
        .container {
            width: 100%;
            padding: 0;
        }
        .container-md {
            width: 100%;
            padding: 0;
        }
    }

    /* Telas pequenas */
    @media only screen and (min-width: 576px) and (max-width: 767.98px) {
        .container {
            width: 100%;
            padding: 0;
        }
        .container-md {
            width: 100%;
            padding: 0;
        }
    }

    /* Telas medianas */
    @media only screen and (min-width: 768px) and (max-width: 991.98px) {
        
    }

    /* Telas grandes */
    @media only screen and (min-width: 992px) and (max-width: 1199.98px) {
        
    }

    /* Telas muito grandes */
    @media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
        
    }

    /* Telas extra grandes */
    @media only screen and (min-width: 1400px) {

    }
/* Fim configuração para tamanho de telas */