@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800.900&display=swap')
*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins",sans-serif;
}
:root{
	--toast-timer:5s;
	--toast-color-status:transparent;
}

body{
	background:#25272e;
	min-height: 100vh;
	display:flex;
	justify-content: center;
	align-items: center;
	font-family: Poppins,sans-serif;
	overflow: hidden;
}
.leaf{
	position:absolute;
	width:30px;
	height:30px;
	background-color: #9ac23c00;
	border-radius:50%;
	animation: falling 8s ease-in-out infinite;	
	z-index: 11;
}

@keyframes falling{
	0% {
		transform: translateY(-10%);
	}
	100% {
		transform: translateY(3220%);
	}
}

.leaf:nth-child(1){
	left:5%;
	top:-5%;
	animation-delay: .5s;
}

.leaf:nth-child(2){
	left:25%;
	top:-10%;
	animation-delay: 2s;
}

.leaf:nth-child(3){
	left:45%;
	top:-15%;
	animation-delay: 3.5s;
}

.leaf:nth-child(4){
	left:65%;
	top:-20%;
	animation-delay: 1s;
}

.leaf:nth-child(5){
	left:85%;
	top:-25%;
	animation-delay: 2.5s;
}

.leaf:nth-child(6){
	left:95%;
	top:-15%;
	animation-delay: 2.5s;
}

.leaf:nth-child(7){
	left:55%;
	top:-15%;
	animation-delay: 1.5s;
}

.leaf:nth-child(8){
	left:20%;
	top:-15%;
	animation-delay: 1.0s;
}

.box{
	position: relative;
	width: 400px;
	height: 500px;
	background: #191a1f;
	overflow: hidden;
}
.box::before{
	content:"";
	position: absolute;
	top: -50%;
	left:-50%;
	width: 400px;
	height: 500px;
	background: linear-gradient(90deg,transparent,#00ffff,#00ffff);
	transform-origin: bottom right;
	animation: animate 6s linear infinite;
}
.box::after{
	content:"";
	position: absolute;
	top: -50%;
	left:-50%;
	width: 400px;
	height: 500px;
	background: linear-gradient(90deg,transparent,#fa008a,#fa008a);
	transform-origin: bottom right;
	animation: animate 6s linear infinite;
	animation-delay:-3s;
}

@keyframes animate
{
	0%
	{
		transform: rotate(0deg);
	}
	100%
	{
		transform: rotate(360deg);
	}
}

form{
	position: absolute;
	inset:2px;
	background:#28292d;
	z-index:10;
	padding:20px 35px;
	
}
h2{
	color:#00ffff;
	font-size: 2.3rem;
	font-weight: 500;
	text-align: center;
}
.login-box .inputBox input[type="text"], .login-box .inputBox input[type="password"]{
	width:100%;
	height:45px;
	padding:10px;
	border: none;
	border-bottom: 1px solid rgba(255,255,255);
	margin-bottom:15px;
	font-family: sans-serif;
	background:transparent;
	outline:none;
}
.login-box .inputBox label{
	position:absolute;
	top:0;
	left:0;
	padding:15px 25px;
	font-size:16px;
	color:#fff;
	pointer-events: none;
	transition:.5s;
}
.login-box input[type="text"]:not(:placeholder-shown)~label{
	color:red;
}
.login-box .bar {
  position: relative;
  display:block;
  width:100%;
}
.login-box .bar:before,
.login-box .bar:after {
  content: '';
  height: 2px;
  width: 0;
  left:15px;
  bottom: 15px;
  position: absolute;
  background: #03e9f4;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}
.login-box .bar:before {
  left: 50%;
}

.login-box .bar:after {
  right: 50%;
}


.login-box input[type="text"]:focus~label,
.login-box input[type="password"]:focus~label,
.login-box input[type="text"]:not(:placeholder-shown)~label,
.login-box input[type="password"]:not(:placeholder-shown)~label
{
	top:-20px;
	left:0;
	color:#03e9f4;
	font-size:12px;
}
.login-box input[type="text"]:focus~.bar:before,.login-box input[type="text"]:focus~.bar:after,.login-box input[type="password"]:focus~.bar:before,.login-box input[type="password"]:focus~.bar:after{
	width: 50%;
}
.login-box input[type="text"]::placeholder:after{
	content:'00';
}
.login-box button[type="submit"]{
	background-color: #c66143;
	font-family:sans-serif;
	font-size:22px;
	font-weight:500;
	letter-spacing: 0.03em;
	width:98%;
	height:45px;
	margin-top: 50px;
	color:white;
	padding:10px 20px;
	border:none;
	outline: none;
	border-radius:5px;
	cursor:pointer;
	transition: all 0.5s ease-in;
}
.login-box button[type="submit"]:hover{
	background-color:#261935;
}
.login-box button[type="submit"].submit{
	background-color:#261935;
	cursor:none;
}
@media screen and(max-width: 600px){
	.login-box{
		max-width:300px;
	}
}




.inputBox{
	position:relative;
	width:300px;
	margin-top:40px;
}
.inputBox input{
	position:relative;
	width:100%;
	padding:18px 35px 5px 0;
	border:none;
	outline: none;
	background-color:transparent;
	border-bottom: 1px solid #87a4bd;
	color:#00ffff;
	font-size:1.1em;
	font-weight: 400;
	letter-spacing: 0.07em;
	background:linear-gradient(to top,#00ffff 50%,#00ffff 50%);
	background-position: left bottom;
	background-size: 0 1px;
	background-repeat: no-repeat;
	transition: all 0.5s ease-in-out;
}
.inputBox input:hover,
.inputBox input:focus,
.inputBox input:valid{
	border-color: #00ffff;
	color:#ffffff;
}
.inputBox input:focus{
	background-position: left bottom;
	background-size: 100% 1px;
}
.inputBox label{
	position: absolute;
	left:0;
	padding:20px 0;
	color:#87a4bd;
	font-size:1em;
	letter-spacing: 0.05em;
	pointer-events: none;
	transition: all 0.5 ease-in-out;
	color:#fff;
}
.inputBox input[type="password"]:invalid{
	border-color: #fffffe;
	animation: shake 0.3s 3;
}

@keyframes shake{
	25%{
		transform: translateX(4px);
	}
	50%{
		transform: translateX(-4px);
	}
	75%{
		transform: translateX(4px);
	}	
}
.forget{
	width:300px;
	margin-top:20px;
	display:flex;
	justify-content:space-between;
}
.forget input{
	display:none;
	cursor:pointer;
}
.forget label{
	position:relative;
	cursor:pointer;
	color: #87a4bd;
	font-size: 0.9em;
}

.forget label::before{
	content: "";
	border: 2px solid #00ffff;
	padding:8px;
	display:inline-block;
	vertical-align: middle;
	cursor:pointer;
	margin-right: 5px;
}

.forget input:checked + label::after{
	content: "";
	position:absolute;
	top:2px;
	left:7px;
	width:5px;
	height:12px;
	border:solid #00ffff;
	border-width: 0 2px 2px 0;
	transform:rotate(45deg);
}
.forget input:checked ~ label{
	color:#00ffff;
}
.forget a{
	color:#87a4bd;
	font-size:0.9em;
	text-decoration:none;
}
.forget a:hover{
	color:#00ffff;
	text-decoration: underline;
	text-underline-offset:5px;
}

.alert-text{
	color:#fff;
	font-family: Poppins,sans-serif;
	font-size: 16px;
	line-height: 20px;
}
.alert-text .seconds{
	font-size: 20px;
	color:#00ffff;
}


.toast-container{
	position:fixed;
	top:25px;
	right:30px;
	z-index: 9999;
	width:450px;
}
.toast{
    background-color:#fff;
    padding:20px 35px 20px 25px;
    border-radius: 8px;
    margin-bottom:10px;
    border-left:6px solid var(--toast-color-status);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    transform: translate(200%);
}
.toast.active{
    transform: translate(0%);
    animation: bounceInRight 1s forwards;
}
.toast.disabled{
	animation: bounceOutRight 1s forwards;	
}
.toast .toast-content{
    display: flex;
    align-items: center;
}
.toast-content .check{
    display: flex;
    border: 2px solid var(--toast-color-status);
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    color: var(--toast-color-status);
    font-size: 1.25rem;
    border-radius: 50%;
}
.toast-content .message-content{
    display: flex;
    flex-direction: column;
    margin: 0 1.25rem;
    gap:4px;
}
.message-content .text{
    font-size: 1.12rem;
    font-weight: 400;;
    color: #666666;
}
.message-content .text.title{
    font-weight: 600;
    color: #333;
}
.message-content .text.message{
    font-size: 0.875rem;
}

.toast .close{
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;
}
.toast .close:hover{
    opacity: 1;
}
.toast .progress{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #ddd;
}
.toast .progress:before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: inherit;
    width: inherit;
    background-color: var(--toast-color-status);
    border-radius: 0px 8px 8px 0px;
}
.progress.active:before{
    animation: progress var(--toast-timer) linear forwards;
}
@keyframes progress {
    100%{
        right: 100%;
    }
}

@keyframes bounceInRight{
	0%,
	60%,
	75%,
	90%
	to {
		animation-timing-function: cubic-bezier(0.215,0.61,0.335,1);
	}
	0%{
		opacity: 0%;
		transform: translate3d(3000px,0,0);
	}

	60%{
		opacity: 1%;
		transform: translate3d(-25px,0,0);
	}

	75%{
		transform: translate3d(10px,0,0);
	}

	90%{
		transform: translate3d(-5px,0,0);
	}
	to{
		transform:none;
	}
}

@keyframes bounceOutRight{
	20%{
		opacity:1;
		transform: translate3d(-20px,0,0);
	}
	to{
		opacity:0;
		transform: translate3d(2000px,0,0);
	}
}

.loading{
	border: 4px solid orange;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border-right-color:transparent;
	animation: spin 1s linear infinite;
}
@keyframes spin{
	100%{
		transform: rotate(360deg);
	}
}