body {
  background-image: url(../assets/images/noa/1x/רקע\ לעמוד\ הראשון.png);
  background-repeat: no-repeat;
  background-size: 100vw;
  margin: 0;
  height: 100vh;
  color: var(--brown);
  display: flex;
  align-items: center;
  background-color: var(--beige);
  font-family: 'Forte';
}

h1 {
  font-size: 7em;
  font-weight: normal;
}

a {
  color: var(--brown);
  text-decoration: none;
}

a:hover {
  text-shadow: 0 0 10px #b9631b;
}

.sign-up-open,
.sign-in-open {
  border-radius: 25px;
  padding: 10px 25px;
  margin: 10px;
  font-size: larger;
}

.sign-up-open {
  color: var(--brown);
  background-color: transparent;
  border: 1px solid var(--brown);
}

.sign-in-open {
  background-color: var(--brown);
  border: 1px solid var(--brown);
  color: var(--beige);
}

.btn-sign-up,
.btn-sign-in {
  width: auto;
  position: relative;
  z-index: 1;
}

.error,
.error-in {
  color: red;
  font-size: smaller;
  font-weight: bold;
  text-align: center;
}

button:hover {
  opacity: 1;
  cursor: pointer;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: var(--brown);
  color: var(--beige);
}

.signupbtn {
  border: 1px solid var(--brown);
  background-color: var(--beige);
  color: var(--brown);
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn,
.signupbtn {
  width: 50%;
  margin-top: 15px;

}

/* Add padding to container elements */
.container {
  padding: 16px;
  background-color: #fff4d987;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  align-content: center;
  background-color: #decabb69;
}

/* Modal Content/Box */
.modal-content {
  background-color: white;
  margin: auto;
  border: 1px solid var(--brown);
  width: 55%;
  height: fit-content;
}


/* Full-width input fields */
input[type=text],
input[type=password] {
  width: 95%;
  padding: 17px;
  margin: 2px 0px;
  display: inline-block;
  border: none;
  background-color: #611c0936;
}

/* Add a background color when the inputs get focus */
input[type=text]:focus,
input[type=password]:focus {
  background-color: #611c094d;
  outline: none;
}

.content {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 40%;
  position: relative;
  left: 50%;
}

.flex-row {
  display: flex;
}

button {
  font-family: 'Forte';
  opacity: 0.9;
}

hr {
  border-color: var(--brown);
}

  /* The Close Button (x) */
  .close {
    position: absolute;
    right: 35px;
    top: 15px;
    font-size: 40px;
    font-weight: bold;
    background-color: transparent;
  }
  
  .close:hover,
  .close:focus {
    cursor: pointer;
  }