@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
* {
	margin: 0;
	font-family: 'Lato', sans-serif;
	box-sizing: border-box;
	word-wrap: break-word;
}
.nav-bar{
    box-shadow: 0 8px 5px var(--tertiary-color);
}
.nav-bar .btn{
    font-size: 1.2rem;
    color: var(--navbar-icons-color);
}
.main{
    display: flex;
    height: 85vh;
    justify-content: center;
    align-items: center;
}
.login{
    width: 22rem;
    background: var(--tertiary-color);
    border-radius: 5px;
}
.signup{
    width: 25rem;
    background: var(--tertiary-color);
    border-radius: 5px;
    margin-top: 2rem;
}
.form{
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.form--title{
    text-align: center;
}
.form--label, .form--input{
    width: 100%;
    border-radius: 0.3rem;
    border: transparent;
}
.form--label{
    margin: 0.8rem 0;
}
.form--input{
    font-size: 1rem;
    padding: 0.5rem;
    outline-color: var(--primary-color);
}
.form--remember{
    display: flex;
    justify-content: space-between;
    margin: 0.8rem 0 0 0;
    position: relative;
}
.form--checkbox{
    cursor: pointer;
    width: 1rem;
    height: 1rem;
} 
.form--link{
    color: var(--primary-color);
    text-decoration: none;
}
.create-new-account{
    text-align: center;
}
.checkbox-div{
    display: flex;
    align-items: center;
}