:root {
    --azul1: #456e83;
    --azul2: #4e7d95;
    --azul3: #95c2d8;
    --azul4: #f8f8f8;
    --blanco: white;
    --negro: black;
    --gris: rgb(131, 131, 131);
    --letraClara: #f3f8fb;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0px;
    margin-top: 70px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

header{
    background-color: var(--azul1);
    display: grid;
    position: fixed;
    top: 0px;
    width: 100%;
    grid-template-columns: 10% 80% 10%;
    padding: 10px;
    text-align: center;
    align-items: center;
}

header h1{
    margin: 0px;
    padding: 0px;
    font-size: 1.7em;
    color: var(--letraClara);
}

header select{
    font-size: 1.2em;
    border: 0px;
    padding: 3px;
    background-color: var(--blanco);
    border-radius: 3px;
}

header form button{
    font-size: 1.3em;
    color: var(--azul4);
    background-color: var(--azul1);
    border: 0px;
}

header a{
    /* display: block; */
    font-size: 1.3em;
    text-decoration: none;
    color: var(--blanco);
}

main{
    margin-bottom: 125px;
}

main ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

main ul li{
    font-size: 1.1em;
    display: grid;
    gap: 10px;
    grid-template-columns: 160px auto 80px;
    padding: 8px;
    /* padding-left: 10px; */
    border-bottom: 1px solid var(--letraClara);
    align-items: center;
}

main ul li:hover{
    background-color: var(--letraClara);
}

main ul li img{
    max-width: 150px;
    max-height: 150px;
}

main ul li i{
    font-size: 1.2em;
}

main form fieldset{
    border: 1px solid var(--azul3);
    border-radius: 5px;
    margin: 10px;
    padding: 10px;
    background-color: var(--letraClara);
}

main form fieldset textarea, main form fieldset select, main form fieldset input{
    border: 1px solid var(--azul3);
    font-size: 1.1em;
    border-radius: 4px;
    padding: 5px;
    width: 100%;
    margin-bottom: 8px;
}
main form fieldset textarea{
    height: 400px;
}

main form fieldset input[type="submit"]{
    background-color: var(--azul2);
    color: var(--blanco);
    font-size: 1.1em;
    border: 0px;
    width: 100%;
    padding: 5px;
    border-radius: 2px;
}

footer{
    position: fixed;
    top: 89%;
    left: 3%;
    padding: 17px;
    background-color: orange;
    color: var(--blanco);
    border-radius: 100%;
}


footer a{
    color: var(--blanco);
    text-decoration: none;
    font-size: 1.5em;

}

.error{
    background-color: orange;
    color: var(--blanco);
    border: 1px solid var(--azul1);
    font-size: 1.1em;
    text-align: center;
    margin: 15px;
    padding: 15px;
}


.ok{
    background-color: rgb(83, 124, 83);
    color: var(--blanco);
    border: 1px solid var(--azul4);
    font-size: 1.1em;
    text-align: center;
    margin: 15px;
    padding: 15px;
}


.paginador{
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
    max-width: 250px;
    margin: auto;
}

.paginador a{
    text-decoration: none;
    color: var(--azul1);
}