:root {
  --white: #ffffff;
  --neutral-white: #f9fafb;
  --neutral-lightgrey: #e5e7eb;
  --neutral-grey: #303947;
  --neutral-black: #111111;
  --red: #ce6262;
  --overlay: rgb(0, 0, 0, 0.4);
  --primary: #596d48;
  --horizontal-margin: 48px;
}

@font-face {
  font-family: "Norse Bold";
  src: url("../assets/fonts/Norse-Bold.woff2");
}

@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/Roboto-Variable.woff2");
}

body {
  height: 100vh;
  font-size: 16px;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  background-color: var(--neutral-white);
  display: flex;
  flex-direction: row;
}

aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 40%;
  max-width: 560px;
  background-image: url("../assets/images/leaf-unsplash.jpg");
  background-size: cover;
  background-position: center;
}

@media only screen and (min-width: 768px) {
  aside {
    width: 45%;
    max-width: 560px;
  }
}

.logo-container {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
  align-items: center;
  background-color: var(--overlay);
  width: 100%;
  margin-top: 192px;
  padding: 12px 0;
}

img#logo {
  width: 96px;
}

h1 {
  font-family: "Norse Bold", Arial, Helvetica, sans-serif;
  color: var(--white);
  font-size: 6rem;
  text-align: center;
}

.credits {
  font-size: 0.9rem;
  text-align: center;
  color: var(--white);
  padding: 12px 0;
}

.credits a {
  color: var(--white);
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.callout {
  padding: 0 var(--horizontal-margin) 56px;
  text-wrap: balance;
}

.callout :nth-child(2) {
  margin-bottom: 20px;
}

.heading {
  font-size: 1.5rem;
  font-weight: bold;
}

.heading h2 {
  font-size: 1.5rem;
}

.form-content {
  background-color: var(--white);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 6px 12px 0px;
  padding: 20px var(--horizontal-margin) 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-content .inputs-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  row-gap: 20px;
  column-gap: 88px;
  max-width: 640px;
}

.input-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

label {
  text-transform: uppercase;
  color: var(--neutral-grey);
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  font-weight: 600;
}

input {
  border-radius: 4px;
  border: 1px solid var(--neutral-lightgrey);
  padding: 4px 8px;
}

input:focus {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px 0px;
  outline: 1px solid blue;
}

input:focus:invalid {
  outline: none;
}

input:invalid {
  border: 1px solid var(--red);
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px var(--horizontal-margin);
}

button {
  padding: 12px 48px;
  text-align: center;
  background-color: var(--primary);
  color: var(--white);
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: fit-content;
}

button:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px 0px;
}

.login-action {
  display: flex;
  flex-direction: row;
  gap: 4px;
  font-size: 1.1rem;
}

.login-action a {
  color: var(--primary);
  text-decoration: none;
  font-weight: bold;
}