@import url("./main.css?1719714420349");

header, footer {
	--navHeight:  0px;
	--footerHeight:  0px;
	display: none;
}

section {
	height: 100vh;
	justify-content: space-around;
}

section > form#logIn {
	width:  100%;
	max-width: 330px;
	overflow: hidden;
	display:  flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	flex-direction: column;
	aspect-ratio:  3/4;
	box-sizing: border-box;
	margin: 0.5em;
	box-shadow: 0 0 15px black;
}

#photoUSer {
	height:  100%;
	max-height: 180px;
	aspect-ratio:  1/1;
	border-radius: 50%;
	overflow: hidden;
	position:  relative;
	/*background-image: url(../images/perfilTest.jpg);*/
	display: flex;
	justify-content: center;
	align-items: center;

}
#photoUSer, #photoUSer::before, #photoUSer::after{
	background-position: center;
	background-size: 100%;
}

#photoUSer::before, #photoUSer::after {
	content: "";
	height: 100%;
	width:  100%;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	box-sizing: border-box;
}

#photoUSer::before {
	animation-delay: 10s;
	transition: 1s;
	background-color:  white;
	border-radius: 50%;
	border: solid 5px black;
}

#photoUSer::after {
	background-image: url(../images/HK-LOGO-1e1.png);
	transition: 1s;
	mix-blend-mode: multiply;
	border-radius:  50%;
}

form#logIn.load #photoUSer::after {
	background-size: 300%;
}

form#logIn.load #photoUSer::before {
	border:  0px;
	opacity: 0;
}

form > div:not(#photoUSer), form > div:not(#photoUSer) > div {
	width: 100%;
} 

#contadorProyectos h3 {
	counter-reset: armados calc(var(--prueba) / 1);
}

#contadorProyectos h3:hover {
	counter-reset: armados 30;
}

#contadorProyectos h3::before {
	content: counter(armados);
}