/* =============
    Import Font
   ============= */
@font-face {
  font-family: 'Norse Bold';
  src: url("./../fonts/Norse-Bold.woff") format("woff");
}

/* ===============
    Global Styles
   =============== */

*,*::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  /* outline: 1px solid red; */
}

:root {
  --font-size-small: 0.9rem;
  --font-size-medium: 1.7rem;
  --font-size-big: 2rem;
  --gap-to-image: 10%;
  --brown-color: #596D48
}

body {
  display: flex;
  background-color: #f8f8f8;
  height: 100vh;
  width: 100vw;
}

/* ========
    Layout
   ======== */

img {
  width: 40%;
}

#main-section {
  height: 100vh;
  width: 60vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 37px;
}

#header-message {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  gap: 20px;
  padding: 10px var(--gap-to-image);
}

#header-message > p:first-child {
  font-size: var(--font-size-medium);
}

#input-section {
  background-color: white;
  color: #232C43;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px var(--gap-to-image);
  box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
}

#input-section > section {
  display: flex;
  gap: 60px;
}

section > div {
  display: flex;
  flex-direction: column;
}

button {
  cursor: pointer;
  background-color: var(--brown-color);
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 7px;
  padding: 12px 35px;
  margin-left: var(--gap-to-image);
  align-self: flex-start;
}

#log-in {
  display: flex;
  gap: 5px;
  font-weight: bold;
  padding-left: var(--gap-to-image);
}

#log-in > a {
  color: var(--brown-color);
  text-decoration: none;
}

input {
  border: 1px solid #E5E7EB;
  padding: 3px 3px 3px 8px;
  border-radius: 3px;
  outline: 1px solid;
}

label {
  font-size: var(--font-size-small);
  font-weight: bold;
  font-family: cursive, sans-serif;
}

.picture {
  background: url("./../img/background.jpg") no-repeat center;
  background-size: cover;
  display: flex;
  width: 40vw;
}

.picture > div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40%;
  height: 15vh;
  background-color: rgba(0,0,0,0.5);
  flex-grow: 1;
  overflow: hidden;
}

img {
  width: 10vh;
}

img + p {
  font-family: "Norse Bold", serif;
  color: white;
  padding-left: 3%;
  font-size: 10vh;
}

/* ============
    Components
   ============ */
    /* --------
        Inputs
       -------- */

form {
  display: flex;
  gap: 37px;
  flex-direction: column;
}

input:focus {
  border-color: #E5E7EB;
  outline-color: blue;
  box-shadow: 1px 2px 6px rgb(0 0 0 / 30%);
}

.invalid-input {
  border-color: red;
  background-color: lightpink;
}

.valid-input {
  border-color: green;
  background-color: lightgreen;
}
span {
  position: relative;
}

span {
  position: relative;
}

#password.invalid-input:invalid + span::before {
  content: "* Password do not match";
  position: absolute;
  font-size: 0.75rem;
  color: red;
  top: 3px;
}

#email.invalid-input:invalid + span::before {
  content: "* Enter a valid Email";
  position: absolute;
  font-size: 0.75rem;
  color: red;
  top: 3px;
}

input[type="text"].invalid-input:invalid + span::before,
input[type="tel"].invalid-input:invalid + span::before{
  content: "* This field is required";
  position: absolute;
  font-size: 0.75rem;
  color: red;
  top: 3px;
}