style.css

body {
             background-repeat: no-repeat;
            background-size: cover;
            color: #ff0000;
            font-family: 'Courier New', monospace;
            text-align: center;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
 button {
            /* Estilo base del botón */
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: none;
            font-weight: bold;
            cursor: pointer;
            border-radius: 5px;
            outline: none;
        
        }

        /* Estilo del botón cuando no se está presionando */
        button:hover {
           background-color: rgba(0, 0, 0, 0.1);
           border: 1px solid #ffffff;
           color:#ffffff;
        }

        /* Estilo del botón cuando se está presionando */
        button:active {
            transform: translateY(3px);
            background-color: #cc0000;
        }
.wrapper {
          
            height: auto;
            width: 300px;
            padding: 20px; 
            border-radius: 15px;
           background-color: rgba(26, 26, 26, 0.8);
      box-shadow: 0 0px 10px rgba(0, 0, 0, 0.9);

        }
#screenshotCanvas {
            display: none;
        }

        #loading {
            display: none;
            font-size: 18px;
        }

        #videoContainer {
            width: 300px;
            height: 200px;
            background-color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }

        #screenshotVideo {
            width: 100%;
            height: 100%;
        }
 #startRecording {
            display: inline-block;
        }

        #stopRecording {
            display: none;
        }

        #downloadLink {
            display: none;
            margin-top: 10px;
            color: #ff6600;
            text-decoration: none;
            border: 1px solid #ff6600;
            padding: 5px 10px;
        }

        #downloadLink:hover {
            background-color: #ff6600;
            color: #000;
        }

      .social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.social-icons a {
  display: inline-block;
  margin: 0 10px;
}

.social-icons img {
  width: 40px; /* Ajusta el ancho según el tamaño de tus íconos */
  height: 40px; /* Ajusta la altura según el tamaño de tus íconos */
  border-radius: 50%; /* Hace que los íconos sean circulares */
  border: 2px solid #333; /* Borde de 2px sólido de color gris oscuro (#333) */
  padding: 5px; /* Opcional: agrega un poco de espacio alrededor de los íconos */
  box-sizing: border-box; /* Hace que el padding no afecte el tamaño total */
  transition: transform 0.3s ease-in-out; /* Animación al pasar el cursor */
}

.social-icons img:hover {
  transform: scale(1.1); /* Cambia el tamaño al pasar el cursor */
}
 h3{
        color:#ffffff;
      }
 .separator {
            width: 100%;
            height: 1px; /* Grosor del separador */
            background-color: #ffffff; /* Color del separador */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); 
            margin: 5px 0; /* Espacio alrededor del separador */
        }

.wrapper2::before {
  content: "";
  display: block;
  position: fixed;
  width: 300%;
  height: 100%;
  top: 50%;
  left: 50%;
  border-radius: 100%;
  transform: translateX(-50%) skewY(-8deg);
  background-color: black; /* Cambiar a azul celeste */
  z-index: -1;
  animation: wave 8s ease-in-out infinite alternate;
}

@keyframes wave {
  0% {
    transform: translateX(-50%) skewY(-8deg);
  }
  25% {
    transform: translateX(-50%) skewY(8deg);
  }
  50% {
    transform: translateX(-50%) skewY(-8deg);
  }
  75% {
    transform: translateX(-50%) skewY(8deg);
  }
  100% {
    transform: translateX(-50%) skewY(-8deg);
  }
}