@charset "UTF-8";
/* header */
@import url("https://fonts.googleapis.com/css2?family=Amarante&family=Orbitron:wght@400..900&display=swap");
header {
  width: 100%;
  height: 10%;
}
header .navbar-brand {
  background: #6A1E55;
  background: radial-gradient(circle, rgb(106, 30, 85) 0%, rgb(0, 0, 0) 57%);
  padding-top: 0%;
}
header img {
  width: 20%;
  height: auto;
}
header .navbar {
  padding: 0%;
  margin: 0%;
}
header .nav-item {
  background-color: #6a1e55;
  font-weight: 600;
  border-radius: 10%;
  margin: 1%;
}
header .nav-link {
  color: #f39f5a;
}
header .container-fluid {
  background-color: black;
}
header .nav-item:hover {
  transform: scale(1.5, 1.5);
}

/* footer*/
footer {
  display: flex;
  flex-flow: row wrap;
  flex-direction: row;
  background: #6A1E55;
  background: radial-gradient(circle, rgb(106, 30, 85) 0%, rgb(0, 0, 0) 57%);
  gap: 1rem;
}

.iconos1, .iconos2 {
  display: inline-flex;
  box-sizing: border-box;
  flex-basis: 0; /* Establecer un tamaño base inicial de 0 */
  width: 80%;
  height: auto;
}

/*Discografia*/
main.backdisc {
  background-image: url(https://cdn-p.smehost.net/sites/7f9737f2506941499994d771a29ad47a/wp-content/uploads/2022/07/2022-06-26-Hellfest-Pentagram-6-watermark-1536x1024.jpg);
  background-size: cover;
  filter: brightness(1);
  background-blend-mode: overlay;
  font-weight: 600;
  display: grid;
  grid-template-areas: ". titulodisc titulodisc titulodisc ." ". disco1 disco2 disco3 ." ". disco4 disco5 disco6 ." ". disco7 disco8 disco9 .";
  grid-template-columns: 5% 30% 30% 30% 5%;
  grid-template-rows: 50px 500px 500px 500px;
}
main.backdisc .backdisc-grid {
  height: 100%;
  width: 100%;
}
main.backdisc .titulodisc {
  grid-area: titulodisc;
  text-align: center;
}
main.backdisc .logospot {
  width: 15%;
  height: auto;
}
main.backdisc .card {
  background: rgba(255, 255, 255, 0.1);
  font-size: normal;
}
main.backdisc .disco1, main.backdisc .disco9, main.backdisc .disco8, main.backdisc .disco7, main.backdisc .disco6, main.backdisc .disco5, main.backdisc .disco4, main.backdisc .disco3, main.backdisc .disco2 {
  grid-area: disco1;
  font-size: larger;
  color: black;
  list-style: none;
  font-weight: 900;
  text-shadow: 8px 8px 2px rgba(106, 30, 85, 0.49);
}
main.backdisc .disco2 {
  grid-area: disco2;
}
main.backdisc .disco3 {
  grid-area: disco3;
}
main.backdisc .disco4 {
  grid-area: disco4;
}
main.backdisc .disco5 {
  grid-area: disco5;
}
main.backdisc .disco6 {
  grid-area: disco6;
}
main.backdisc .disco7 {
  grid-area: disco7;
}
main.backdisc .disco8 {
  grid-area: disco8;
}
main.backdisc .disco9 {
  grid-area: disco9;
}

/*Home*/
main.backhome {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Pentagram_Hammer_of_Doom_X_Wuerzburg_2015_1.jpg/1280px-Pentagram_Hammer_of_Doom_X_Wuerzburg_2015_1.jpg);
  background-size: cover;
  filter: brightness(2);
  background-blend-mode: overlay;
  display: grid;
  grid-template-areas: "titulo titulo titulo" "sitio sitio sitio" ". foto ." "doom doom doom" "spot spot spot";
  grid-template-columns: 10% 80% 10%;
  grid-template-rows: 10px 100px 1000px 100px 300px;
  justify-content: cover;
  height: fit-content;
}

.h1 {
  grid-area: titulo;
}

.parrafo {
  grid-area: sitio;
  text-align: center;
}

.foto {
  grid-area: foto;
  width: 80%;
  height: auto;
  margin: auto;
  justify-content: cover;
}

.backhome img {
  border-radius: 25px;
}

.doom {
  grid-area: doom;
  text-align: center;
}

.spot {
  grid-area: spot;
}

/* Documental */
main.backdocumental {
  background-image: url(https://s3.us-east-1.amazonaws.com/bomb-images/_hiresolution/lastdayshere_body.jpg);
  background-size: 100%;
  filter: brightness(1);
  background-blend-mode: overlay;
  display: grid;
  grid-template-columns: 30% 10% 30%;
  grid-template-rows: 50px 600px 400px;
  grid-template-areas: "titulodoc titulodoc titulodoc" "parrafodoc parrafodoc imagendoc" "trailer trailer trailer";
}

.backdocumental-grid {
  width: 100%;
  height: 100%;
}

.titulodoc {
  grid-area: titulodoc;
  justify-items: center;
  text-align: center;
}

.parrafodoc {
  grid-area: parrafodoc;
  text-align: center;
  font-size: large;
  color: white;
  font-weight: 600;
}

.imagendoc {
  border-radius: 25px;
  grid-area: imagendoc;
  width: 100%;
  height: auto;
  justify-items: right;
}

.trailer {
  grid-area: trailer;
  justify-items: center;
}

/* Audios y videos */
main.backaudio {
  background-image: url(https://www.futuro.cl/wp-content/uploads/2022/08/pentagram.jpg);
  background-size: cover;
  filter: brightness(1);
  background-blend-mode: overlay;
  background-repeat: repeat;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 5;
  display: grid;
  grid-template-areas: "tituloa1 tituloa1 tituloa1 tituloa1" "spoti spoti spoti spoti" "tituloa2 tituloa2 tituloa2 tituloa2" "video1 video1 video2 video2" "video3 video3 video4 video4";
  grid-template-columns: 20% 20% 20% 20%;
  grid-template-rows: 50px 350px 50px 400px 400px;
}

.tituloa1 {
  grid-area: tituloa1;
}

.spoti {
  grid-area: spoti;
}

.tituloa2 {
  grid-area: tituloa2;
}

.video1 {
  grid-area: video1;
}

.video2 {
  grid-area: video2;
}

.video3 {
  grid-area: video3;
}

.video4 {
  grid-area: video4;
}

/* Historia */
main.historiabox {
  display: grid;
  grid-template-areas: "titulohist1 titulohist1 titulohist1 titulohist1 titulohist1" ". parrafhist1 parrafhist1 histfoto1 ." ". titulorigen titulorigen titulorigen ." ". fotorigen parraforigen parraforigen ." ". titulo70 titulo70 titulo70 ." ". parrafo70 parrafo70 foto70 ." ". tituloref tituloref tituloref ." ". fotoref parrafref parrafref ." ". tituloact tituloact tituloact ." ". parrafact parrafact fotomeme .";
  grid-template-columns: 15% 20% 20% 20% 15%;
  grid-template-rows: 50px 480px 50px 900px 50px 1300px 50px 500px 50px 1400px;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Pentagram_Hammer_of_Doom_X_Wuerzburg_2015_1.jpg/1280px-Pentagram_Hammer_of_Doom_X_Wuerzburg_2015_1.jpg);
  background-size: cover;
  filter: brightness(1);
  background-blend-mode: overlay;
}
main.historiabox img {
  border-radius: 25px;
  width: 90%;
  height: auto;
}

.titulohist1 {
  grid-area: titulohist1;
}

.parrafhist1 {
  grid-area: parrafhist1;
}

.histfoto1 {
  grid-area: histfoto1;
}

.titulorigen {
  grid-area: titulorigen;
}

.fotorigen {
  grid-area: fotorigen;
  width: 70%;
}

.parraforigen {
  grid-area: parraforigen;
}

.titulo70 {
  grid-area: titulo70;
}

.parrafo70 {
  grid-area: parrafo70;
  animation-timing-function: 1;
}

.foto70 {
  grid-area: foto70;
}

.tituloref {
  grid-area: tituloref;
}

.fotoref {
  grid-area: fotoref;
  width: 60%;
}

.parrafref {
  grid-area: parrafref;
}

.tituloact {
  grid-area: tituloact;
}

.parrafact {
  grid-area: parrafact;
}

.fotomeme {
  grid-area: fotomeme;
}

* {
  margin: 0;
  padding: 0;
}

/* body*/
body {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: medium;
  background-size: auto;
  background-color: hsl(240, 5%, 11%);
}
body ul {
  list-style: none;
}
body .foto {
  width: 90%;
  height: auto;
}
body .parrafo2 {
  font-size: medium;
}
body .parrafo {
  font-size: large;
}
body h1 {
  color: #a64d79;
}
body h1 {
  text-align: center;
}
body h2 {
  color: #a64d79;
}
body h2 {
  text-align: center;
}
body .parrafo {
  color: white;
}
body .parrafo2 {
  color: #f39f5a;
}

/* fuente*/
/*animaciones*/
.animate__fadeOut {
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.animate__flipInX {
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.card-img-top:hover {
  transform: scale(1.15, 1.15);
}

/* Resonsive */
/* Mobile */
@media (max-width: 991px) {
  header {
    width: 100%;
    height: auto;
    background-color: #6a1e55;
    background-size: cover;
    font-size: medium;
  }
  .foto {
    width: 100%;
    height: auto;
  }
  .imagendoc {
    width: 100%;
    height: auto;
  }
  main.historiabox {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "titulohist1" "parrafhist1" "titulorigen" "parraforigen" "fotorigen" "titulo70" "parrafo70" "tituloref" "parrafref" "tituloact" "parrafact" "fotomeme";
    grid-template-rows: 50px 600px 50px 1700px 400px 50px 2700px 50px 1000px 50px 2900px 350px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
  }
  main.historiabox .histfoto1 {
    display: none;
  }
  main.historiabox .foto70 {
    display: none;
  }
  main.historiabox .fotoref {
    display: none;
  }
  main.historiabox img {
    height: 250px;
    width: auto;
  }
  main.backdisc {
    grid-template-areas: "titulodisc" "disco1" "disco2" "disco3" "disco4" "disco5" "disco6" "disco7" "disco8" "disco9";
    grid-template-columns: 1fr;
    grid-template-rows: 100px 500px 600px 600px 600px 600px 600px 600px 600px 600px;
  }
  main.backdisc .card {
    padding-left: 20%;
  }
  .imgdisc {
    width: 100%;
    height: auto;
  }
  main.backdocumental {
    grid-template-areas: "titulodoc" "parrafodoc" "imagendoc" "trailer";
    grid-template-columns: 1fr;
    grid-template-rows: 50px 750px 620px 400px;
    background-size: auto;
  }
  .parrafodoc {
    width: 100%;
    height: auto;
    font-size: medium;
    justify-content: center;
  }
  .imagendoc {
    width: 100%;
    height: auto;
  }
  .trailer {
    width: 100%;
    height: 100%;
  }
  main {
    width: auto;
  }
  main.backhome {
    background-size: 100vw 100vh;
    display: grid;
    grid-template-areas: "titulo" "sitio" "foto" "doom" "spot";
    grid-template-columns: 1fr;
    grid-template-rows: 1px;
  }
  main.backaudio {
    display: grid;
    grid-template-areas: "tituloa1" "spoti" "tituloa2" "video1" "video2" "video3" "video4";
    grid-template-columns: 1fr;
    grid-template-rows: 50px 350px 50px 400px 400px 400px 400px;
  }
  .spoti {
    width: 100%;
    height: 100%;
  }
  .video1 {
    width: 100%;
    height: 100%;
  }
  .video2 {
    width: 100%;
    height: 100%;
  }
  .video3 {
    width: 100%;
    height: 100%;
  }
  .video4 {
    width: 100%;
    height: 100%;
  }
}
footer {
  width: 100%;
}

/*# sourceMappingURL=pentastyle.css.map */