@import url(./base.css);

.bg-icon{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -187;
	opacity: .05;
	width: 50%;
	max-height: 30svh;
}

h2{
	text-align: center;
}

form{
	width: 80%;
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: center;
}

 *, *:before, *:after {
	 box-sizing: border-box;
}
 .container {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 overflow: hidden;
}
.container.animate .top:before,
.container.animate .bottom:before,
.container.animate .top:after,
.container.animate .bottom:after {
	margin-left: 200px;
	transform-origin: -200px 50%;
	transition-delay: 0s;
}

.container.animate .center {
	opacity: 1;
	transition-delay: 0.2s;
}

 .top:before, .bottom:before, .top:after, .bottom:after {
	 content: '';
	 display: block;
	 position: absolute;
	 width: 200vmax;
	 height: 200vmax;
	 top: 50%;
	 left: 50%;
	 margin-top: -100vmax;
	 transform-origin: 0 50%;
	 transition: all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
	 z-index: 10;
	 opacity: 0.65;
	 transition-delay: 0.2s;
}
 .top:before {
	 transform: rotate(45deg);
	 background: var(--gold);
}
 .top:after {
	 transform: rotate(135deg);
	 background: var(--gold-dim);
}
 .bottom:before {
	 transform: rotate(-45deg);
	 background: var(--gold-dim);
}
 .bottom:after {
	 transform: rotate(-135deg);
	 background: var(--gold);
}
 .center {
	 position: absolute;
	 width: 400px;
	 height: 400px;
	 top: 50%;
	 left: 50%;
	 margin-left: -200px;
	 margin-top: -200px;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 padding: 30px;
	 opacity: 0;
	 transition: all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
	 transition-delay: 0s;
	 color: #333;
}
 .center input {
	 width: 100%;
	 padding: 15px;
	 margin: 5px;
	 border-radius: 1px;
	 border: .15rem solid #ccc;
	 font-family: inherit;
	 box-sizing: border-box;
}
 

button{
    font-size: 1.25rem;
    font-weight: bold;
    padding: .5rem 1.5rem;
    background-color: var(--gold);
	transition: .2s;
	width: 50%;
	margin-left: 50%;
	transform: translateX(-50%);
}

button:hover{
    opacity: .75;
}

h2{
	font-size: 2rem;
}

h3{
    font-size: 1.25rem;
	color: var(--error_rot);
	margin-bottom: .5rem;
	opacity: 0;
}


.worngPassword{
	border: .15rem solid var(--error_rot) !important;
	background-color: color-mix(in srgb, var(--error_rot) 10%, white 90%);
}