:root{
    --primary: rgb(160,109,242);
    --btn-prim: rgb(204,109,242);
    --btn-hover: rgb(242,109,233);
}

.website-logo img {
    width: 150px;
    height: auto;
    max-height: 70%;
    margin-bottom: 1rem;
}

.website-logo {
    flex-shrink: 0;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body{
    font-family: 'Arial', sans-serif;
}


.saia {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: var(--btn-prim);
    color: #fff;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.saia:hover {
    background-color: var(--btn-hover);
}


.navbar {
    background-color: #ffffff; /* cor de fundo da navbar */
    text-align: center; /* alinhar itens ao centro */
    width: fit-content; /* largura da navbar */
    padding: 0px 10px 0px 10px;
    margin: 0 auto; /* centralizar horizontalmente */
    border-radius: 9px;
}


.navbar-nav {
    list-style: none; /* remover marcadores de lista */
    padding: 0;
    margin: 0;
    display: inline-block; /* exibir como bloco inline para centralizar */
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 18px;
}

.nav-item {
    margin-right: 15px; /* espaçamento entre os itens */
    display: inline-block; /* exibir como bloco inline para centralizar */
    position: relative; /* posição relativa para facilitar o posicionamento do pseudo-elemento */
}

.nav-item a {
    text-decoration: none; /* remover sublinhado dos links */
    color: var(--primary); /* cor do texto */
    padding: 10px; /* espaçamento interno */
    display: block; /* ocupar toda a largura disponível */
}

.nav-item::after {
    content: ''; /* conteúdo vazio do pseudo-elemento */
    position: absolute; /* posição absoluta para posicionamento abaixo do link */
    bottom: 0; /* alinhar com a parte inferior do link */
    left: 0; /* alinhar com a esquerda do link */
    width: 100%; /* largura total */
    height: 4px; /* altura da linha */
    background-color: var(--btn-prim); /* cor da linha */
    transform: scaleX(0); /* esconder a linha inicialmente */
    transition: transform 0.3s; /* animação suave da largura */
}

.nav-item:hover::after {
    transform: scaleX(1); /* mostrar a linha ao passar o mouse */
}