* {
    box-sizing: border-box;
}

:root {
    --amarillo: yellow;
    --negro: black;
    --azul: blue;
    --rojo: red;
    --blanco: white;
    --gris: grey;
}

header {
    display: grid;
    grid-template-rows: 1fr 1fr;
    max-width: 1000px;
    margin: auto;
}

header h1 {
    background-color: var(--gris);
    color: var(--negro);
    text-align: center;
    margin: 0px;
    padding: 0px;
    border-radius: 15px 15px 0px 0px;
}

nav {
    background-color: var(--negro);
    margin: 0px;
    padding: 0px;
    border-radius: 0px 0px 15px 15px;
}

nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 0px;
    margin: 0px;
}

nav ul li {
    text-align: center;
    margin-top: 5px;
    padding: 5px;
}

nav ul li a {
    text-decoration: none;
    color: var(--gris);
}

nav ul li a:hover {
    color: var(--blanco);
}

main {
    display: grid;
    grid-template-rows: auto auto;
    max-width: 600px;
    margin: auto;
    justify-items: center;
}

div #imagen {
    max-width: 300px;
}

#imagen img {
    border-radius: 10px;
    max-width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0px 5px 46px 20px rgba(0, 0, 0, 0.42);
}



main div a {
    padding: 10px;
    background-color: var(--gris);
    color: var(--negro);
    text-decoration: none;
    font: 1em sans-serif;
    margin: 10px;
    border-radius: 5px;
}

main div a:hover {
    color: var(--blanco);
}

#menu a {
    display: block;
    background-color: var(--negro);
    color: var(--gris);
    text-decoration: none;
    text-align: center;
    padding: 10px;
    margin: 10px;
    margin-top: 20px;
}
#menu a:hover{
    background-color: var(--blanco);
    color: var(--negro);
}