*{
    box-sizing: border-box;
    margin: auto;
    padding: auto;
    text-align: center;
    position: relative;
  
}
body{
    background-image: url(./imge/back2.jpg) ;
   
}

#title{
   color: rgb(224, 162, 143);
   font-size: 2rem;
   margin-bottom: 5px;
}

#container{
    position: relative;
    top: 300px;
    border: 4px solid rgb(204, 190, 190);
    border-radius: 25px;
    width: 600px;
    height: 300px;
    background-color: rgba(224, 14, 14, 0.288);
    display: flex;
    flex-wrap: wrap;
    font-size: 1.5rem;
}

#control{
    border: 4px solid blue;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    
}

#text{
    /*border: 4px solid blue;*/
    width: 100%;
    height: auto;
    text-align: center;
    color: white;
    font-size: 1rem;
}

#form{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    
}

#label, #input{
    margin-bottom: 10px;
    color: rgb(236, 171, 171);
}
#input{
    color: black;
}

#reset{
    border: 2px solid white;
    border-radius: 20px;
    width: 100px;
    height: auto;
    color: white;
    background-color: rgb(190, 47, 47);
    padding: 5px;
    margin-top: 10px;
    font-size: 1rem;
    font-weight: bolder;
    cursor: pointer;
}


#button{
    border: 2px solid white;
    border-radius: 20px;
    width: 150px;
    height: auto;
    color: white;
    background-color: rgb(190, 47, 47);
    padding: 5px;
    font-size: 1rem;
    font-weight: bolder;
    cursor: pointer;
}

/*loader*/

#fountainTextG{
    position: relative;
    left: 10%;
	width:234px;
	margin:auto;
    display: none;
}

.fountainTextG{
	color:rgb(0,0,0);
	font-family:Arial;
	font-size:24px;
	text-decoration:none;
	font-weight:normal;
	font-style:normal;
	float:left;
	animation-name:bounce_fountainTextG;
		-o-animation-name:bounce_fountainTextG;
		-ms-animation-name:bounce_fountainTextG;
		-webkit-animation-name:bounce_fountainTextG;
		-moz-animation-name:bounce_fountainTextG;
	animation-duration:2.09s;
		-o-animation-duration:2.09s;
		-ms-animation-duration:2.09s;
		-webkit-animation-duration:2.09s;
		-moz-animation-duration:2.09s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
	transform:scale(.5);
		-o-transform:scale(.5);
		-ms-transform:scale(.5);
		-webkit-transform:scale(.5);
		-moz-transform:scale(.5);
}#fountainTextG_1{
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
}
#fountainTextG_2{
	animation-delay:0.9s;
		-o-animation-delay:0.9s;
		-ms-animation-delay:0.9s;
		-webkit-animation-delay:0.9s;
		-moz-animation-delay:0.9s;
}
#fountainTextG_3{
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
}
#fountainTextG_4{
	animation-delay:1.2s;
		-o-animation-delay:1.2s;
		-ms-animation-delay:1.2s;
		-webkit-animation-delay:1.2s;
		-moz-animation-delay:1.2s;
}
#fountainTextG_5{
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
}
#fountainTextG_6{
	animation-delay:1.5s;
		-o-animation-delay:1.5s;
		-ms-animation-delay:1.5s;
		-webkit-animation-delay:1.5s;
		-moz-animation-delay:1.5s;
}
#fountainTextG_7{
	animation-delay:1.64s;
		-o-animation-delay:1.64s;
		-ms-animation-delay:1.64s;
		-webkit-animation-delay:1.64s;
		-moz-animation-delay:1.64s;
}
#fountainTextG_8{
	animation-delay:1.79s;
		-o-animation-delay:1.79s;
		-ms-animation-delay:1.79s;
		-webkit-animation-delay:1.79s;
		-moz-animation-delay:1.79s;
}
#fountainTextG_9{
	animation-delay:1.94s;
		-o-animation-delay:1.94s;
		-ms-animation-delay:1.94s;
		-webkit-animation-delay:1.94s;
		-moz-animation-delay:1.94s;
}
#fountainTextG_10{
	animation-delay:2.09s;
		-o-animation-delay:2.09s;
		-ms-animation-delay:2.09s;
		-webkit-animation-delay:2.09s;
		-moz-animation-delay:2.09s;
}
#fountainTextG_11{
	animation-delay:2.24s;
		-o-animation-delay:2.24s;
		-ms-animation-delay:2.24s;
		-webkit-animation-delay:2.24s;
		-moz-animation-delay:2.24s;
}




@keyframes bounce_fountainTextG{
	0%{
		transform:scale(1);
		color:rgb(0,0,0);
	}

	100%{
		transform:scale(.5);
		color:rgb(255,255,255);
	}
}

@-o-keyframes bounce_fountainTextG{
	0%{
		-o-transform:scale(1);
		color:rgb(0,0,0);
	}

	100%{
		-o-transform:scale(.5);
		color:rgb(255,255,255);
	}
}

@-ms-keyframes bounce_fountainTextG{
	0%{
		-ms-transform:scale(1);
		color:rgb(0,0,0);
	}

	100%{
		-ms-transform:scale(.5);
		color:rgb(255,255,255);
	}
}

@-webkit-keyframes bounce_fountainTextG{
	0%{
		-webkit-transform:scale(1);
		color:rgb(0,0,0);
	}

	100%{
		-webkit-transform:scale(.5);
		color:rgb(255,255,255);
	}
}

@-moz-keyframes bounce_fountainTextG{
	0%{
		-moz-transform:scale(1);
		color:rgb(0,0,0);
	}

	100%{
		-moz-transform:scale(.5);
		color:rgb(255,255,255);
	}
}

/*end loader*/



#button:hover,
#reset:hover {
    color: black;
    border: 2px solid black;
    background-color: white;
}

@media (max-width: 768px) {
    #container {
        width: 90%; /* Ajusta el ancho para pantallas más pequeñas */
        height: auto; /* Permite que el contenedor se ajuste dinámicamente */
        top: 150px; /* Baja la posición del contenedor */
    }
    #text {
        font-size: 0.9rem; /* Reduce el tamaño de fuente */
    }
    #title{
        font-size: 1.5rem;
    }
    #button {
        width: 120px; /* Ajusta el tamaño del botón */
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    #container {
        width: 95%; /* Más ajuste en pantallas muy pequeñas */
        top: 100px;
    }
    #text {
        font-size: 0.8rem; /* Reduce aún más el tamaño de fuente */
    }
    #title{
        font-size: 1rem;
    }
    #button {
        width: 100px;
        font-size: 0.8rem;
    }
}