:root{
    --colorHead-foot: #3F67F0;
    --colorhtml: #F5F0E6;
    --colorMain: #DFDAD1;

    --color-font-headers: #8DF018;
    --color-font-footer: #58A300;
    
    --color-font-hover: #A32908;
    --color-font-active: #F03300;

    --header-font-size: 1.6rem;
    --paragraph-font-size: 1.6rem;
    --paragraph-font-family: 'Roboto Mono', monospace;
    --menu-font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

    --width-contenedores: 70%;
    --minwidth-contenedores: 35rem;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
    background-color: var(--colorhtml);
}
.header{
    font-size: var(--header-font-size);
    font-family: var(--menu-font-family);

    width: var(--width-contenedores);
    min-width: var(--minwidth-contenedores);
    margin: 0 auto;
}
.navigator{
    background-color: var(--colorHead-foot);
    border-style: groove;
    border-width: 1px;
    border-bottom: 0px;
    border-color: black;


}
.contenedor-lista{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.lista{
    padding: 10px;
    display: inline-block;
}

.lista a{
    color: var(--color-font-headers);
}

.container{
    border: 1px solid black;
    background-color: var(--colorMain);

    position: relative;

    width: var(--width-contenedores);
    min-width: var(--minwidth-contenedores);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
}

.F1{
    padding: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.container p{
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    font-size: var(--paragraph-font-size);
    font-family: var(--paragraph-font-family);
    text-align: justify;
}

.container h1{
    font-family: var(--paragraph-font-family);
    padding: 3rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;

}

.C1{
    padding-top: 2rem;
}

.C1 p{
    padding-top: 0rem;
    padding-bottom: 0rem;
    font-size: 1.8rem;
}

.pie-pagina{
    padding: 18px;
    font-size: 2.4rem;
    text-align: center;
    font-family: var(--paragraph-font-family);
    font-weight: 700;
    color: var(--color-font-headers);

    width: var(--width-contenedores);
    min-width: var(--minwidth-contenedores);
    margin: 0 auto;
    min-height: 30px;

    background-color: var(--colorHead-foot);
    border-style: groove;
    border-width: 1px;
    border-top: 0px;
    border-color: black;
}

.lista a:hover{
    color: var(--color-font-hover);
}

.lista a:active{
    color: var(--color-font-active);
}

.lista a::after{
    content: " - ";
}