/* variables de color */
:root {
    --primary-color: #5865F2;
    --secondary-color: #070e58;
    --accent-color: #a4f479;
}

/****************************
Estilos generales
*****************************/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 300;
    color: var(--secondary-color);
    line-height: 1.5;
}

h1,
h2 {
    font-weight: 700;
    margin-bottom: 10px;
}

p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px dotted var(--primary-color);
}

a:hover {
    border-bottom: 1px solid var(--accent-color);
}

cite {
    font-style: normal;
}

abbr {
    text-decoration: none;
}

h1 {
    font-size: 3rem;
    letter-spacing: -1px;
    text-align: center;
    font-weight: 900;

}

h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--primary-color);
}

ul {
    margin-left: 3rem;
    list-style-type: square;
    margin-bottom: 1rem;
}

ul li {
    margin-bottom: .5rem;
    font-size: 1.1rem;
}

figure {
    width: 75%;
    margin: 3rem auto;
}

figcaption {
    text-align: left;
    padding-top: .25rem;
    font-size: .75rem;
}

/****************************
Videos e imágenes responsive del sitio web
*****************************/
.video-fluid {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.video-fluid-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-fluid::before {
    display: block;
    content: "";
    padding-top: 56.25%;
}

.img-fluid {
    width: 100%;
    height: auto;
}

main {
    padding-top: 50px;
    padding-bottom: 50px;
    min-height: calc(100vh - 310px);
}

/*
Las reglas que van a continuación consiguen que los contenidos dentro del elemento de class .container se adapten a los diversos dispositivos.
La class .container define un contenedor que ocupar el 100% de la pantalla del dispositivo, con un margen interior por la izquierda y por la derecha de 15 píxeles, y márgenes por la izquierda y por la derecha automáticos, para conseguir un diseño centrado.
A continuació utilizamos media queries, un módulo de CSS3 que permite adaptar la representación del contenido a las características del dispositivo y que se estudia en la unidad 5.
Con las 4 media queries utilizadas indicamos la anchura máxima que el .container tiene que tener cuando los dispositivos tengan la anchura mínima indicada por el punto de ruptura (breakpoint).
*/
.container {
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    width: 100%;
}


@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/****************************
Header
*****************************/
header {
    height: 180px;
    padding-top: 15px;
    padding-bottom: 15px;
    background: url("../img/amped_header.jpg") no-repeat 50% 50%;
    background-size: cover;
    padding: 15px;
}

header .container {
    background: var(--secondary-color);
    background: rgba(7, 14, 88, 0.7);
    color: white;
    max-width: 500px;
    text-align: center;
    padding: 10px;
}

header .logo {
    border: 0;
    display: block;
    margin-bottom: 5px;
}

header .logo img {
    height: 80px;
    width: auto;
}

/****************************
Menú de navegación
*****************************/
nav {
    text-align: center;
    color: var(--text-light);
    text-transform: uppercase;
}

nav ul {
    padding-left: 0;
    margin: 0;
}

nav ul li {
    display: inline-block;
    font-weight: 500;
    margin-right: 1rem;
    padding-bottom: .2rem;
}

nav ul li:last-child {
    margin-right: 0;
}

nav ul li a {
    color: inherit;
    border: none;
}

nav ul li a:hover {
    border: none;
    color: var(--accent-color);
}

nav li.active {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
}

nav li.active a:hover {
    color: inherit;
}

/*************************
Footer
**************************/

footer {
    height: 130px;
    padding: 30px 15px;
    background-color: var(--secondary-color);
    color: white;
    font-size: 0.8rem;

}

footer p {
    font-size: inherit;
    margin-bottom: 0.5rem;
}

footer a {
    color: inherit;
    border: none;
}

footer a:hover {
    border: none;
    color: var(--accent-color);
}

footer ul {
    list-style-type: none;
    margin-left: 0;
    margin-bottom: 5px;
}

footer ul li {
    display: inline-block;
    padding-right: 1rem;
}

footer ul li:last-child {
    padding-right: 0;
}

.home footer {
    text-align: center;
}


/****************************
Página de inicio
*****************************/
body.home {
    background-image: url(../img/home-hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: white;
    text-align: center;
}

body.home header {
    background: transparent;
}

body.home main {
    padding-top: calc(100vh - 850px);
}

body.home h1 {
    font-size: 3rem;
    line-height: 1;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
}

body.home a {
    color: inherit;
    border: none;
}

body.home nav ul {
    padding-top: 1rem;
    padding-left: 0;
    margin-left: 0;
}

body.home nav ul li {
    font-size: 1.3rem;
}

body.home .home-logo {
    width: 500px;
    height: auto;
    margin-bottom: 30px;
}

body.home footer {
    background-color: transparent;
    font-weight: 500;
}

body.home footer .copyright a {
    color: var(--accent-color);
}

body.home footer a:hover {
    color: var(--primary-color);
}

/*Esta regla permite que el tamaño de la letra de estos dos elementos de la página de inicio tengan un tamaño mayor cuando tengamos una pantalla de una anchura mínima de 1200 píxeles*/

@media (min-width: 1200px) {
    body.home h1 {
        font-size: 5rem;
    }

    body.home main p {
        font-size: 2.3rem;
    }
}

/***************************
Introducción y lineup
***************************/

.genre {
    display: block;
}

dl {
    margin-left: 3rem;
}

dt {
    font-size: 1.5rem;
    font-weight: 700;
}

dd {
    padding-left: 2rem;
    border-left: 3px solid var(--primary-color);
}

/***************************
Calendario de conciertos
***************************/

.intro {
    font-size: 1.5rem;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

/*Esta clase añadirá una barra de desplazamiento horizontal cuando sea necesario para que los usuarios que vean la tabla en dispositivos pequeños puedan desplazarse hacia la derecha para ver el contenido completo de la tabla */
.table-fluid {
    width: 100%;
    overflow-x: auto;
    margin-top: 30px;
}

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

caption {
    font-size: 1.3rem;
    border-top: 1px solid var(--primary-color);
    font-weight: 700;
    padding: 15px;
}

td,
th {
    padding: 0.5rem;
    font-size: 1.1rem;
}

td,
th {
    vertical-align: bottom;
    text-align: left;
}

th[scope="col"]:first-of-type {
    text-align: left;
}

th[scope="col"] {
    font-weight: normal;
    font-size: 1rem;
}

th[scope="row"] {
    font-weight: bold;
    font-size: 1.4rem;
    text-align: left;
}

thead tr {
    border-top: 1px solid var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
}

tbody tr:nth-child(odd) {
    background-color: var(--accent-color);
}

tfoot {
    border-bottom: 1px solid var(--primary-color);
}

tfoot td {
    text-align: left;
    font-size: 0.8rem;
}

/****************************
Formulario de compra de entradas
*****************************/

.required {
    font-size: 0.9rem;
    margin-bottom: 0;
    display: inline-block;
    padding-left: .5rem;
    padding-right: .5rem;
}


form {
    margin: 20px auto;
    padding: 20px;
    border-radius: 5px;
}

form ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}


fieldset {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #dde0fc;
}

legend {
    font-size: 1.4em;
    margin-bottom: 10px;
    font-weight: 700;
}

label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
}

label abbr {
    color: red;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="month"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: white;
    margin-bottom: 15px;
}

input[type="radio"],
input[type="checkbox"] {
    margin-right: 10px;
}

button[type="submit"] {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 40px;
    background-color: var(--primary-color);
    border: 0;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

button[type="submit"]:hover {
    background-color: var(--secondary-color);
}

/* Estilos para la máscara de entrada en campos de texto */
input[type="text"]:required:user-invalid,
input[type="email"]:required:user-invalid,
input[type="tel"]:required:user-invalid,
input[type="month"]:required:user-invalid,
input[type="date"]:required:user-invalid {
    border-color: #e53935;
}

input[type="text"]:required:valid,
input[type="email"]:required:valid,
input[type="tel"]:required:valid,
input[type="month"]:required:valid,
input[type="date"]:required:valid {
    border-color: #4caf50;
}


ul.radio-group:first-child {
    padding-top: 1rem;
}

.radio-group label {
    display: inline;
}

/* Cuando tengamos como mínimo 768px en el viewport, interesará que los elementos con estas clases se muestre el uno al lado del otro y adapten su anchura*/
@media (min-width: 768px) {
    form {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }

    li.two-col {
        display: inline-block;
        width: 49%;
    }

    li.three-col {
        display: inline-block;
        width: 32%;
    }

    li.four-col {
        display: inline-block;
        width: 24%;
    }

    li.two-col+li.two-col,
    li.three-col+li.three-col,
    li.four-col+li.four-col {
        margin-left: 4px;
    }
}