@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;900&display=swap');

:root {
    --menuBG: #252830;
    --fuenteParrafos: 'Poppins', sans-serif;
    --fuenteTitulos: 'Heebo', sans-serif;
}


body {
    font-family: var(--fuenteParrafos);
    color: var(--menuBG);
    padding: 0px;
    margin: 0px;
}

.Pagina {
    display: grid;
    grid-template-areas:
        "menu"
        "presentacion"
        "explicacion"
        "analizador"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 0.2fr 80vh 100vh 70vh 30vh;
    text-align: center;
}

.menu {
    background-color: var(--menuBG);
    display: grid;
    grid-area: menu;
}

.presentacion {
    display: grid;
    grid-area: presentacion;
    padding: 0px 50px 0px 50px;
}

.explicacion {
    display: grid;
    grid-area: explicacion;
}

.analizador {
    display: grid;
    grid-area: analizador;
    background-color: var(--menuBG);
    padding: 0px 100px 50px 100px;
}

footer {
    grid-area: footer;
}

/* Menu de navegación*/

.menu-navegacion__contenido {
    display: flex;
    justify-content: center;
    list-style: none;
    height: 7vh;
    align-items: center;
    text-align: center;
}

.menu-navegacion__item {
    padding-left: 15px;
    text-align: center;
}

.menu-navegacion__item a {
    text-decoration: none;
    color: white;
    font-size: 2.8vh;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 0px 10px 5px 10px;
}

.menu-navegacion__item a:hover {
    border-bottom: 2px solid #ffffff;
}

/* Página de presentacion*/


.presentacion__contenedor {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 1fr;
    align-items: center;
}

.presentacion__titulo {
    font-size: 10vh;
}

.presentacion__descripcion {
    font-size: 2.8vh;
    text-align: center;
}

.imagenCompilador {
    height: 400px;
}

/* Página del analizador */

.explicacion__fases_compilador {
    display: grid;
    grid-template-areas:
        "titulo titulo titulo"
        "fase1 fase2 fase3";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 10px;
    height: 20vh;
    padding: 25px;
}

.explicacion__titulo {
    grid-area: titulo;
}

.explicacion__analizador_lexico {
    grid-area: fase1;
    padding: 20px;
    background-color: antiquewhite;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.explicacion__analizador_sintactico {
    grid-area: fase2;
    padding: 20px;
    background-color: antiquewhite;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.explicacion__analizador_semantico {
    grid-area: fase3;
    background-color: antiquewhite;
    padding: 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.explicacion__container {
    display: grid;
    grid-template-areas:
        "numero"
        "titulo"
        "texto" ;
    grid-template-columns: 1fr;
    grid-template-rows: 0.1fr 0.3fr 1fr;
    justify-items: center
}

.explicacion_numero {
    grid-area: numero;
}

.explicacion__analizador_titulo {
    font-size: 3.5vh;
    grid-area: titulo;
}

.explicacion__analizador_descripcion {
    font-size: 2.5vh;
    grid-area: texto;
}

.explicacion__titulo-h1 {
    font-size: 6vh;
    text-align: center;
}

/* Página del analizador*/

.analizador__contenido {
    display: grid;
    grid-template-areas:
        "titulo_analizador titulo_analizador_lexico titulo_analizador_sintactico"
        "entrada_texto resultado_lexico resultado_sintactico";
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 20px;
}


.analizador__contenido_analizador_titulo {
    grid-area: titulo_analizador;
}

.analizador__contenido_analizador_lexico_titulo {
    grid-area: titulo_analizador_lexico;
}

.analizador__contenido_analizador_sintactico_titulo {
    grid-area: titulo_analizador_sintactico;
}

.analizador__contenido_analizador_entrada {
    grid-area: entrada_texto;
}

.analizador__contenido-resultado_analizador_Lexico {
    grid-area: resultado_lexico;
    background-color: #ffffff;
    color: #252830;
    height: 50vh;
}

.analizador__contenido-resultado_analizador_sintactico {
    grid-area: resultado_sintactico;
    background-color: #ffffff;
    color: #252830;
    height: 50vh;

}

.analizador-titulo{
    color: white;
}


.boton_compilador {
    background-color: #44c767;
    border-radius: 3px;
    border: 1px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: #252830;
    font-family: Arial;
    font-size: 15px;
    padding: 9px 31px;
    text-decoration: none;
}

textarea {
    height: 40vh;
    border: none;
    cursor: default;
    background-color: #263238;
    font-size: 30px;
    color: white;
    font-family: monospace;
    resize: none;
}

textarea:focus {
    outline: none;
}

.datos_info {
    height: 20px;
}

.text-body-1 {
    font-size: 2.8vh;
}

.linea {
    font-weight: bold;
    text-align: center;
}