@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    
}

@font-face {
    font-family: nordic-font;
    src: url(assets/Norse-Bold.otf);
}

body {
    height: 100vh;
    width: 100%;
    display: flex;
    font-family: "Work Sans", sans-serif;
} 

.section-1 {
    background-image: url(assets/skyscraper.jpg);
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2em;
    width: 40%;
}

.logo-banner {
    /* background-color: rgba(0, 0, 0, 0.5); */
    background-color:#596D48;
    text-align: center;
    color: white;
    height: 5em;
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-top: 6em;
    
}

.logo-banner h1{
    font-family: nordic-font;
}

.logo {
    width: 5em;
    margin-right: 0.5rem;
    /* border-top-left-radius:  2em;
    border-bottom-right-radius: 2em;
    background-color: brown; */
}

footer, footer > a {
    text-align: center;
    margin-bottom: 2em;
    color: white;
}
.section-2 {
    background-color: rgb(250, 250, 250);
    width: 60%;
}

.call-to-action {
    /* border: 1px solid black; */
    height: 30%;
    margin-left: 2em;
    margin-top: 2em;
    padding-top: 3em;
    
}
.call-to-action h3 {
    font-family: "Work Sans", sans-serif;
    font-weight: 500;
    font-size: 1em;
    
}

.sign-up-form {
    height: 40%;
    background-color: white;
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.signup {
    /* width: 100%; */
    margin-left: 2em;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-right: 1em;
}

.input-groups {
    display: flex;
    gap: 2em;
    margin: 1em;
   
}
.input-group-1, .input-group-2 {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    
}

.names , .email-number, .password{
    margin: 1em;
}

.header {
    margin-top: 1em;
}
button#submit-form {
    background-color: #596D48;
    color: white;
    /* width: 8em; */
    /* height: 2em; */
    border-radius: 0.4em;
    outline: 0;
    font-size: 0.9em;
    font-weight: 600;
    padding: 0.7em;
    margin-bottom: 1em;
}

.create-account {
    font-family: "Work Sans", sans-serif;
    
    margin-left: 2em;
    margin-top: 2em;
}

label {
    font-weight: 500;
    font-size: 0.6em;
    opacity: 0.7;
}

input{
    border: 1px solid #E5E7EB;
    border-radius: 3px;
    padding: 0.3em;
}
/* 
input:valid{
    border: 1px solid #E5E7EB;
}


input#password:invalid, input#confirm-password:invalid {
    border-color :1px solid red;
} */


.error-text {
    color: red;
    font-size: 0.6rem;
    display: block;
    margin-top: 0.1rem;
}
input:focus {
    outline: 0;
    border: 1px solid #5aaccc;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}