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

header {
    width:100vw;
    position:fixed;
    z-index:3;

    #container_rotulo {
        height:33px;
        width:100%;

        #rotulo {
            width:100%;
            height:30px;
            padding-left:5px;
            background-color:#000000;

            p {
                display:flex;
                justify-content:center;
                align-items:center;
                width:100%;
                height:30px;
                margin:auto;
                color:#ffffff;
                font-size:clamp(4px, 2.3vw, 17px);

                span {
                    margin-right:4px;
                    margin-left:4px;
                    color:#ff0000;
                    font-size:clamp(4px, 2.3vw, 17px);
                    font-weight:bold;
                }
            }
        } 

        #degrade {
            width:100vw;
            height:3px;
            background-image:linear-gradient(to right, #f0af8a 10%, #bb8769);;
        }
    }

    #menu_logo {
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        height:50px;
        position:relative;
        background-color:#ffffff;

        #container_voltar_menu {
            display:flex;
            justify-content:space-between;
            align-items:center;
            width:80px;
            margin-left:5%;

            #voltar {
                cursor:pointer;

                #icone_voltar {
                    color:#000000;
                    font-size:20px;
                }
            }

            #menu {
                display:flex;
                flex-direction:column;
                justify-content:center;
                width:25px;
                cursor:pointer;

                #pri_traço {
                    border-bottom:2px solid #807e7e;
                    width:100%;
                    margin-bottom:7px;
                }

                #seg_traço {
                    border-bottom:2px solid #807e7e;
                    width:100%;
                    margin-bottom:7px;
                }

                #ter_traço {
                    border-bottom:2px solid #807e7e;
                    width:70%;
                }
            }
        }

        #logo_ {
            position:absolute;
            left:50%;
            transform:translateX(-50%);
            z-index:4;
            cursor:pointer;
            font-size:1.5rem;
            text-decoration:none;

            #logo {
                z-index:4;
                font-size:1.5rem;
                text-align:center;
                color:#000000;
            }
        }

        #container_categoria {
            display:none;

            #_brinco, #_cordão, #_relógio, #_óculos {
                font-weight:bold;
            }
        }
    }
    

    /*border:1px solid #008000;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100vw;
    height:4vh;
    min-height:20px;
    max-height:130px;
    background-color:#ad12ad;*/
}

@media (min-width:700px) {
    header {

        #container_rotulo {

        }

        #menu_logo {

            #container_voltar_menu {
                display:none;
            }

            #logo_ {
                display:flex;
                justify-content:center;
                align-items:center;
                width:40%;
                height:100%;
                position:static;
                left:0%;
                transform:translateX(0%);
                z-index:4;
                cursor:pointer;
                text-decoration:none;
            }

            #container_categoria {
                display:flex;
                justify-content:end;
                column-gap:15%;
                width:60%;
                margin-right:7%;

                #_brinco, #_cordão, #_relógio, #_óculos{
                    cursor:pointer;
                }
            }
        }
    }
}