@import url('https://fonts.googleapis.com/css2?family=Black+And+White+Picture&family=Fontdiner+Swanky&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&display=swap');

:root {
    --header: 20vh;
    --footer: 20vh;
}

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

* {
    font-family: "Manrope", sans-serif;
}

body {
    margin: 0;
    overflow: hidden;
}

#main {
    display: flex;  
}

#backgroundImage {
    background: url("assets/unsplash.jpg");
    background-size: cover;
    height: 100vh;
    width: 45vw;
    z-index: -1;    
}

#backgroundImage div {
    display: flex;
    height: 10vh;     
    width: 100%;  
    padding: 2rem 0;
    font-size: 8vh;
    align-items: center;
    justify-content: center;
    font-family: "Norse Bold";
    background: rgba(0,0,0,0.5);
    position: relative;
    top: 30%;
    color: white;
}

#logo {
    object-fit: contain;
    height: 100%;
}

#content {
    background: hsl(0, 0%, 98%);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header {
    font-weight: 600;
    padding: 3rem;
    font-size: min(24px, 3vmin);
    height: var(--header);
}
.header > p {
    width: 40vw;
}

.form {
    background: #FFFFFF;
    height: fit-content;
    padding: 3rem;
    box-shadow: 5px 5px 5px lightgray;
    border: 1px solid #E5E7EB;
}

.row {
    display: flex;
    gap: 5rem;
}

.inputs {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

input{
    display: block;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #E5E7EB;
    width: 15vw;
}

input:focus {
    border: 1px solid blue;
    box-shadow: 5px 5px 10px lightgray;
}

label {
    font-size: 12px;
    font-weight: 600;
}

.lets {
    font-size: 20px;
    font-weight: 600;
    margin-top: 0;
}

.footer {
    display: flex;
    flex-direction: column;
    padding: 3rem;
    height: var(--footer);
    font-weight: 700;
}

#create {
    background-color: #596D48;
    border: none;
    padding: 1rem 4rem;
    color: #FFFFFF;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 5px 5px 10px lightgray;
    max-width: fit-content;
}

#create:hover {
    cursor: pointer;
    box-shadow: 10px 10px 10px lightgray;
}

a {
    color: #596D48;
    text-decoration: none;
}
a:hover {
    text-shadow: 10px 10px 10px lightgray;
}

#password:invalid, #password2:invalid {
    border-color: red;
}