/* styles.css */

body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #00CC66; /* Fondo verde claro */
	color: #E2F0D9; /* Color de texto blanco suave */
    overflow: hidden; /* Ocultar las barras de desplazamiento */

	user-select: none; /* Desactivar la selección de texto en toda la página */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
  }
  
  .welcome-message {
    text-align: center;
    width: 100%;
    height: 33vh; /* 33% de la altura de la pantalla */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #00CC66;  }
  
  .welcome-message h1 {
	font-size: 3em;
	color: #E2F0D9; /* Color de texto blanco suave */
  }
  
  .welcome-message p {
	font-size: 1.2em;
	color: #E2F0D9; /* Color de texto blanco suave */
  }

.rectangulo-section {
    width: 100%;
    height: 33vh; /* 33% de la altura de la pantalla */
    position: relative;
}

.rectangulo {
	position: absolute;
	width: 60px;
	height: 30px;
	background-color: #E2F0D9; /* Color de fondo blanco suave */
	border-radius: 15px; /* Bordes redondeados */
	transition: background-color 0.15s, border-color 0.1s; /* Transiciones suaves */
}

/* Oscurecer ligeramente al pasar el ratón por encima */
.rectangulo:hover {
    background-color: #00A347; /* Tono verde oscuro */
}

/* Volver transparente al hacer clic */
.rectangulo:active {
    background-color: #00A347; /* Tono verde oscuro */
    border: 2px solid #E2F0D9; /* Contorno del mismo color */
}

.rectangulo.tocado {
    background-color: #00A347; /* Tono verde oscuro */
    border: 2px solid #E2F0D9; /* Contorno del mismo color */
}