@font-face { /* Adiciona uma fonte externa através de um arquivo*/
    font-family: "roboto mono"; /* Nome da fonte */
    src: url(fonts/Roboto_Mono/RobotoMono-Bold.ttf); /* Diretorio onde o arquivo está */
    font-weight: 400; /* Estilo da fonte tipo bold ou bold-italico */
}

@font-face { /* Adiciona uma fonte externa através de um arquivo*/
    font-family: "roboto mono"; /* Nome da fonte */
    src: url(fonts/Roboto_Mono/RobotoMono-BoldItalic.ttf); /* Diretorio onde o arquivo está */
    font-weight: 700; /* Estilo da fonte tipo bold ou bold-italico */
}

* { /* (*) Aplica mudanças do css em toda a estrutura do documento html */
    margin: 0; /* Remove a margem externa padrão dos elementos HTML */
    padding: 0; /* Remove o espaçamento interno padrão dos elementos HTML */
    box-sizing: border-box; /* Faz width/height incluírem padding e borda dos elementos */
}

header { /*Cabeçalho do site*/
    background-color: #1d1d1d; /* Define a cor de fundo do cabeçalho */
    color: #ffffff; /* Define a cor do texto do cabeçalho */
}

.header-topo { /* Primeira fileira de itens do cabeçalho */

    /* display é a posição do elemento */
    display: flex; /* Flex define o layout do cabeçalho como flexbox (Itens lado a lado) */

    /* Alinhar itens do elemento*/
    align-items: center; /* Alinha os itens verticalmente ao centro */

    /*Alinhar itens do elemento horizontalmente*/
    justify-content: space-between; /* Coloca o primeiro e o último item nas extremidades */

    /* Padding é o espaço interno do elemento */
    padding: 10px 70px; /* Define 70px de espaçamento interno nas laterais horizontal e 0 nas verticais */

    background-color: #b9b9ff;

}

.header-topo h1 {
    font-size: 40px; /* Define o tamanho da fonte do título */
    font-weight: 400; /* Define qual estilo da fonte usar como bold e bold-italico */
    font-family: "roboto mono", monospace; /* Define a família de fontes do título */
    padding: 8px 10px; /* Define o espaçamento interno do título */
    color: #000000; /* Define a cor do texto do título */
}

.subtitulo {
    padding: 10px 80px 10px 80px;
}

.subtitulo h2 {
    font-size: 17px;
    font-family: "roboto mono", monospace;
    font-weight: 700;
    color: #b9b9ff;
}

nav {
    position: relative;
}

nav > ul {
    /* display é a posição do elemento */
    display: flex; /* Flex define o layout do cabeçalho como flexbox (Itens lado a lado) */

    /* Alinhar itens do elemento*/
    align-items: center; /* Alinha os itens verticalmente ao centro */

    /*Gap é o espaçamento*/
    gap: 60px; /* Espaçamento entre os itens da nevegação */

    /*Estilo da lista (tipo itens de menu)*/
    list-style: none; /* none significa que não tem marcação ou numeração de lista */

}

.submenu ul {
    position: absolute;

    left: 0;
    width: 100%;

    background-color: #ffffff;
    padding: 10px 0px;
    margin: 30px 0;

    border-radius: 5px;
    border: solid #010101 1px;

    box-sizing: border-box;

    flex-direction: column;
    gap: 0;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);

    transition:
        opacity 600ms ease,
        transform 600ms ease,
        visibility 600ms ease;
}

.submenu ul li {
    padding: 12px 25px;
    list-style: none;
}

.submenu.aberto ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    transition: none;

}

.submenu ul li:not(:last-child) {
    border-bottom: 1px dotted #000000;
}

a {
    color: #000000;
    text-decoration: none;
    font-family: roboto mono, monospace;
    font-weight: 700;
    
}

a:hover {
    color: #ffffff;
}

.submenu ul li a:hover {
    color: #7a0eaf;
}

.submenu ul li a::before {
    content: "->";
    display: inline-block;
    margin-right: 8px;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity 150ms ease, transform 150ms ease;
    color: #000;
}

.submenu ul li a:hover::before {
    opacity: 1;
    transform: translateX(0);
    
}




header button {
    border: 0;
    background: none;
    color: #000000;
    font-size: 19px;
    font-family: roboto mono, monospace;
    font-weight: 700;
}

header button:hover {
    color: #ffffff;
}