:root {
    --blue:rgb(94, 94, 238);
    --cyan:rgb(179, 242, 255);
    --grey:rgb(240, 240, 240);
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.cabecera {
    background-color: var(--blue);
    color: white;
    text-align: center;
    padding: 1.5rem;
}

.cabecera .titulo {
    text-transform: uppercase;
}

.cabecera span {
    color: var(--cyan);
}

.menu {
    background-color: black;
    text-align: center;
    padding: 1rem;
}

.menu li {
    display: inline;
    padding: 1rem;
}

.menu li:hover {
    background-color: var(--blue);
}

.menu a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.hero {
    background-color: var(--cyan);
    text-align: center;
    padding: 2rem;
}

.hero h2 {
    padding-bottom: 1rem;
}


.contenedor-cursos {
    text-align: center;
    background-color: var(--grey);
    padding: 1rem;
}

.contenedor-cursos .curso {
    display: inline-block;
    background-color: white;
    padding: 1rem 1rem;
    padding-bottom: 2rem;
    border-radius: 10px;
    max-width: 300px;
    margin: 1rem;
}

.contenedor-cursos .curso img {
    border-radius: 5px;
}

.contenedor-cursos .curso a {
    background-color: var(--blue);
    text-decoration: none;
    color: white;
    padding: 0.5rem 1rem;
    margin: 1.5rem 1.5rem;
    border-radius: 5px;
    max-width: 20rem;
}

.contenedor-cursos .curso a:hover {
    background-color: black;
}

.contenedor-cursos .curso p {
    margin-bottom: 2rem;
}

.contenedor-cursos .curso > * {
    margin: 1rem;
}

.pie {
    background-color: black;
    color: white;
    text-align: center;
    padding: 2rem;
}