:root {
  --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-primary: Urbanist, Montserrat, sans-serif, var(--system-ui);
  --font-header: clamp(2rem, 8vw, 6rem);
}

@font-face {
    font-family: 'Norsebold';
    src: url(./assets/Norse-Bold.otf) format('opentype');
    font-weight: normal; 
    font-style: normal; 
}

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; 
  display: flex;
  font-family: var(--font-primary)
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

#left-pane {
    background: url(./assets/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: min(500px, 40vw);
    display: flex;
    flex-direction: column; 
    justify-content: center;
    color: white;
    font-family: var(--font-primary);
    gap: 40rem;
    
}

#logo-font {
    display: flex;
    background-color: rgba(0,0,0, 0.5);
    justify-content: center;
    align-items:center;
    gap: 1rem;
}

#logo-font #header {
    font-family: 'Norsebold';
    font-size: var(--font-header);
}
 
#logo-font img {
    width: min(80px, 10vw);
}

#left-pane #footer {
    align-self: center;
    padding: 1rem;
}

#footer a {
    color: white;
}

#right-pane {
    display: flex; 
    flex-direction: column; 
    font-family: var(--font-primary);
    /* width: min(700px, 60vw); */
    flex: 1;
}

#right-pane #top-header {
    min-height: 27vh;
        padding: 2rem;
    /* border: 2px solid black; */
    font-size: 1.2rem;
    font-weight: 600;
    display: flex; 
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
        background: #F9FAFB;
}

#right-pane #form-container {
    /* border: 2px solid black; */
    display: flex; 
    flex-direction: column;
    min-height: 20vh;
    padding: 2rem;
}

#right-pane form {
    display: flex; 
    flex-direction: column;
    gap: 1rem;
}

 #form-container > form > .form-fields {
    display: flex;
    gap: 2rem;
}

#form-container > form > .form-fields > .field {
    display: flex; 
    flex-direction: column;
}

input {
    width: min(250px, 30vw);
    border-radius: 0.3rem;
    padding: 0 0.3rem;
    border: 1px solid #E5E7EB;
}

input:focus {
    border: 1px solid blue;
    box-shadow: -3px 9px 20px 3px rgba(0,0,0,0.22);
    outline: none;
}

input:user-invalid {
    border: 1px solid red;
    outline: none;
    box-shadow: -3px 9px 20px 3px rgba(0,0,0,0.22);
}

form .form-para {
    font-size: 1.5rem;
    font-weight: 600;
}

#right-pane #button-login {
    background: #F9FAFB;
    min-height: 49vh;
    padding: 2rem;
    display: flex; 
    flex-direction: column; 
    gap: 2rem;
}

#button-login button {
    width: min(250px, 30vw);
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: none;
    background: #596D48;
    color: white;
    font-weight: 600;
}

#button-login .login-para {
    color: #596D48;
    font-weight: 600;
}