@charset "UTF-8";

:root {
    --roxo: #800080;
    --azul_meia_noite: #051119;
    --branco_bone: #E1E9E5;
 
    --principal: "Ledger";
    --secundario: "Roboto Flex";
 }

/* Tablet */
@media screen and (min-width: 768px) {
    header > nav a#logo {
        width: 25%;
    }

    header > nav a#logo > img {
        width: 100%;
        height: 100%;
    }

    header nav #container_menu {
        order: 2;
    }

    #container_menu span#btn_menu_responsivo {
        font-size: 3.5em;
        margin-right: 40px;
    }

    #container_menu #menu_responsivo {
        width: 50%;
    }

    #container_menu #menu_responsivo > div.offcanvas-header {
        justify-content: flex-end;
        margin-bottom: 10px;
    }

    #container_menu #menu_responsivo > div.offcanvas-header > div {
        display: none;
    }

    #container_menu #menu_responsivo > div.offcanvas-header > span {
        font-size: 3.5em;
        margin: 5px 5px 0 0;
    }

    #container_menu #menu_responsivo > div.offcanvas-body > ul > li {
        margin-bottom: 10px;
    }

    #container_menu #menu_responsivo > div.offcanvas-body > ul > li > a {
        font-size: 2.5em;
    }

    header nav #container_icones {
        display: flex;
        flex-flow: row nowrap;
        order: 1;
    }

    header nav #container_icones > span:first-of-type {
       display: block;
       margin-right: 30px;
    }

    header nav #container_icones > span {
        font-size: 3.3em;
        margin-right: 10px;
    }

    #ofertas, #sobre, #contato {
        scroll-margin-top: 110px;
    }

    /* OFERTAS */
    #ofertas {
        margin-bottom: 100px;
    }

    #ofertas > div > div.presente {
        height: 490px;
        margin-bottom: 50px;
    }

    #ofertas > div > div.container_texto {
        padding: 0 20px;
    }

    #ofertas > div > div.container_texto > h2 {
        font-size: 2.5em;
    }

    #ofertas > div > div.container_texto > h1 {
        font-size: 3em;
    }

    #ofertas > div > div.container_texto > p {
        font-size: 1.7em;
    }

    #ofertas > div > div.container_texto > p.botao {
        font-size: 1.5em;
        padding: 14px 35px;
    }

    /* DESTAQUES */
    #destaques {
        margin-bottom: 100px;
    }

    #destaques > p {
        font-size: 1.5em;
        padding: 14px 35px;
        margin: 0 0 50px 15px;
    }

    #destaques .produto {
        width: 300px;
        height: 400px;
    }

    /* SOBRE */
    section#sobre {
        margin-bottom: 50px;
        padding: 60px 60px 0 60px;
    }

    #sobre > h1 {
        font-size: 3em;
        margin-bottom: 40px;
    }

    #sobre > p {
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    #sobre > div.logo_sobre {
        height: 300px;
        width: 216px;
    }

    /* CONTATO */
    #contato {
        padding: 60px 50px 80px 50px;
    }

    #contato > h1 {
        font-size: 3em;
        margin: 0 0 40px 0;
    }

    #contato > div > form {
        margin-bottom: 30px;
    }

    #contato > div > form > div {
        margin-bottom: 20px;
    }

    #contato > div > form > div > input {
        font-size: 1.5em;
        padding: 2rem 1.5rem;
    }

    #contato > div > form > div > input:focus {
        padding: 3rem 2.25rem 2rem 2.25rem;
    }

    #contato > div > form > div > label {
        font-size: 1.2em;
    }

    #contato > div > form > textarea {
        margin-bottom: 30px;
        font-size: 1.5em;
    }

    #contato > div > form > input.form_btn {
        font-size: 1.3em;
        padding: 14px 40px;
    }

    #contato > div > div > h2 {
        font-size: 2.5em;
    }

    #contato > div > div > p {
        font-size: 1.5em;
        margin-bottom: 50px;
    }

    #contato > div > div > div > div:first-of-type {
        padding-right: 40px;
        border-right: 3px solid var(--azul_meia_noite);
    }

    #contato > div > div > div span {
        font-size: 3.5em;
        margin-bottom: 10px;
    }

    #contato > div > div > div p {
        font-size: 1.3em;
    }


    /* FOOTER */
    footer {
        font-size: 1.5em;
    }

    footer > div.texto_footer {
        margin: 20px 0;
    }

    footer > div.texto_footer > p {
        margin-bottom: 15px;
    }

    footer > p {
        margin-bottom: 25px;
    }


    /* CREDITOS */
    section.creditos {
        font-size: 1.4em;
        padding: 35px;
    }

    section.creditos > a:first-of-type {
        margin-bottom: 20px;
    }
}

/* Notebook */
@media screen and (min-width: 1024px) {
    header > nav a#logo {
        width: 15%;
    }

    header nav #container_menu {
        order: 1;
    }

    header nav #container_menu > span#btn_menu_responsivo {
        display: none;
    }

    header nav #container_menu > div#menu {
        display: block;
    }

    header nav #container_menu > div#menu > ul {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
    }

    header nav #container_menu > div#menu > ul > li {
        margin-right: 15px;
    }

    header nav #container_menu > div#menu > ul > li > a {
        text-decoration: none;
        color: var(--branco_bone);
        font-size: 1.3em;
    }

    header nav #container_menu > div#menu > ul > li > a:hover {
        cursor: pointer;
        text-decoration: underline;
        font-weight: bold;
        color: var(--roxo);
    }

    header nav #container_icones {
        order: 2;
    }

    header nav #container_icones > span {
        font-size: 3em;
    }

    header nav #container_icones > span:first-of-type {
        margin-right: 20px;
    }

    #ofertas, #sobre, #contato {
        scroll-margin-top: 130px;
    }

    #sobre {
        scroll-margin-top: 100px;
    }

    /* BANNER */
    #banner {
        background-image: url(../imagens/home/banner1.jpg);
    }


    /* OFERTAS */
    #ofertas {
        margin-top: 70px;
    }

    section#ofertas > div.row {
        align-items: center;
    }

    #ofertas > div > div.presente {
        height: 373px;
        margin-bottom: 0;
    }

    #ofertas > div > div.container_texto > h2 {
        font-size: 2em;
    }

    #ofertas > div > div.container_texto > h1 {
        font-size: 2.5em;
    }

    #ofertas > div > div.container_texto > p {
        font-size: 1.4em;
    }

    #ofertas > div > div.container_texto > p.botao {
        font-size: 1.2em;
        padding: 12px 29px;
    }


    /* DESTAQUE */
    #destaques > p {
        font-size: 1.3em;
        padding: 10px 25px;
    }

    /* SOBRE */
    #sobre > p {
        margin-bottom: -25px;
    }

    #sobre > div.logo_sobre {
        height: 238px;
        width: 195px;
    }

    /* CREDITOS */
    section.creditos > div {
        display: flex;
        justify-content: space-between;
    }

    section.creditos > a {
        margin: 0;
    }
}

/* Computadores */
@media screen and (min-width: 1200px) {
    header nav #container_menu > div#menu > ul > li {
        margin-right: 35px;
    }

    #ofertas {
        scroll-margin-top: 150px;
    }

    /* Sobre */
    #sobre > p {
        max-width: 70%;
        margin: auto auto -25px auto;
    }

    /* Contato */
    #contato > h1 {
        margin-bottom: 80px;
    }

    #contato > div > div > div p {
        font-size: 1.2em;
    }

    /* Creditos */
    section.creditos > div {
        max-width: 70%;
        margin: auto;
    }
}

@media screen and (min-width: 1500px) {
    header nav #container_menu > div#menu > ul > li > a {
        font-size: 1.6em;
    }

    header nav #container_icones > span {
        font-size: 3.5em;
        margin-right: 70px;
    }

    header nav #container_icones > span:first-of-type {
        margin-right: 40px;
    }

    #ofertas {
        scroll-margin-top: 260px;
    }

    #sobre {
        scroll-margin-top: 150px;
    }

    #destaques {
        scroll-margin-top: 250px;
    }

    /* OFERTAS */
    #ofertas {
        margin: 140px auto;
    }

    #ofertas > div > div.presente {
        height: 470px;
    }

    #ofertas > div > div.container_texto > h2 {
        font-size: 2.5em;
    }

    #ofertas > div > div.container_texto > h1 {
        font-size: 3em;
        margin: 30px auto;
    }

    #ofertas > div > div.container_texto > p {
        font-size: 1.7em;
    }

    #ofertas > div > div.container_texto > p.botao {
        font-size: 1.5em;
        padding: 14px 35px;
    }

    /* DESTAQUES */
    #destaques > p {
        font-size: 1.5em;
        padding: 14px 35px;
    }

    /* SOBRE */
    #sobre > h1 {
        font-size: 3.2em;
    }

    #sobre > p {
        font-size: 1.7em;
        margin-bottom: 30px;
    }

    #sobre > div.logo_sobre {
        height: 318px;
    }

    /* CONTATO */
    #contato > div > div > div p {
        font-size: 1.3em;
    }

    /* FOOTER */
    footer > div.texto_footer {
        flex-flow: row wrap;
        justify-content: center;
    }

    footer > div.texto_footer > p {
        padding-right: 25px;
        margin-right: 25px;
        border-right: 3px solid black;
    }
}