@font-face {
    font-family: 'SairaExtraCondensed';
    src: url(../fonts/SairaExtraCondensed-Bold.ttf);
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Lora';
    src: url(../fonts/Lora-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}

:root {
    --marron-oscuro: #4b2c20;
    --marron-claro: #a98274;
    --marron-transparente: #4b2c2070;
}

body {
    font-family: 'Lora';
    color: var(--marron-oscuro);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'SairaExtraCondensed';
}

header {
    margin: 3rem 0;
}

header nav a {
    text-decoration: none;
    font-family: 'SairaExtraCondensed';
    font-size: 25px;
    color: var(--marron-oscuro);
    transition: 0.35s;
    border-bottom: 3px solid transparent;
}

header nav a:hover {
    color: var(--marron-claro);
    border-bottom: 3px solid var(--marron-claro);
}

small {
    font-family: 'SairaExtraCondensed';
    color: var(--marron-claro);
}

/* Guitarras */
#guitarras {
    background-color: var(--marron-oscuro);
    color: #fff;
}

#guitarras h2 {
    font-size: 20px;
}

#guitarras figure img {
    width: 100%;
    max-height: 75vh;
    object-fit: cover;
    border-bottom: 5px solid var(--marron-claro);
}

#guitarras article {
    padding: 0;
    opacity: 0.5;
    transition: 0.35s;
}

#guitarras article:hover {
    opacity: 1;
}

#sorteo {
    background-image: url(../img/guitarra-fondo.jpg);
    background-size: cover;
    max-height: 60vh;
    color: #fff;
}

#sorteo h2 {
    color: var(--marron-claro);
}

#sorteo article {
    padding: 3rem;
    background-color: var(--marron-transparente);
}

#sorteo a {
    color: var(--marron-claro);
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

#sorteo a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/* Form */
.btn.btn-primary {
    background-color: var(--marron-claro);
    border-color: var(--marron-claro);
    color: var(--marron-oscuro);
}

.btn.btn-primary:hover {
    border-color: #fff;
    background-color: #fff;
}

.form-control,
.form-select {
    border: 3px solid var(--marron-oscuro);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--marron-claro);
}

/* Footer */
footer {
    background-color: var(--marron-oscuro);
    color: #fff;
}