@import "./mis-variables.css";



/*
Elementos
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: var(--negro);
    color: var(--blanco);
    font-family: var(--letra-nunito);
}
header {
    display: flex;
    background-color: var(--morado-neon);
}
main {
    width: 95vw;
    padding: var(--rem-6) 2rem;
    margin: 0 auto;
}
ul {
    list-style: none;
}
a {
    color: var(--amarillo-neon);
}



/*
Ides
*/
#logotipo {
    width: 33.33vw;
    display: flex;
    align-items: center;
}
#logotipo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}
#logo {
    font-family: var(--letra-bebas);
    font-size: var(--rem-3);
    padding: 0 var(--rem-9);
    color: var(--verde-neon);
}
#logo-descripcion {
    font-size: var(--rem-10);
    width: var(--rem-2);
    color: var(--verde-neon);
}
#menu-principal {
    width: 66.66vw;
}



/*
Clases
*/
/*
Anulaciones de Bootstrap
*/
ol,
ul {
  padding-left: 0;
}

/*
Mis Clases
*/
.menu-horizontal {
    display: flex;
    height: 100%;
    align-items: center;
    margin: 0 auto;
}
.menu-horizontal li {
    list-style-type: none;
    padding: 0 var(--rem-9);
}
.menu-horizontal a {
    color: var(--rosa-neon);
    text-decoration: none;
}
.menu-horizontal a:hover {
    color: var(--verde-foco);
    text-decoration: underline;
}