/* Define la fuente */
@font-face {
  font-family: "Exposure";
  src: url("fonts/Plush/Plush-Trial-Bold.otf");
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto/RobotoFlex-VariableFont.ttf");
}
body {
  width: 100vw;
  height: 10vh;
  overflow: hidden;
  background: linear-gradient(45deg, #0181f1, #6969ff);
  background-image: url("img/dotnoise-light-grey.png");
  background-color: #c3beea;
  text-align: center;
  line-height: 90%;
  font-variation-settings: "wght" 900, "ital" 1;
  font-family: "Exposure";
  color: #ffffff;
  white-space: nowrap;
  font-size: 10vh;
}

.content-container {
  position: absolute;
  top: 50%;
  left: 40%;
  /*transform: translate(-50%, -50%);*/
}

p {
  font-size: 2vh;
  font-weight: lighter;
  font-family: sans-serif;
  z-index: 100;
}

.text-line {
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-line:nth-child(1) span:nth-child(1) {
  animation-delay: 0.3s;
}
.text-line:nth-child(1) span:nth-child(2) {
  animation-delay: 0.4s;
}
.text-line:nth-child(1) span:nth-child(3) {
  animation-delay: 0.5s;
}
.text-line:nth-child(1) span:nth-child(4) {
  animation-delay: 0.6s;
}
.text-line:nth-child(1) span:nth-child(5) {
  animation-delay: 0.7s;
}
.text-line:nth-child(1) span:nth-child(6) {
  animation-delay: 0.8s;
}
.text-line:nth-child(2) span:nth-child(1) {
  animation-delay: 0.5s;
}
.text-line:nth-child(2) span:nth-child(2) {
  animation-delay: 0.6s;
}
.text-line:nth-child(2) span:nth-child(3) {
  animation-delay: 0.7s;
}
.text-line:nth-child(2) span:nth-child(4) {
  animation-delay: 0.8s;
}
.text-line:nth-child(2) span:nth-child(5) {
  animation-delay: 0.9s;
}
.text-line:nth-child(2) span:nth-child(6) {
  animation-delay: 1s;
}
.text-line:nth-child(3) span:nth-child(1) {
  animation-delay: 0.7s;
}
.text-line:nth-child(3) span:nth-child(2) {
  animation-delay: 0.8s;
}
.text-line:nth-child(3) span:nth-child(3) {
  animation-delay: 0.9s;
}
.text-line:nth-child(3) span:nth-child(4) {
  animation-delay: 1s;
}
.text-line:nth-child(3) span:nth-child(5) {
  animation-delay: 1.1s;
}
.text-line:nth-child(3) span:nth-child(6) {
  animation-delay: 1.2s;
}
.text-line:nth-child(4) span:nth-child(1) {
  animation-delay: 0.9s;
}
.text-line:nth-child(4) span:nth-child(2) {
  animation-delay: 1s;
}
.text-line:nth-child(4) span:nth-child(3) {
  animation-delay: 1.1s;
}
.text-line:nth-child(4) span:nth-child(4) {
  animation-delay: 1.2s;
}
.text-line:nth-child(4) span:nth-child(5) {
  animation-delay: 1.3s;
}
.text-line:nth-child(4) span:nth-child(6) {
  animation-delay: 1.4s;
}

div span {
  z-index: 10;
  display: inline-block;
  /*animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-name: change;
  transition-timing-function: ease-in-out;*/
}

@keyframes change {
  0%, 100% {
    font-variation-settings: "wght" 900, "ital" 1;
  }
  50% {
    font-variation-settings: "wght" 100, "ital" 0;
  }
}
/* BACKGROUND */
:root {
  --color: #ff0000;
  --blur-1-size: clamp(600px, 60vw, 60vw);
  --blur-2-size: clamp(400px, 40vw, 40vw);
  --blur-3-size: clamp(200px, 10vw, 10vw);
  --blur-amount: clamp(40px, 5vw, 90px);
}

@media only screen and (min-width: 768px) {
  :root {
    --blur-1-size: clamp(1200px, 90vw, 80vw);
    --blur-2-size: clamp(700px, 50vw, 50vw);
    --blur-3-size: clamp(350px, 20vw, 20vw);
    --blur-amount: clamp(50px, 20vw, 90px);
  }
}
.blur {
  position: absolute;
  z-index: 1;
  border-radius: 900px;
  filter: blur(var(--blur-amount));
}

/*.blur:nth-child(1){
  filter: blur(var(--blur-amount)); 
  height: var(--blur-1-size);
  width: calc(var(--blur-1-size) * 2);
  top: 2vh;
  right: 5vh;
    background: radial-gradient(circle, rgba(252,70,107,1) 0%, rgba(63,94,251,1) 100%);
	//background: #E73D25;
	opacity: 1.0;
}*/
/*.blur:nth-child(2){
  filter: blur(var(--blur-amount));
  height: var(--blur-1-size);
  width: calc(var(--blur-1-size) * 0.75);
  top: 10vh;
  right: 5vh;
	background: #CD0B59;
	opacity: 0.6;
}*/
.blur:nth-child(3) {
  filter: blur(var(--blur-amount));
  height: var(--blur-1-size);
  width: calc(var(--blur-2-size) * 2);
  bottom: 20vh;
  left: 20vw;
  background: var(--color);
  opacity: 1;
}

.blur:nth-child(4) {
  filter: blur(var(--blur-amount));
  height: var(--blur-1-size);
  width: calc(var(--blur-1-size) * 1.8);
  top: 10vh;
  right: 5vh;
  background: radial-gradient(circle, rgb(255, 188, 0) 0%, rgb(231, 61, 37) 51%, rgb(205, 11, 89) 88%);
  opacity: 1;
}

.blur:nth-child(5) {
  filter: blur(var(--blur-amount));
  height: var(--blur-1-size);
  width: calc(var(--blur-1-size) * 2);
  top: 2vh;
  right: 5vh;
  background: radial-gradient(circle, rgb(252, 70, 107) 0%, rgb(63, 94, 251) 100%);
  opacity: 1;
}

.blur:nth-child(6) {
  filter: blur(var(--blur-amount));
  height: var(--blur-1-size);
  width: calc(var(--blur-1-size) * 0.75);
  top: 10vh;
  right: 5vh;
  background: #CD0B59;
  opacity: 0.6;
}

/*section {
  padding: 5vw;
  height: 100vh;
  background: linear-gradient(45deg,#0181f1,#6969ff);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}*/

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