/* store global config and variables */

:root {
     /* --azul-texto: #7abde6; */
    --dark-blue: #244669;
    --antaq-azul: #243c53;
    --antaq-azul-branco: #243c53;
    --cinza-claro: #f8f8f8;
    --azul-texto: #063883;
    --vermelho-texto: #800000;
    --verde-texto: #008000;
    /* style colors */
    --bg: #FFFFFF;
    --bg-panel: rgb(240, 240, 240);
    --color-text: #000000;
    --color-text-menu: #243c53;
    --color-title: #FFFFFF;
    --color-subtitle: #000000;
    --color-icon: #FFFFFF;
    --color-list-boundries: rgb(100, 100, 100);
    --bg-footer: #ebebeb;
    --bg-menu: #f8f8f8;
    --vlibras-icon: url("../../images/vlibras-icon.png");
}


.high-contrast:root {
    --bg: #000000;
    --bg-panel:  #000000;
    --color-text: #FFFFFF;
    --color-title: #FFFFFF;
    --color-subtitle: #FFFFFF;
    --color-icon: #FFFFFF;
    --color-list-boundries: #FFFFFF;
    --bg-footer: #000000;
    --cinza-claro: #000000;
    --color-text-menu: #FFFFFF;
    --bg-menu: #000000;
    --antaq-azul: #036;
    --antaq-azul-branco: #ffffff;
    --azul-texto: #39F;
    --verde-texto: #9f9;
    --vermelho-texto: #F00;
    --vlibras-icon: url("../../images/vlibras-icon-contrast.png");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;  /* 1rem = 10px */
    font-family: 'Roboto','Open Sans', 'Times New Roman', sans-serif;
}


/* light/dark mode settings */
body {
    background-color: var(--bg);
    color: var(--color-text);
    
}


/* media query for devices in normal display mode */
@media (max-width: 500px) {
    .p-info-medium {
        font-size: 1.4rem;
        font-weight: bold;
    }
    
    .p-info-small {
        font-size: 1.2rem;
        font-weight: bold;
    }
    
    .p-info-large {
        font-size: 2rem;
        font-weight: bold;
    }
}

/* media query to landscape visualization */
@media (min-width: 500px) {
    .p-info-medium {
        font-size: 1.8rem;
        font-weight: bold;
    }
    
    .p-info-small {
        font-size: 1.6rem;
        font-weight: bold;
    }
    
    .p-info-large {
        font-size: 2.5rem;
        font-weight: bold;
    }
    
}