body {
  font-family: Arial, sans-serif;
  height: 100vh;
  background-image: url(../images/background.png);
  background-size: cover;
  background-repeat: no-repeat;
}

h1 {
  font-size: 48px;
  margin-bottom: 50px;
}

.boton-container {
  backdrop-filter: blur(10px);
  padding: 80px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.boton-container .boton:first-child {
  background-color: #4a90e2;
  border-color: #003366;
  width: 200px;
}

.boton-container .boton:last-child {
  background-color: #ff4081;
  border-color: #800080;
  width: 200px;
}

.boton {
  height: 60px;
  font-size: 24px;
  cursor: pointer;
  position: relative;
}

#login {
  width: 120px;
  position: absolute;
  cursor: pointer;
  color: white;
  border-radius: 10px;
  background-color: transparent;
  backdrop-filter: blur(20px);
  right: 15px;
  top: 15px;
}

.container {
  height: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 100px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  z-index: 100;
}

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
  transition: 0.5s;
}

.header:hover::before {
  left: 100%;
}

.logo {
  color: white;
  font-size: 25px;
  text-decoration: none;
  font-weight: 600;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 20px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: white;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  font-size: clamp(1rem, 2vw, 1.5rem);
  flex-wrap: wrap;
}

.logo-footer {
  min-width: 75px;
  min-height: 50px;
  max-width: 10vw;
  max-height: 10vh;
  object-fit: cover;
}

#welcome {
  font-size: 20px;
  color: white;
}

.navbar a {
  color: white;
  font-size: 18px;
  text-decoration: none;
  margin-left: 45px;
  transition: 0.3s;
}

a:hover {
  color: black;
}

#menu-icon {
  font-size: 36px;
  color: #fff;
  display: none;
}

/* CSS DEL BOTON SYNTHWAVE */

:root {
  --main-color: #ffffff;
  --gradient-color-2: #fe53bb;
  --gradient-color-3: #8f51ea;
  --text-glow-color: #ff1372;
}

.containerSynth {
  all: unset;
  height: 4rem;
  width: 16rem;
  position: relative;
  border-radius: 20px;
  border: double 3px transparent;
  transition: 50ms;

  strong {
    text-shadow: 1px 1px 10px #fff;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  background-image: linear-gradient(#751bb1, #3893dd),
  linear-gradient(0, #d152f8 0%, #fe53bb 25%, #d152f8 87%);
  background-origin: border-box;
  background-clip: content-box,
  border-box;
  cursor: pointer;
}

.containerSynth:hover>strong {
  transition: 300ms;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: brightness(1.75);
  text-shadow: 2px 0 20px #fff;
}

.inner-containerSynth {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 18px;
}

.containerSynth strong, strong::before {
  transition: 300ms;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: absolute;
  font-size: 2rem;
  letter-spacing: 5px;
  z-index: 2;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 1px 1px 20px rgb(54, 23, 66),
    -1px -1px 15px rgb(54, 23, 66);
  background-image: linear-gradient(0deg,
      rgba(255, 142, 224, 1) 0%,
      rgba(255, 29, 193, 1) 5%,
      rgba(198, 72, 255, 1) 30%,
      rgba(0, 0, 0, 1) 49%,
      rgba(255, 255, 255, 1) 52%,
      rgba(70, 148, 255, 1) 60%,
      rgba(21, 59, 112, 1) 69%);
}

.containerSynth strong::before {
  text-shadow: -6px -6px 6px var(--text-glow-color);
}

#glow {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 10rem;
  max-height: 4rem;
}

.circle {
  width: 100%;
  height: 100%;
  filter: blur(1.2rem);
  animation: pulse 2s infinite alternate;
  z-index: -1;
}

.circle:nth-of-type(1) {
  background: linear-gradient(0, #ffdb3b 0%, #fe53bb 30%, #8f51ea 80%);
}

.fade {
  position: absolute;
  width: 100%;
  min-height: 10rem;
  top: -3rem;
  height: 10rem;
  background-image: linear-gradient(to top,
      rgba(255, 31, 184, 0.36) 35%,
      rgba(127, 48, 216, 0.36) 50%,
      rgba(89, 194, 243, 0.84) 80%);
  z-index: 1;
}

.up-text {
  display: flex;
  justify-content: center;
  position: relative;
  height: 800px;
  font-weight: 600;
  letter-spacing: 6px;
  perspective: 400px;
  text-align: justify;
}

.crawl {
  display: grid;
  grid-template-columns: repeat(6, auto);
  position: relative;
  animation: crawl 20s linear infinite alternate;
}

.inner-containerSynth .grid-item {
  width: 60px;
  height: 100%;
  border: 1px solid #f96bcc;
  box-shadow: 0 0 10px 4px #ff1fb8;
}

@keyframes crawl {
  0% {
    top: -200px;
    transform: rotateX(30deg) translateZ(40px);
  }

  100% {
    top: -510px;
    transform: rotateX(25deg) translateZ(0px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
  }
}