@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap");

body,
html {
  font-family: "Red Hat Display", sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
}

.brown {
  color: #c99881;
}

button {
  background-color: #ad7a63;
  border: none;
  width: 55%;
  border-radius: 25px;
  padding: 5px 20px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 18px;
  transition: all 0.75s ease;
}

button:hover {
  transform: scale(1.05);
}

/* LINKS */
a {
  color: #ad7a63;
  text-decoration: none;
  transition: all 0.75s ease;
}

a:hover {
  color: #936754;
}

/* INPUTS */
input {
  text-align: center;
  background-color: transparent !important;
  color: #fff;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #c99881 !important;
  transition: all 0.75s ease;
  margin-bottom: 10px;
}

input:focus,
textarea:focus {
  text-align: center;
  border: 0 !important;
  outline: none !important;
  border-bottom: 1px solid #fff !important;
  transition: all 0.75s ease;
}

/* LOGIN PAGE */
.bg-image {
  height: 100vh;
  background: url("../img/rondas-login-screen.jpg");
  background-position: center center;
  background-size: cover;
}

.form-container {
  border-radius: 25px;
  padding: 60px 50px;
  background: rgba(217, 217, 217, 0.05);
  backdrop-filter: blur(5px);
}

.form-container .logo {
  margin-bottom: 1rem;
  max-width: 350px;
}

.login {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

form.login input {
  margin-bottom: 2rem;
  font-size: 20px;
}

form.login ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #c99881;
  text-align: center;
}

form.login ::-moz-placeholder {
  /* Firefox 19+ */
  color: #c99881;
  text-align: center;
}

form.login ::-ms-input-placeholder {
  /* IE 10+ */
  color: #c99881;
  text-align: center;
}

form.login ::-moz-placeholder {
  /* Firefox 18- */
  color: #c99881;
  text-align: center;
}

/* PASSWORD */
.password-wrapper {
  position: relative;
}

.password-icon {
  filter: invert(73%) sepia(13%) saturate(702%) hue-rotate(334deg)
    brightness(101%) contrast(93%);
  height: 18px;
  position: absolute;
  top: 8%;
  right: 80px;
  transition: all 0.75s ease;
  cursor: pointer;
}

.password-icon:hover {
  filter: invert(66%) sepia(27%) saturate(449%) hue-rotate(334deg)
    brightness(93%) contrast(89%);
}