@import url("assets/header.css");
@import url("assets/marca.css");
@import url("assets/pesquisa.css");
@import url("assets/produto.css");
@import url("assets/tecnologia.css");
@import url("assets/footer.css");
@import url("reset.css");

@font-face{
    font-family: 'madeMirage';
    src: url("/static/fonts/made_mirage_regular.otf");
    font-display: swap;
}
@font-face{
    font-family: 'normalidad';
    src: url("/static/fonts/NormalidadCompact-Regular.otf");
    font-display: swap;
}
:root {
    --cor-fundo: #f6f6f6;
    --cor-preto: #000;
    --cor-rosa: #ff83f8;
    --cor-branco: #fff;
    --cor-cinza: #c6c6c6;
    --cor-fundo-secundaria: #31383f;
    --cor-preto-dark-mode: #121212;

    --font-secundaria: 'madeMirage';
    --font-principal: 'normalidad';
}
/* GERAL */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body, html {
    font-family: var(--font-principal);
    font-weight: 400;
    font-size: 16px;
    background-color: var(--cor-fundo);
    overflow-x: hidden;
    font-display: fallback;
}
a {
    color: var(--cor-preto);
    text-decoration: none;
}
.dark__mode {
    background-color: var(--cor-preto-dark-mode); 
    color: var(--cor-branco); 
    transition: .5s; 
    box-shadow: none;
    fill: var(--cor-branco);
}
a:hover,
a:focus {
    color: var(--cor-rosa);
}
a:active {
    color: var(--cor-preto);
}
/* FIM GERAL */ 

/* ARROW UP */
.arrow__fixed {
    position: fixed;
    bottom: 2em;
    right: 2em;
    cursor: pointer;
    opacity: 0;
    z-index: 6;
}
.arrow__fixed__styled {
    padding: .5em;
    border-radius: 10px;
    background-color: var(--cor-rosa);
    transition: .2s;
}
.arrow__fixed__styled:hover {
    background-color: var(--cor-preto-dark-mode);
    fill: var(--cor-branco);
}
svg {
    width: 1em;
    margin: 0 .5em;
}
.fa-arrow-up {
    width: 1em;
    margin: auto;
}
#language-selector {
    display: flex;
    justify-content: right;
    padding: 10px;
}
#language-selector img {
    padding: 10px;
}