@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Amita:wght@400;700&family=Dancing+Script:wght@400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Tiny5&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Climate+Crisis&display=swap');
// <uniquifier>: Use a unique and descriptive class name

.climate-crisis-<uniquifier> {
  font-family: "Climate Crisis", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "YEAR" 1979;
}

@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');
.ultra-regular {
  font-family: "Ultra", serif;
  font-weight: 400;
  font-style: normal;
}


.prompt-thin {
  font-family: "Prompt", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.prompt-extralight {
  font-family: "Prompt", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.prompt-light {
  font-family: "Prompt", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.prompt-regular {
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.prompt-medium {
  font-family: "Prompt", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.prompt-semibold {
  font-family: "Prompt", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.prompt-bold {
  font-family: "Prompt", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.prompt-extrabold {
  font-family: "Prompt", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.prompt-black {
  font-family: "Prompt", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.prompt-thin-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.prompt-extralight-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.prompt-light-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.prompt-regular-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.prompt-medium-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.prompt-semibold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.prompt-bold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.prompt-extrabold-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.prompt-black-italic {
  font-family: "Prompt", sans-serif;
  font-weight: 900;
  font-style: italic;
}


.archivo-black-regular {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
}


Amita: CSS classes
.amita-regular {
  font-family: "Amita", serif;
  font-weight: 400;
  font-style: normal;
}

.amita-bold {
  font-family: "Amita", serif;
  font-weight: 700;
  font-style: normal;
}

Alfa Slab One: CSS class
.alfa-slab-one-regular {
  font-family: "Alfa Slab One", serif;
  font-weight: 400;
  font-style: normal;
}

Quicksand: CSS class for a variable style
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 700

.quicksand-<uniquifier> {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

Dancing Script: CSS class for a variable style
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 700

.dancing-script-<uniquifier> {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

Tiny5: CSS class
.tiny5-regular {
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  font-style: normal;
}

Poppins: CSS classes
.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

Montserrat: CSS class for a variable style
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

Raleway: CSS class for a variable style
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.raleway-<uniquifier> {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.navbar {
    font-family: "Poppins", sans-serif;
    font-size: 1.3em;
    font-weight: 600;
}
.dropdown-item {
    font-weight: 300;
    color: rgb(99, 99, 99);
}
.fa-brands, .fab {
    font-weight: 400;
    color: rgb(120, 120, 120);
}
.fa-brands:hover,.fab:hover {
    color: rgb(255, 204, 0);
}
a {
    text-decoration: none;
}
.header {
    background-image: url(../img/movieTheWall.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 900px;
    height: 100vh;
    font-family: "Montserrat", sans-serif;
    color: rgb(255, 255, 255);
    display: grid;
    place-content: center;
    text-align: right;
    background-color: rgb(22, 22, 22);
}
.footpata {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: rgb(145, 147, 119);
  background-color: rgb(49, 49, 49);
}
.mapaoscuro {
  filter: invert(100%);
}

/*header 3d*/
@media (orientation: landscape) {
  main {
      scale: 0.9
  }
}
@keyframes move {
  0% {
      transform: rotateY(-20deg) rotateX(-5deg);
  }
  25% {
      transform: rotateY(20deg) rotateX(-5deg);
  }
  50% {
      transform: rotateY(20deg) rotateX(5deg);
  }
  75% {
      transform: rotateY(-20deg) rotateX(5deg);
  }
  100% {
      transform: rotateY(-20deg) rotateX(-5deg);
  }
}
.super {
  background-color: rgb(0, 0, 0);
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  perspective: 1000px;
}
#fondoescritorio {
  aspect-ratio: 24/18;
  background: center / cover no-repeat url('../img/movieTheWall2.svg');
  width: 100%;
  max-width: 90vmin;
  position: relative;
  animation: move 10s 0s infinite;
  transform-style: preserve-3d;
  border-radius: 0vmin;
}
#linda {
  position: absolute;
  top: 60%;
  left: 0;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  transform: translateZ(10vmin);
  transform-style: preserve-3d;
}
#bellaprincesa {
  font-family: 'Tiny5', sans-serif;
  font-weight: 900;
  font-size: 16vmin;
  position: absolute;
  margin: 0;
  line-height: 1em;
  white-space: nowrap;
  background-image: url('../img/pajarracosacuatizando.jpg');
  background-size: cover;
  background-position: center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
#bellaprincesa::before {
  content: attr(data-title);
  position: absolute;
  color: #f29e032c;
  -webkit-text-fill-color: initial;
  mix-blend-mode: overlay;
  opacity: 1;
  text-shadow: 0px 0px 4vmin rgba(0,0,0,0.4), 1px 1px #bf4528;
}
#PHD {
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 50%;
  height: auto;
  transform: translateZ(30vmin);
  transform-style: preserve-3d;
  filter: drop-shadow(0px 0px 40px rgba(0,0,0,0.4));
  border-radius: 0vmin;
}

#nestr {
  font-family: 'Poppins', sans-serif;
  font-size: 2.6vmin;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0px 0px 3vmin rgba(0,0,0,0.7);
  position: absolute;
  top: 5%;
  left: 6%;
  transform: translateZ(5vmin);
  transform-style: preserve-3d;
  margin: 0;
}
#eleazz {
  font-family: 'Poppins', sans-serif;
  font-size: 2.6vmin;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0px 0px 3vmin rgba(0,0,0,0.7);
  position: absolute;
  top: 5%;
  right: 6%;
  transform: translateZ(5vmin);
  transform-style: preserve-3d;
  margin: 0;
}
#jefa {
  font-family: 'Poppins', sans-serif;
  font-size: 1.6vmin;
  text-transform: uppercase;
  text-align: center;
  color: white;
  letter-spacing: 0.3em;
  width: 100%;
  position: absolute;
  top: 29%;
  left: 0%;
  transform: translateZ(5vmin);
  transform-style: preserve-3d;
  margin: 0;
}
#mamol strong {
  font-family: 'Montserrat', sans-serif;
}
#mamol {
  display: flex;
  justify-content: space-between;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 5vmin;
  line-height: 1em;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: absolute;
  top: 48%;
  left: 0%;
  width: 100%;
  margin: 0;
  transform: translateZ(10vmin);
  /* transform-style: preserve-3d; */
  /* text-shadow: 0px 0px 4vmin rgba(0,0,0,0.4); */
}
#mamol > span {
  display: flex;
  background-image: url('../img/pajarracosvolando.jpg');
  background-size: cover;
  background-position: center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
#mamol > span::before {
  content: attr(data-title);
  position: absolute;
  color: #bae7e5af;
  -webkit-text-fill-color: initial;
  mix-blend-mode: overlay;
  opacity: 1;
  text-shadow: 0px 0px 4vmin rgba(0,0,0,0.4), 1px 1px #bf4528;
}
/*header 3d*/
.queen {
  background-color: rgb(22, 22, 22);
  background-image: url(../img/queendancing.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 900px;
  height: 100vh;
  font-family: "Montserrat", sans-serif;
  color: rgb(255, 255, 255);
  display: grid;
  place-content: center;
}
#dancing {
  aspect-ratio: 40/38;
  background: center / cover no-repeat url('../img/queendancing2.svg');
  width: 100%;
  max-width: 90vmin;
  position: relative;
  animation: move 10s 0s infinite;
  transform-style: preserve-3d;
  border-radius: 0vmin;
}
.innuendo {
  background-color: rgb(0, 0, 0);
  height: 100%;
}
#PHDdos {
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 50%;
  height: auto;
  transform: translateZ(30vmin);
  transform-style: preserve-3d;
  filter: drop-shadow(0px 0px 40px rgba(0,0,0,0.4));
  border-radius: 0vmin;
}
.contact {
  height: 100vh;
  background-color: rgb(43, 42, 38);
  background-image: url(../img/freddiemercury.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.cont {
  font-family: 'Montserrat', sans-serif;
  color: rgb(255, 255, 255);
  height: 100vh;
  display: grid;
  place-content: center;
  justify-content: end;
  text-align: right;
}
.llamar {
  background-color: rgb(29, 29, 29);
  height: 100vh;
}
.contactame {
  font-family: "Poppins", sans-serif;
  color: #7c806e;
  height: 100vh;
  display: grid;
  place-content: center;
  justify-content: end;
  text-align: right;
  font-weight: 600;
}
.videosh {
  min-height: 900px;
  background-color: rgb(29, 29, 29);
  height: 100vh;
  display: grid;
  place-content: center;
  text-align: right;
  color: rgb(255, 255, 255);
}
.sabbath {
  background-color: rgb(89, 84, 65);
}
.soebip {
  padding-top: 15%;
  padding-bottom: 15%;
  display: grid;
  place-content: end;
  color: rgb(255, 255, 255);
}