@font-face {
    font-family: "Poppins";
    src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
    font-family: "GasoekOne";
    src: url(../fonts/GasoekOne-Regular.ttf);
}

/* /////////////////////////////////////////////////// */

:root {
    --verdeOscuro: rgb(31,100,109);
    --verdeClaro: #9ea600;
    --blanco: #fff;
}

body {
    font-family: "Poppins";
}

h1, h2, h3 {
    font-family: "GasoekOne";
}

h1 {
    font-size: 4rem;
    color: var(--verdeClaro);
}

h2 {
    color: var(--verdeOscuro);
}

h3 {
    font-size: 1.5rem;
    border-bottom: var(--verdeOscuro) solid 2px;
}

nav a {
    border-top: var(--blanco) solid 3px;
}

nav a:hover {
    border-top: var(--verdeOscuro) solid 3px;
    background-color: var(--blanco);
}

nav a {
    text-decoration: none;
    color: var(--verdeOscuro);
}

nav a:hover {
    text-decoration: none;
    color: var(--verdeOscuro);
}

#artistas article {
    padding: 0.5rem;
}

figcaption {
    font-size: 0.75rem;
    color: var(--blanco);
    border-bottom: var(--blanco) solid 1px;
}

header, section {
    padding: 5vh 0;
}

footer {
    padding: 1rem 0;
    background-color: var(--verdeOscuro);
    color: var(--blanco);
}

form input {
    border: var(--verdeOscuro) solid 1px;
    margin-bottom: 10px;
}

img {
    object-fit: cover;
}

/* CLASES */

.btn {
    text-decoration: none;
    width: 50%;
    margin: 20px auto;
    font-weight: bold;
    color: var(--blanco);
    background-color: var(--verdeOscuro);
}

.btn:hover {
    border: var(--verdeOscuro);
    color: var(--verdeOscuro);
}

/* IDs */

#cabezal {
    background-color: var(--verdeClaro);
}

#portada {
    height: 70vh;
    background-image: url(../img/hero.png);
    background-size: cover;
}

#portada p {
    color: var(--blanco);
}

#artistas img {
    height: 500px;
}

#artistasPrevios {
    background-color: var(--verdeClaro);
}

#artistasPrevios img {
    width: 100%;
    height: 200px;
}