/* video referência https://www.youtube.com/watch?v=DZg6UfS5zYg */
/* Aqui vou colocar todas as especificações do menu */ 

#header{
    height: 96px;
    background: #001f3f;
    color: white;
    width: 100%;
    padding-left: 32px;
    padding-right: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo{
    padding-left: 10px;
}
.menu-wrap{
    position: absolute; /* Vou fixar o menu no topo o que fará que ele suba uma camada e entre para dentro do espaço de showcase */
    top: 15px;
    right: 80px;
    z-index: 1; /*para que venha para a camada de cima do showcase */ 

}

.menu-wrap .toggler{
    position: absolute; /* posição absoluta com relação a wrap */
    top: 0;
    left: 0;
    z-index: 2; /* o coloca na camada de cima de wrap */ 
    width: 50px; /* aumento o tamanho da caixa de seleção */
    height: 50px;
    opacity: 0; /* o deixo transparente 100% assim posso clicar mas ele não aparece na tela */ 
}

.menu-wrap .hamburger{
    position: absolute; /* aqui será o menu hamburger posição absoluta */
    top: 0;
    left: 0;
    z-index: 1;
    width: 60px; /* esse é o tamanho da área do menu */
    height: 60px;
    background-color: #001f3f;
    display: flex; /* para ajustar seus elementos aninhados */
    align-items: center;
    justify-content: center;
    padding: 15px; /* adicionei este padding para ficar igual ao exemplo */
 
}

/* Hambuguer line Criando a linha principal */
.menu-wrap .hamburger > div{
    position: relative; /* ajustando a div dentro do menu hamburger */
    width: 100%; /* criando a figura, uma linha branca */ 
    height: 2px; 
    background-color: #FFFFFF;
    display: flex; /* para ajustar seus elementos aninhados */
    text-align: center;
    justify-content: center;
    transition: all 0.4s ease; /* aplico a transição em todos as propriedades dentro de hamburger > div */
}

/* Creating top and bottom lines*/
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after{
    content: ''; /* esses são o before e after da linha de div */
    position: absolute; /* posição absoluta senão as linhas vão para trás */
    width: 100%; /* repetindo o tamanho da linha */ 
    height: 2px;
    background-color: inherit; /* herdando do elemento pai */
    top: -10px; /* passando as linhas para antes */ 
    z-index: 1; /* até então uma boa prática */

    /*-- IMPORTANTE -- Aqui está o before e o after no mesmo lugar para aplicar as mesmas propriedades nos dois, logo após declaro o after somente mudando o lugar que ele está, não duplicando mas sim somente modificando a sua posição */ 
}

/* moves the line down */
.menu-wrap .hamburger > div::after{
    top: 10px; /* coloca uma linha depois também */ 
}

/* --------------- Toggler animation ------------------  */
.menu-wrap .toggler:checked + .hamburger > div{
    /* Aqui acabei de selecionar toggler checked e a div aninhada de hamburger */
    transform: rotate(135deg); /* giro faço o primeiro giro dos elementos em 135 graus*/ 
}

/*  Aqui faço o segundo giro dos elementos  */
.menu-wrap .toggler:checked + .hamburger > div::before,
.menu-wrap .toggler:checked + .hamburger > div::after{
    top: 0;
    transform: rotate(90deg);
}
/* Aplico mais uma transição que fará o x rodar quando estiver clicado e eu passar o mouse em cima  */
.menu-wrap .toggler:checked:hover + .hamburger > div{
    transform: rotate(225deg);
}

/*  ----------------------------------------------------  */

/* Show menu - O que vai aparacer quando o menu hamburger é clicado */
.menu-wrap .toggler:checked ~ .menu{
    visibility: visible;
    /* APRESENTO TODAS AS POPRIEDADES QUANDO CLICADO */ 
}

.menu-wrap .toggler:checked ~ .menu > div{
transform: scale(1);
transition-duration: var(--menu-speed); /* duração decalarada como variável*/
}

.menu-wrap .toggler:checked ~ .menu > div > div{
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* ------------------------------------------------------- */


/*  Estilizando o menu (ele é tipo um container dos outros elementos) */
.menu-wrap .menu{
    position: fixed; /* posição fixa */ 
    top: 0;
    left: 0;
    width: 100%; /* a área da div menu vai alcançar toda a tela */ 
    height: 100%;
    visibility: hidden; /* ESCONDO TODAS AS PROPRIEDADES QUANDO NÃO CLICADAS*/ 
    overflow: hidden; /* boa pratica */ 
    display: flex;
    align-items: center; /* colocar os itens no meio da altura da página */ 
    justify-content: center; /* colocar os itens no centro página */   
}


/* selecionado a div imediata após o menu que será o backgrond da ul*/
.menu-wrap .menu > div{
    background-color: white;
    border-radius: 50%;
    width: 300vw;
    height: 300vw;
    display: flex;
    flex: none; /* não entendi aqui ainda */
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: all 0.4s ease;
    /*  Aqui apliquei os atributos para que a figra se abra no formato de bola e expanda até tomar conta da tela toda */
}

/* Selecionando a div depois da div (pai da ul) */
.menu-wrap .menu > div > div{
    text-align: center;
    max-width: 90vw;
    max-height: 100vw;
    opacity: 0;
    transition: opacity 0.4s ease;
}
  /* NÃO PRECISARIA DISSO / ESSE É O "CONTAINER" DA UL */

.menu-wrap .menu > div > div > ul > li{
    color: black;
    list-style: none;
    font-size: 1.5rem;
    padding: 1rem;
    /* text-align: center; */
}

.menu-wrap .menu > div > div > ul > li > a{
    color: inherit;
    text-decoration: none;
    transition: color 0.4s ease;
}

.menu-wrap .menu > div > div > ul > li > {
    color: red;
}