
.big_container {
	display: flex;
	min-width: 100vw; /* old browser */
    min-width: 100svw;
    min-height: 100vh;
    justify-content: center;
   	align-items: flex-start;
    color: #ffffff;
   	
   	background-image: url("../img/oscura_2.png");
    background-size: cover;
    background-attachment: fixed;
  	background-position: center center;
  	background-repeat: no-repeat;
  	background-color: #303030;
}
.container {
	display: flex;
	width: 80%;
	max-width: 540px;
	flex-wrap: wrap;
	justify-content: center;
}

/* publicidad */ 

.publi_izq, .publi_der {
	display: flex;
	flex-grow: 1;
	justify-content: center;
}
.anuncio_izq, .anuncio_der {
	display: none;  /* display: flex; */
	width: 125px;
	flex-grow: 1;
	justify-content: center;
	text-align: center;
	padding: 2rem;
}

/* trasera */

.trasera {
	display: flex;
	flex-direction: column;
	width: 80%;
	align-items: center;
	backdrop-filter: blur(10px);
  	background-color: rgba(232, 212, 212, 0.2);
  	/*border-radius: 0.5rem;*/
}
.titulo_registrate {
	font-size: 1.2rem;
  	font-size: clamp(1.2rem, 1.6vw, 2rem);
  	font-weight: bold;
  	margin-top: 1rem;
  	margin-bottom: 0.5rem;
}
.botones {
  	display: flex;
  	justify-content: center;
  	padding-top: 0.5rem;
  	padding-bottom: 1rem;
}
.boton_trans {
  	width: auto;
  	letter-spacing: 0.04rem;
  	border: 1px solid #ffffff;
  	border-radius: 0.4rem;
  	cursor: pointer;
  	padding: 0.6rem 2em;
  	transition: all 300ms;
  	color: #ffffff;
  	background-color: transparent;
}
.boton_trans p {
  	font-size: 0.9rem;
  	font-size: clamp(0.9rem, 1.2vw, 1.4rem);
}
.boton_trans:hover {
  	color: #f83fae;
  	border-color: #f83fae;
  	background-color: #ffffff;
}

/* login register */

.login_register {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.login_register form {
	display: flex;
	/*width: 100%;*/
	flex-wrap: wrap;
    padding: 5vh 2vw;
    justify-content: center;
    background-image: radial-gradient(circle, #ffffff, #ece8ef, #ded0db, #d2b8c3, #c7a1a8);
    border-radius: 0.5rem;
}
.login_register form h2 {
	display: flex;
	width: 100%;
	font-size: 1.4rem;
  	font-size: clamp(1.4rem, 1.6vw, 2rem);
  	font-weight: bold;
  	justify-content: center;
    margin-bottom: 3vh;
    color: #f83fae;
}
.login_register form input {
	display: flex;
    width: 80%;
    font-size: 1rem;
    justify-content: center;
    border: none;
    outline: none;
    margin-bottom: 3vh;
    padding: 10px;
    background: rgba(173, 173, 173, .27);
    border-radius: 0.5rem;
}
.space {
	display: flex;
	width: 15rem;
	flex-wrap: wrap;
	justify-content: center;
}

/* --- mirar cual de los dos btn o button para formulario ---*/

.btn a {
	display: flex;
	width: auto;
	font-size: 0.8rem;
    cursor: pointer;
    border: none;
    outline: none;
    padding: 11px 15px; /*11 48*/
    margin-top: 1vh;
    margin-bottom: 6vh;
    border-radius: 0.5rem;
    color: white;
    /*background-color: rgb(203, 38, 38);*/
    background-color: #f83fae;
 }
.btn a:hover {
    border-color: #ff0000;
    color: white;
    background-color: #e92d2d;
}
.login_register form button{
	display: flex;
	width: auto;
	font-size: 0.8rem;
    cursor: pointer;
    border: none;
    outline: none;
    padding: 11px 15px; /*11 48*/
    margin-top: 1vh;
    margin-bottom: 6vh;
    border-radius: 0.5rem;
    color: white;
    /*background-color: rgb(203, 38, 38);*/
    background-color: #f83fae;
 }
.login_register form button:hover {
    border-color: #ff0000;
    color: white;
    background-color: #e92d2d;
}

/* ----- fin de mirar btn y button ------ */


.login_register form p {
	display: flex;
	/*width: 80%;*/
	text-align: center;
	color: #5a5a5a;
}
#probar {
    border: 1px solid #f83fae;
    color: #f83fae;
    background-color: #ffffff;
    margin-bottom: 2.5vh;
}
#probar:hover {
    background-color: #f9f9f9;
}

