@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;
}

body {
    display:flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #223243;
}
 
.container{
    padding: 40px;
    border-radius:20px;
    border: 8px solid #223243;
    box-shadow: -5px -5px 15px rgba(255,255,255,0.1),5px 5px 15px rgba(0,0,0,0.35),
    inset -5px -5px 15px rgba(255,255,255,0.1),
    inset 5px 5px 15px rgba(0,0,0,0.35);    
}


.container .forms{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 25px;
}

.container .forms.signin
{
display : flex;
} 


.container .forms h2
{
    color:#fff;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.container .forms .inputBox
{
position : relative;
width: 300px;
}

.container .forms .inputBox input
{
padding : 12px 10px 12px 48px;
border : none;
width :100%;
background: #223243;
border : 1px solid rgba(0,0,0,0.1 );
color: #fff;
font-weight: 300;
border-radius: 25px;
font-size: 1em;
box-shadow: -5px -5px 15px rgba(255,255,255,0.1),
5px 5px 15px rgba(0,0,0,0.35);
transition: 0.5s;
outline: none;
}

.container .forms .inputBox span
{
    position : absolute;
    left : 0;
    padding: 12px 10px 12px 48px;
    pointer-events: none;
    font-size: 1em;
    font-weight: 300;
    transition: 0.7s;
    letter-spacing: 0.05em;
    color : rgba(255,255,255,0.5);
}

.container .forms .inputBox input:valid ~ span,
.container .forms .inputBox input:focus ~ span
{
color : #00dfc4;
border : 1px solid #00dfc4;
background: #223243;
transform : translateX(25px) translateY(-7px);
font-size: 0.6em;
padding: 0 8px;
border-radius: 10px;
letter-spacing: 0.1em;
}

.container .forms .inputBox input:valid,
.container .forms .inputBox input:focus
{
border: 1px solid #00dfc4;
}

.container .forms .inputBox i
{
    position: absolute;
    top:15px;
    left:16px;
    width: 25px;
    padding: 2px 0;
    padding-right: 8px;
    color : #00dfc4;
    border-right: 1px solid #00dfc4;
}

.container .forms .inputBox input[type="submit"]
{
background: #00dfc4;
color: #223243;
padding: 10px 0;
font-weight: 500;
cursor: pointer;
box-shadow: -5px -5px 15px rgba(255,255,255,0.1),
5px 5px 15px rgba(0,0,0,0.35),
inset -5px -5px 15px rgba(255,255,255,0.1),
inset 5px 5px 15px rgba(0,0,0,0.35);
}


.container .forms p{
color:yellow;
font-size: 0.85em;
font-weight: 300;
}

.container .forms p a{
font-weight: 500;
color:#fff;

}