*{

    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}


body{
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    background: url(./Assets/herosectionbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.container{
    width: 500px;
}

.entryarea{
    position: relative;
    height: 80px;
    line-height: 80px;
    margin-bottom: 2em;
}

input{
    position: absolute;
    width: 100%;
    outline: none;
    font-size: 2.em;
    padding: 0 30px;
    line-height: 80px;
    border-radius: 10px;
    border: 1px solid #f0ffff;
    background-color: transparent;
    transition: 0.1s ease;
    z-index: 1111;
    
}

.labelline{
    position: absolute;
    font-size: 1.6em;
    color: #f0ffff;
    padding: 0.25px;
    margin: 0 20px;
    background-color: #ffe296;
    transition: 0.2s ease;
}

input:focus,
input:valid{
    color: white;
    border: 4px solid white;
}

input:focus + .labelline,
input:valid + .labelline{
    color: white;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    transform: translate(-15px, -16px) scale(0.88);
    z-index: 1111;
}

.signin-btn button{
    width: 100%;
    padding: 12px;
    font-size: 1.4em;

    border-radius: 10px;
    border: none;
}
.signin-btn button:hover{
    cursor: pointer;
}

.description h1{
    padding: 0 0 2em;
}

.par{
    font-size: 1.6em;
}

.description{
    text-align: center;
    margin: 0 0 4em;
}