@import url(https://db.onlinewebfonts.com/c/80af27dce2efeecc910be0be75728730?family=Daft+Font);
.grid-container, .grid-container-contacto, .grid-container-disco, .grid-container-galeria, .grid-container-historia {
  width: 80%;
  margin: 0 auto;
  color: black;
  font-size: 40px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  display: grid;
  grid-template-columns: 0.5fr 1fr 0.5fr;
  grid-template-rows: 100px 500px 150px;
  /**AREAS**/
  grid-template-areas: "nav header header" 
 "nav main main"
 "nav footer footer"; }

.grid-container .pie, .grid-container-contacto .pie_contacto, .grid-container-disco .pie_disco, .grid-container-galeria .pie_galeria, .grid-container-historia .pie_historia {
  background-color: orangered;
  text-align: center;
  padding: 30px;
  grid-area: footer; }
  .grid-container .pie div a, .grid-container-contacto .pie_contacto div a, .grid-container-disco .pie_disco div a, .grid-container-galeria .pie_galeria div a, .grid-container-historia .pie_historia div a {
    margin: 10px; }

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

/*BODY*/
body {
  font-family: 'Roboto', sans-serif;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; }

header {
  background-color: white;
  padding: 20px;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1; }
  header h1 a {
    text-decoration: none;
    display: inline-block;
    font-family: "Daft Font";
    color: gold; }

.grid-container .encabezado {
  grid-area: header; }

.grid-container .menu {
  background-color: burlywood;
  grid-area: nav; }
  .grid-container .menu ul li {
    display: inline-block;
    margin: 20px; }
    .grid-container .menu ul li a {
      text-decoration: none;
      color: black; }

.grid-container .contenido {
  background-color: #92ba92;
  grid-area: main;
  height: 100%; }
  .grid-container .contenido .hero {
    text-align: center;
    font-size: 20px;
    margin: 50px;
    color: white;
    padding: 10px; }
    .grid-container .contenido .hero img {
      float: center; }

.grid-container-contacto .encabezado_contacto {
  grid-area: header; }

.grid-container-contacto .menu_contacto {
  background-color: burlywood;
  grid-area: nav; }
  .grid-container-contacto .menu_contacto ul li {
    display: inline-block;
    margin: 20px; }
    .grid-container-contacto .menu_contacto ul li a {
      text-decoration: none;
      color: black; }

.grid-container-contacto .contenido_contacto {
  background-color: #92ba92;
  grid-area: main; }
  .grid-container-contacto .contenido_contacto form {
    width: 100%;
    padding: 100px;
    grid-area: form;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .grid-container-contacto .contenido_contacto form .contenido-form {
      color: white;
      font-family: Helvetica, Arial, Helvetica, sans-serif;
      font-weight: 500;
      font-size: 18px;
      border-radius: 5px;
      line-height: 22px;
      background-color: transparent;
      border: 2px solid gold;
      transition: all 0.3s;
      padding: 13px;
      margin-bottom: 15px;
      width: 100%;
      outline: 0; }
    .grid-container-contacto .contenido_contacto form .enviar {
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      width: 100%;
      background-color: gold;
      border-radius: 5px;
      border: 0;
      cursor: pointer;
      color: white;
      font-size: 24px;
      padding-top: 10px;
      padding-bottom: 10px;
      transition: all 0.3s;
      margin-top: -4px;
      font-weight: 700; }

.grid-container-disco .encabezado_disco {
  grid-area: header; }

.grid-container-disco .menu_disco {
  background-color: burlywood;
  grid-area: nav; }
  .grid-container-disco .menu_disco ul li {
    display: inline-block;
    margin: 20px; }
    .grid-container-disco .menu_disco ul li a {
      text-decoration: none;
      color: black; }

.grid-container-disco .contenido_disco {
  background-color: #92ba92;
  grid-area: main; }
  .grid-container-disco .contenido_disco .productos {
    text-align: center; }
    .grid-container-disco .contenido_disco .productos h2 {
      text-align: center;
      color: white;
      margin-bottom: 20px; }
    .grid-container-disco .contenido_disco .productos div {
      border: 5px solid gold;
      width: 250px;
      height: 370px;
      margin: 10px;
      display: inline-block;
      color: black; }
      .grid-container-disco .contenido_disco .productos div img {
        width: 240px;
        height: 240px;
        padding: 1px; }
      .grid-container-disco .contenido_disco .productos div h3 {
        font-size: 15px;
        margin: 20px 0px 20px 0px; }
      .grid-container-disco .contenido_disco .productos div a {
        text-decoration: none;
        padding: 5px;
        color: white;
        font-size: 15px; }

.grid-container-galeria .encabezado_galeria {
  grid-area: header; }

.grid-container-galeria .menu_galeria {
  background-color: burlywood;
  grid-area: nav; }
  .grid-container-galeria .menu_galeria ul li {
    display: inline-block;
    margin: 20px; }
    .grid-container-galeria .menu_galeria ul li a {
      text-decoration: none;
      color: black; }

.grid-container-galeria .contenido_galeria {
  background-color: #92ba92;
  grid-area: main;
  overflow-y: scroll;
  scroll-behavior: smooth; }
  .grid-container-galeria .contenido_galeria .grid-galeria {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 5px; }
    .grid-container-galeria .contenido_galeria .grid-galeria div {
      position: relative; }
      .grid-container-galeria .contenido_galeria .grid-galeria div h3 {
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.31);
        color: white;
        width: 100%;
        padding: 5px;
        font-size: 15px; }
      .grid-container-galeria .contenido_galeria .grid-galeria div img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .grid-container-galeria .contenido_galeria .grid-galeria .img-3 {
      grid-row: span 2; }
    .grid-container-galeria .contenido_galeria .grid-galeria .img-4 {
      grid-column: span 2; }
    .grid-container-galeria .contenido_galeria .grid-galeria .img-6 {
      grid-column: span 2; }

.grid-container-historia .encabezado_historia {
  grid-area: header; }

.grid-container-historia .menu_historia {
  background-color: burlywood;
  grid-area: nav; }
  .grid-container-historia .menu_historia ul li {
    display: inline-block;
    margin: 20px; }
    .grid-container-historia .menu_historia ul li a {
      text-decoration: none;
      color: black; }

.grid-container-historia .contenido_historia {
  background-color: #92ba92;
  grid-area: main;
  overflow-y: scroll;
  scroll-behavior: smooth; }
  .grid-container-historia .contenido_historia .primeros {
    text-align: center;
    margin-bottom: 50px;
    background-color: gold;
    width: 100%; }
    .grid-container-historia .contenido_historia .primeros h2 {
      font-family: "Daft Font";
      font-size: 30px;
      color: black; }
    .grid-container-historia .contenido_historia .primeros p {
      color: black;
      font-size: 15px; }
  .grid-container-historia .contenido_historia .homework {
    margin-bottom: 50px;
    color: white;
    width: 100%; }
    .grid-container-historia .contenido_historia .homework h2 {
      font-family: "Daft Font";
      font-size: 30px;
      text-align: center; }
    .grid-container-historia .contenido_historia .homework img {
      float: left;
      width: 120px;
      height: 120px;
      margin-right: 20px;
      padding: 15px; }
    .grid-container-historia .contenido_historia .homework p {
      font-size: 15px;
      text-align: justify;
      margin: 10px; }
  .grid-container-historia .contenido_historia .discovery {
    margin-bottom: 50px;
    background-color: gold;
    color: black;
    width: 100%; }
    .grid-container-historia .contenido_historia .discovery h2 {
      font-family: "Daft Font";
      font-size: 30px;
      text-align: center; }
    .grid-container-historia .contenido_historia .discovery img {
      float: right;
      width: 120px;
      height: 120px;
      margin-right: 20px;
      padding: 15px; }
    .grid-container-historia .contenido_historia .discovery p {
      font-size: 15px;
      text-align: justify;
      margin: 10px; }
  .grid-container-historia .contenido_historia .human {
    margin-bottom: 50px;
    color: white; }
    .grid-container-historia .contenido_historia .human h2 {
      font-family: "Daft Font";
      font-size: 30px;
      text-align: center;
      width: 100%; }
    .grid-container-historia .contenido_historia .human img {
      float: left;
      width: 120px;
      height: 120px;
      margin-right: 20px;
      padding: 15px; }
    .grid-container-historia .contenido_historia .human p {
      font-size: 15px;
      text-align: justify;
      margin: 10px;
      color: white; }
  .grid-container-historia .contenido_historia .tron {
    margin-bottom: 50px;
    width: 100%;
    background-color: gold;
    color: black; }
    .grid-container-historia .contenido_historia .tron h2 {
      font-family: "Daft Font";
      font-size: 30px;
      text-align: center; }
    .grid-container-historia .contenido_historia .tron img {
      float: right;
      width: 120px;
      height: 120px;
      margin-right: 20px;
      padding: 15px; }
    .grid-container-historia .contenido_historia .tron p {
      font-size: 15px;
      text-align: left;
      margin: 10px; }
  .grid-container-historia .contenido_historia .ram {
    margin-bottom: 50px;
    width: 100%;
    color: black; }
    .grid-container-historia .contenido_historia .ram h2 {
      font-family: "Daft Font";
      font-size: 30px;
      text-align: center;
      color: white; }
    .grid-container-historia .contenido_historia .ram img {
      float: left;
      width: 120px;
      height: 120px;
      margin-right: 20px;
      padding: 15px; }
    .grid-container-historia .contenido_historia .ram p {
      font-size: 15px;
      text-align: left;
      margin: 10px;
      color: white; }
  .grid-container-historia .contenido_historia .separacion {
    margin-bottom: 50px;
    width: 100%;
    background-color: burlywood;
    color: black; }
    .grid-container-historia .contenido_historia .separacion h2 {
      font-family: "Daft Font";
      font-size: 30px;
      text-align: center; }
    .grid-container-historia .contenido_historia .separacion img {
      float: right;
      width: 120px;
      height: 120px;
      margin-right: 20px;
      padding: 15px; }
    .grid-container-historia .contenido_historia .separacion p {
      font-size: 15px;
      text-align: left;
      margin: 10px; }

/*---MEDIA QUERY---*/
@media screen and (max-width: 1740px) {
  .menu ul li a {
    font-size: 40px; } }

/*Bajamos font-size y aumentamos un poco el main*/
@media screen and (max-width: 1145px) {
  .grid-container {
    width: 80%;
    margin: 0 auto;
    grid-template-columns: 0.5fr 1fr 0.5fr;
    grid-template-rows: 100px 600px 150px;
    /**AREAS**/
    grid-template-areas: "nav header header" 
 "nav main main"
 "nav footer footer"; }
    .grid-container .menu ul li a {
      font-size: 40px; } }

/*lo dejamos para movil en 2 columnas*/
@media screen and (max-width: 950px) {
  .grid-container {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr 0.5fr;
    grid-template-rows: 100px 200px 600px 150px;
    /**AREAS**/
    grid-template-areas: "header header" 
 "nav nav"
 "main main"
 "footer footer"; }
    .grid-container .menu ul li a {
      font-size: 20px; } }

@media screen and (max-width: 1145px) {
  .grid-container-galeria {
    width: 80%;
    margin: 0 auto;
    grid-template-columns: 0.5fr 1fr 0.5fr;
    grid-template-rows: 100px 600px 150px;
    /**AREAS**/
    grid-template-areas: "nav header header" 
 "nav main main"
 "nav footer footer"; }
    .grid-container-galeria .menu ul li a {
      font-size: 40px; } }

/*GALERIA*/
@media screen and (max-width: 950px) {
  .grid-container-galeria {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr 0.5fr;
    grid-template-rows: 100px 200px 600px 150px;
    /**AREAS**/
    grid-template-areas: "header header" 
 "nav nav"
 "main main"
 "footer footer"; }
    .grid-container-galeria .menu_galeria ul li a {
      font-size: 20px; } }

@media screen and (max-width: 563px) {
  header {
    flex-direction: column; }
    header nav ul {
      flex-direction: column; }
  .contenido-galeria .grid-galeria {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1.5fr);
    grid-auto-rows: 250px;
    gap: 5px; }
    .contenido-galeria .grid-galeria .img-3 {
      grid-row: span 1; }
    .contenido-galeria .grid-galeria .img-4 {
      grid-column: span 1; }
    .contenido-galeria .grid-galeria .img-6 {
      grid-column: span 1; } }

/*DISCOGRAFIA*/
@media screen and (max-width: 1863px) {
  .contenido_disco {
    overflow-y: scroll;
    scroll-behavior: smooth; } }

@media screen and (max-width: 802px) {
  .grid-container-disco {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr 0.5fr;
    grid-template-rows: 100px 150px 600px 150px;
    /**AREAS**/
    grid-template-areas: "header header" 
 "nav nav"
 "main main"
 "footer footer"; }
    .grid-container-disco .menu_disco ul li a {
      font-size: 20px; } }

@media screen and (max-width: 563px) {
  header {
    flex-direction: column; }
    header nav ul {
      flex-direction: column; }
  .contenido-disco .grid-disco {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1.5fr);
    grid-auto-rows: 250px;
    gap: 5px; } }

/*HISTORIA*/
@media screen and (max-width: 802px) {
  .grid-container-historia {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr 0.5fr;
    grid-template-rows: 100px 150px 600px 150px;
    /**AREAS**/
    grid-template-areas: "header header" 
 "nav nav"
 "main main"
 "footer footer"; }
    .grid-container-historia .menu_historia ul li a {
      font-size: 20px; } }

@media screen and (max-width: 633px) {
  .grid-container-historia {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr 0.5fr;
    grid-template-rows: 100px 150px 600px 150px;
    /**AREAS**/
    grid-template-areas: "header header" 
 "nav nav"
 "main main"
 "footer footer"; }
    .grid-container-historia .menu_historia ul li a {
      font-size: 20px; }
    .grid-container-historia .contenido_historia .primeros {
      text-align: center;
      margin-bottom: 50px;
      background-color: gold;
      width: 100%; }
      .grid-container-historia .contenido_historia .primeros h2 {
        font-family: "Daft Font";
        font-size: 30px;
        color: black; }
      .grid-container-historia .contenido_historia .primeros p {
        color: black;
        font-size: 15px; }
      .grid-container-historia .contenido_historia .primeros img {
        visibility: hidden; }
    .grid-container-historia .contenido_historia .homework {
      text-align: center;
      margin-bottom: 50px;
      color: white; }
      .grid-container-historia .contenido_historia .homework h2 {
        font-family: "Daft Font";
        font-size: 30px;
        text-align: center;
        width: 100%; }
      .grid-container-historia .contenido_historia .homework p {
        font-size: 15px;
        text-align: center;
        margin: 10px; }
      .grid-container-historia .contenido_historia .homework img {
        visibility: hidden;
        display: none; }
    .grid-container-historia .contenido_historia .discovery {
      text-align: center;
      margin-bottom: 50px;
      background-color: gold;
      color: black;
      width: 100%; }
      .grid-container-historia .contenido_historia .discovery h2 {
        font-family: "Daft Font";
        font-size: 30px;
        text-align: center; }
      .grid-container-historia .contenido_historia .discovery p {
        font-size: 15px;
        text-align: center;
        margin: 10px; }
      .grid-container-historia .contenido_historia .discovery img {
        visibility: hidden;
        display: none; }
    .grid-container-historia .contenido_historia .human {
      text-align: center;
      margin-bottom: 50px;
      color: white; }
      .grid-container-historia .contenido_historia .human h2 {
        font-family: "Daft Font";
        font-size: 30px;
        text-align: center;
        width: 100%; }
      .grid-container-historia .contenido_historia .human p {
        font-size: 15px;
        text-align: center;
        margin: 10px;
        color: white; }
      .grid-container-historia .contenido_historia .human img {
        visibility: hidden;
        display: none; }
    .grid-container-historia .contenido_historia .tron {
      text-align: center;
      margin-bottom: 50px;
      width: 100%;
      background-color: gold;
      color: black; }
      .grid-container-historia .contenido_historia .tron h2 {
        font-family: "Daft Font";
        font-size: 30px;
        text-align: center; }
      .grid-container-historia .contenido_historia .tron p {
        font-size: 15px;
        text-align: center;
        margin: 10px; }
      .grid-container-historia .contenido_historia .tron img {
        visibility: hidden;
        display: none; }
    .grid-container-historia .contenido_historia .ram {
      text-align: center;
      margin-bottom: 50px;
      width: 100%;
      color: black; }
      .grid-container-historia .contenido_historia .ram h2 {
        font-family: "Daft Font";
        font-size: 30px;
        text-align: center;
        color: white; }
      .grid-container-historia .contenido_historia .ram p {
        font-size: 15px;
        text-align: center;
        margin: 10px;
        color: white; }
      .grid-container-historia .contenido_historia .ram img {
        visibility: hidden;
        display: none; }
    .grid-container-historia .contenido_historia .separacion {
      text-align: center;
      margin-bottom: 50px;
      width: 100%;
      background-color: burlywood;
      color: black; }
      .grid-container-historia .contenido_historia .separacion h2 {
        font-family: "Daft Font";
        font-size: 30px;
        text-align: center; }
      .grid-container-historia .contenido_historia .separacion p {
        font-size: 15px;
        text-align: center;
        margin: 10px; }
      .grid-container-historia .contenido_historia .separacion img {
        visibility: hidden;
        display: none; } }

/*CONTACTO*/
@media screen and (max-width: 802px) {
  .grid-container-contacto {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr 0.5fr;
    grid-template-rows: 100px 150px 600px 150px;
    /**AREAS**/
    grid-template-areas: "header header" 
 "nav nav"
 "main main"
 "footer footer"; }
    .grid-container-contacto .menu_contacto ul li a {
      font-size: 20px; } }