@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Orbitron:wght@400..900&family=Workbench&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&family=Rubik+Glitch+Pop&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
/* Variables SASS */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Work Sans", sans-serif;
}

body a:hover {
  color: rgb(255, 255, 255);
}

/* MAIN HOME INCIO*/
.home {
  background-image: url(../multimedia/consola-2.jpeg);
  background-size: cover;
  background-position: center;
  height: 100%;
  color: white;
  background-color: black;
}

.h1-home {
  padding: 15px;
  font-family: "Orbitron", sans-serif;
  color: #fefdfd;
  font-size: 32px;
  text-shadow: 0 0 5px #C287E8;
  text-align: left;
}

.h2-home {
  padding: 15px;
  font-family: "Work Sans", sans-serif;
  color: #fefdfd;
  font-size: 25px;
  text-shadow: 0 0 5px #C287E8;
  text-align: center;
}

.h3-home {
  padding: 12px;
  font-family: "Orbitron", sans-serif;
  color: #fefdfd;
  font-size: 15px;
  text-shadow: 0 0 5px #C287E8;
  text-align: center;
}

.img-mid-home {
  background-image: url(../multimedia/techno2.JPG);
  background-size: cover;
  background-position: center;
  height: 650px;
  border: 5px solid #000000;
  border-radius: 10px;
}

.img-home {
  background-image: url(../multimedia/dark1recort.jpg);
  background-size: cover;
  background-position: center;
  height: 650px;
  border: 5px solid #000000;
  border-radius: 10px;
  margin-bottom: 10px;
}

.img-home2 {
  background-image: url(../multimedia/guitarra1.JPG);
  background-size: cover;
  background-position: center;
  height: 650px;
  border: 5px solid #000000;
  border-radius: 10px;
  margin-bottom: 10px;
}

.p-home {
  font-size: 15px;
  text-align: center;
  padding: 7px;
}

.p-home2 {
  font-family: "Work Sans", sans-serif;
  font-size: 15px;
  text-align: center;
  padding: 1px;
}

.p-home3 {
  font-family: "Work Sans", sans-serif;
  text-align: center;
  font-size: 16px;
}

.p-home::first-letter {
  font-size: 20px;
}

.link-trayectoria {
  background-color: #C287E8;
  font-family: "Work Sans", sans-serif;
  color: rgb(255, 255, 255);
  text-decoration: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  margin-left: 15px;
  text-shadow: 0 0 5px rgb(1, 0, 2);
}

.aboutme {
  background-color: rgba(2, 2, 2, 0.4588235294);
}

.link-discografia {
  background-color: #C287E8;
  font-family: "Work Sans", sans-serif;
  color: rgb(255, 255, 255);
  text-decoration: none;
  border-radius: 4px;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0 0 5px rgb(1, 0, 2);
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  text-align: center;
}

.terminos {
  font-size: 16px;
  color: red;
  text-decoration: underline;
  display: flex;
  justify-content: center;
}

.icono-contacto {
  font-size: 24px;
}

/* .video-container{
    width: 100%;
    align-items: center;
    justify-content: center;
}

.video-container video{
    width: 2000px;
} */
/* MAIN HOME FINAL*/
/* TRAYECTORIA INICIO*/
.main-trayectoria {
  background-color: black;
  background-image: url(../multimedia/consola-2.jpeg);
  background-size: cover;
  background-position: center;
  color: white;
  background-color: black;
}

.h1-trayectoria {
  font-family: "Work Sans", sans-serif;
  font-size: 30px;
  text-align: center;
  color: #fefdff;
  padding-top: 10px;
  text-shadow: 0 0 5px #C287E8;
}

.p-trayectoria {
  text-align: center;
  font-family: "Work Sans", sans-serif;
  color: white;
  font-size: 15px;
  padding-top: 20px;
  margin: 10px;
}

.p-trayectoria2 {
  text-align: center;
  font-family: "Work Sans", sans-serif;
  color: white;
  text-align: center;
  font-size: 15px;
  padding-top: 20px;
  margin: 10px;
}

.nright {
  background-image: url(../multimedia/luchifacha.jfif);
  height: 500px;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
}

.nright2 {
  background-image: url(../multimedia/techno1.JPG);
  height: 500px;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
}

.nleft {
  background-image: url(../multimedia/luchieivan.jfif);
  height: 500px;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
}

.nleft2 {
  background-image: url(../multimedia/puravidahd.JPG);
  height: 500px;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
}

.h2-trayectoria-tablet {
  font-size: 25px;
  padding-top: 33px;
  padding-bottom: 20px;
  text-align: center;
  font-family: "Work Sans", sans-serif;
  color: white;
  text-shadow: 0 0 5px #C287E8;
}

.p-trayectoria::first-letter {
  font-size: 22px;
}

/* TRAYECTORIA FINAL */
/* DISCOGRAFIA INICIO*/
.main-discografia {
  background-image: url(../multimedia/consola-2.jpeg);
  background-size: cover;
  background-position: center;
  color: white;
  background-color: black;
}

.wow.animate__shakeX {
  animation: infinite-bounce 3s infinite;
}

.jumbotron {
  background-image: url(../multimedia/2x-escritorioluchiv2.jfif);
  height: 500px;
  background-size: cover;
  background-position: center;
}

.h1-discografia {
  font-size: 40px;
  padding: 20px;
  text-shadow: 0 0 5px black;
  font-family: "Orbitron", sans-serif;
  text-align: center;
  text-decoration: underline;
  text-shadow: 0 0 5px #C287E8;
}

.h2-discografia {
  background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
  text-align: center;
  padding: 20px;
  color: white;
  text-shadow: 0 0 5px black;
  font-family: "Mukta", sans-serif;
}

.h3-discografia {
  color: white;
  text-shadow: 0 0 5px black;
  font-family: "Mukta", sans-serif;
  text-align: center;
}

.h4-discografia {
  color: rgb(255, 255, 255);
  text-shadow: 0 0 5px rgb(249, 5, 216);
  font-size: 30px;
  text-align: center;
  padding: 20px;
}

/* Evita el scroll horizontal */
body {
  overflow-x: hidden;
}

/* DISCOGRAFIA FINAL*/
/* GALERIA INICIO*/
.main-galeria {
  background-image: url(../multimedia/consola-2.jpeg);
  background-size: cover;
  background-position: center;
  color: white;
  background-color: black;
}

.div-galeria {
  font-family: "Mukta", sans-serif;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 0 5px black;
  font-size: 35px;
  border: 3px solid black;
}
.div-galeria h1 {
  margin: 10px;
  padding: 5px;
  font-family: "Mukta", sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 5px #C287E8;
  font-size: 32px;
  background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 180px);
  grid-template-areas: "img1 img2 img3 img3" "img1 img2 img5 img6" "img1 img4 img5 img8" "img7 img4 img5 img8" "img7 img4 img5 img8";
  grid-gap: 5px;
  padding: 10px;
}

.item {
  border: 3px solid #020000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 6px;
}

.item:hover {
  transition: all 0, 7;
  transform: scale(1.01);
}

.item1 {
  grid-area: img1;
  background-image: url(../multimedia/dark1.JPG);
  justify-items: right;
}

.item2 {
  grid-area: img2;
  background-image: url(../multimedia/vestidoazulinvertido.JPG);
}

.item3 {
  grid-area: img3;
  background-image: url(../multimedia/puravidahd.JPG);
}

.item4 {
  grid-area: img4;
  background-image: url(../multimedia/guitarra1.JPG);
}

.item5 {
  grid-area: img5;
  background-image: url(../multimedia/outfitnegro1.JPG);
  background-position: top;
}

.item6 {
  grid-area: img6;
  background-image: url(../multimedia/negro2daptado.png);
}

.item7 {
  grid-area: img7;
  background-image: url(../multimedia/love1.JPG);
}

.item8 {
  grid-area: img8;
  background-image: url(../multimedia/techno1.JPG);
  background-position: top;
}

/* GALERIA FINAL */
/* CONTACTO INICIO*/
.main-contacto {
  background-image: url(../multimedia/gente-fiesta-1.jpg);
}

.jumbotron-contacto {
  background-image: url(../multimedia/gente-fiesta-1.jpg);
}

.form-container {
  border: 4px solid rgb(255, 255, 255);
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.form-label {
  color: white;
  font-weight: bold;
}

.parrafoContacto {
  font-family: "Mukta", sans-serif;
  font-size: 20px;
  text-align: center;
}

/* CONTACTO FINAL*/
/* HEADER INICIO*/
header {
  background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
  text-align: center;
  padding-bottom: 1px;
}

.titulo-principal {
  font-family: "Orbitron", sans-serif;
  padding-top: 5px;
  padding-bottom: 20px;
  font-size: 40px;
  text-decoration: underline;
  color: #000000;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.38);
}

.navegador {
  font-family: "Orbitron", sans-serif;
  color: rgb(255, 255, 255);
  font-size: 20px;
  margin-right: 25px;
  margin-left: 25px;
  font-weight: bold;
}

nav ul li {
  display: inline-block;
  list-style-type: none; /* sacar decoracion de listas */
  margin-bottom: 20px;
  margin-top: 10px;
}

a {
  color: black;
  text-decoration: none;
}

header a:hover {
  color: black;
}

/* HEADER FINAL*/
/* BOTON SUBIR / */
.subir {
  height: 30px;
  width: 30px;
  background-color: black;
  color: white;
  position: fixed;
  right: 30px;
  bottom: 60px;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  border-radius: 70%;
  box-shadow: 0 0 3px 2px white;
}

/* / BOTON SUBIR */
/* FOOTER INICIO*/
footer {
  background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 15px;
  bottom: 0;
  width: 100%;
}

footer a {
  color: rgb(255, 250, 250);
  text-decoration: none;
  font-size: 30px;
}

footer a:hover {
  color: white;
}

footer i {
  letter-spacing: 25px;
  color: rgb(255, 255, 255);
  text-shadow: 0 0 5px black;
}

.parrafo-footer {
  padding-bottom: 1px;
  font-size: 17px;
  font-family: "Mukta", sans-serif;
}

.mis-redes {
  font-size: 15px;
  text-decoration: underline;
}

/* FOOTER FINAL*/
/* MEDIA QUERIES */
@media (min-width: 320px) and (max-width: 344px) {
  footer {
    padding: 8px;
  }
  .parrafo-footer {
    font-size: 12px;
    padding: 0 2px;
    word-break: break-word;
  }
  .mis-redes {
    font-size: 12px;
  }
  .redes-footer a {
    font-size: 20px;
    margin: 0 4px;
  }
  footer i {
    letter-spacing: 10px;
    font-size: 18px;
  }
}
@media (max-width: 320px) {
  .h1-trayectoria {
    font-size: 30px;
  }
  .navbar-pc {
    display: none;
  }
  .p-trayectoria {
    font-size: 15px;
  }
  .parrafo-footer {
    font-size: 14px;
  }
  .nleft {
    height: 400px;
  }
  .nleft2 {
    height: 400px;
  }
  .nright {
    height: 400px;
  }
  .nright2 {
    height: 400px;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  .home-pc {
    display: none;
  }
  .home-mobile .img-home {
    display: none;
  }
  .h1-home {
    text-align: center;
  }
}
@media (max-width: 360px) {
  a.titulo-navbar {
    font-size: 15px;
  }
  .p-trayectoria {
    font-size: 15px;
  }
  .parrafo-footer {
    font-size: 14px;
  }
}
@media (max-width: 375px) {
  a.titulo-navbar {
    font-size: 15px;
  }
  .p-trayectoria {
    font-size: 15px;
  }
  .parrafo-footer {
    font-size: 15px;
  }
  .mis-redes {
    font-size: 14px;
  }
}
@media (max-width: 390px) and (min-width: 390px) {
  .p-trayectoria {
    font-size: 15px;
  }
  .parrafo-footer {
    font-size: 15px;
  }
}
@media (min-width: 420px) and (max-width: 600px) {
  .nleft2 {
    height: 700px;
  }
}
@media (min-width: 480px) {
  .home-mobile {
    display: none;
  }
}
@media (max-width: 480px) {
  .galeria {
    background-color: black;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 180px);
    grid-template-areas: "img1 img2" "img1 img3" "img4 img3" "img4 img5" "img8 img5" "img8 img7" "img8 img7" "img6 img7";
    grid-gap: 5px;
    padding: 10px;
  }
  .h2-galeria {
    font-family: "Orbitron", sans-serif;
    text-align: center;
    background-color: #C287E8;
    color: #ffffff;
    text-shadow: 0 0 5px black;
    font-size: 22px;
    border: 3px solid black;
    margin: 10px;
    padding: 5px;
    text-decoration: underline;
  }
  .navbar-pc {
    display: none;
  }
  .navbar-mobile {
    background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
    padding-bottom: 1px;
    border: solid;
  }
  .titulo-navbar {
    font-family: "Orbitron", sans-serif;
    padding-top: 5px;
    padding-bottom: 20px;
    font-size: 18px;
    text-decoration: underline;
    color: #fffefe !important;
    font-weight: bold;
    text-shadow: 0 0 5px black;
  }
  .nav-a {
    color: rgb(250, 245, 245) !important;
    text-decoration: none;
    font-size: 16px;
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    text-shadow: 0 0 5px black;
  }
  .fa-color {
    color: white;
  }
}
@media (min-width: 480px) {
  .navbar-mobile {
    display: none;
  }
}
@media (min-width: 540px) and (max-width: 740px) {
  .p-tt {
    padding-top: 40px;
  }
  .img-home {
    background-image: url(../multimedia/dark1recort540.jpg);
  }
  .navegador {
    font-family: "Orbitron", sans-serif;
    color: rgb(0, 0, 0);
    font-size: 12px;
    margin-right: 10px;
    margin-left: 10px;
    background-color: #C287E8;
    font-weight: bold;
  }
  .titulo-principal {
    font-family: "Orbitron", sans-serif;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 28px;
    text-decoration: underline;
    color: #000000;
  }
  .parrafo-footer {
    font-size: 18px;
  }
  .mis-redes {
    font-size: 16px;
  }
}
@media (min-width: 660px) and (max-width: 700px) {
  .img-home {
    background-image: url(../multimedia/dark1recortceluacostado.jpg);
  }
}
@media (min-width: 650px) and (max-width: 820px) {
  .p-trayectoria {
    padding-left: 60px;
    padding-right: 60px;
  }
  /* .nleft2{
      background-size: cover;
      background-position: center;
      height: 850px;
      border: 5px solid #000000;
      border-radius: 10px;
      margin-bottom: 10px;
  } */
}
@media (max-width: 900px) and (min-width: 480px) {
  .navegador {
    margin: 10px;
  }
}
@media (max-width: 1024px) and (min-width: 700px) {
  .h1-trayectoria {
    font-size: 28px;
  }
  .p-trayectoria {
    font-size: 16px;
  }
}
@media (max-width: 599px) {
  .container-tablet {
    display: none;
  }
}
@media (min-width: 600px) {
  .container-mobile {
    display: none;
  }
}
@media (max-width: 992px) {
  .container-pc {
    display: none;
  }
}
@media (min-width: 993px) {
  .container-tablet {
    display: none;
  }
}
/* MEDIA QUERRIE TRAYECTORIA PC */
@media (min-width: 768px) and (max-width: 1024px) {
  .img-home {
    background-image: url(../multimedia/dark1recorttablet.jpg);
    background-size: cover;
    background-position: center;
    height: 650px;
    border: 5px solid #000000;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .img-home2 {
    background-position: top;
    background-image: url(../multimedia/guitarra1recorte1024.jpg);
  }
  .h1-home {
    font-size: 45px;
  }
  .p-home {
    padding: 0px;
    font-size: 14px;
  }
}
@media (min-width: 1024px) and (max-width: 1920px) {
  .nright {
    height: 750px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .nleft {
    height: 750px;
    margin-top: 20px;
  }
  .nleft2 {
    height: 700px;
    margin-top: 20px;
    margin-left: 0px;
    margin-bottom: 20px;
  }
  .nright2 {
    height: 700px;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 20px;
  }
  .p-tpc {
    font-size: 16px;
    padding: 30px;
    padding-top: 40px;
  }
  .h1-trayectoria {
    font-size: 30px;
    padding-top: 20px;
  }
  .h2-trayectoria {
    font-size: 25px;
    padding-top: 33px;
    padding-bottom: 20px;
    text-align: center;
    font-family: "Work Sans", sans-serif;
    color: white;
    text-shadow: 0 0 5px #C287E8;
  }
}
@media (min-width: 1024px) and (max-width: 1366px) {
  .img-home {
    background-image: url(../multimedia/dark1recort1366.jpg);
  }
  .h1-home {
    font-size: 45px;
  }
  .nright {
    height: 550px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .nleft {
    height: 550px;
    margin-top: 20px;
  }
  .p-trayectoria {
    font-size: 15px;
    margin: 1px;
    margin-bottom: 1px;
  }
  .p-trayectoria2 {
    font-size: 15px;
    margin-bottom: 1px;
    margin-top: 10px;
  }
  .p-home {
    font-family: "Work Sans", sans-serif;
    font-size: 15px;
    text-align: center;
    padding: 1px;
  }
}
@media (min-width: 1280px) and (max-width: 1280px) {
  .h1-home {
    font-size: 100px;
  }
  .img-home {
    margin-bottom: 45px;
  }
  .img-home2 {
    margin-bottom: 45px;
  }
  .p-home {
    padding: 4px;
    font-size: 16px;
  }
  .p-home2 {
    padding: 0px;
    font-size: 15px;
  }
  .p-home3 {
    font-size: 16px;
  }
  .h1-home {
    font-size: 30px;
    padding: 10px;
  }
  .h2-home {
    padding: 5px;
    padding-top: 15px;
    font-size: 20px;
  }
  h3.home {
    font-size: 15px;
  }
  .link-trayectoria {
    background-color: #C287E8;
    font-family: "Work Sans", sans-serif;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
    margin-left: 15px;
    text-shadow: 0 0 5px rgb(1, 0, 2);
  }
  .p-trayectoria {
    font-size: 16px;
    margin: 1px;
    margin-bottom: 1px;
  }
  .p-trayectoria2 {
    font-size: 16px;
    margin-bottom: 1px;
    margin-top: 10px;
  }
}
@media (min-width: 1366px) and (max-width: 1366px) {
  .p-home {
    padding: 3px;
    font-size: 17px;
  }
  .h1-home {
    font-size: 55px;
  }
  .p-trayectoria {
    font-size: 17px;
    margin: 1px;
    margin-bottom: 1px;
  }
  .p-trayectoria2 {
    font-size: 17px;
    margin-bottom: 1px;
    margin-top: 10px;
  }
}
@media (min-width: 1920px) and (max-width: 1920px) {
  .h1-home {
    font-size: 80px;
  }
  .p-home {
    font-size: 18px;
    padding: 18px;
  }
  .p-home2 {
    font-size: 16px;
    padding: 4px;
  }
  .link-trayectoria {
    background-color: #C287E8;
    font-family: "Work Sans", sans-serif;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
    margin-left: 15px;
    text-shadow: 0 0 5px rgb(1, 0, 2);
  }
  .jumbotron {
    height: 1000px;
  }
  .h1-trayectoria {
    font-size: 38px;
  }
  .p-trayectoria {
    font-size: 18px;
    margin: 25px;
    margin-bottom: 100px;
  }
  .p-trayectoria2 {
    font-size: 18px;
    margin-bottom: 18px;
    margin-top: 30px;
  }
  .nright2 {
    height: 750px;
  }
  .nleft2 {
    height: 750px;
  }
}

.navbar-toggler {
  border: 2px solid #fff !important;
}

.navbar-toggler .fa-bars,
.navbar-toggler .fa-sharp {
  color: #fff;
}