@import url("fonts.css");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: url(img/login.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  min-height: 100vh;
  z-index: -100;
}
.wrapper {
  background: linear-gradient(
    -180deg,
    rgba(222, 222, 226, 0.87),
    rgba(10, 87, 110, 0.87)
  );
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  opacity: 23%;
  z-index: -1000;
}
main {
  height: 70vh;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgb(40, 138, 138);
  padding: 24px;
}
.h1 {
  text-shadow:
    4px 3px 5px rgba(40, 138, 138, 0.83),
    -4px 3px 5px rgb(40, 138, 140);
  color: rgba(0, 0, 0, 0.9);
  font-family: Equila;
}
/*LOGIN STUFF*/
form {
  max-width: 500px;
  min-height: 60vh;
  position: relative;
  top: 90px;
  left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2em;
  border-radius: 8px;
  box-shadow:
    28px 28px 50px rgb(40, 138, 138, 0.32),
    -23px -23px 45px rgb(40, 138, 138, 0.233);
}
form h2 {
  color: rgb(40, 138, 138);
}
div.input-field,
div.submit-field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
input,
.sub {
  height: 4em;
  width: 90%;
  border-radius: 6px;
  border: 1px solid rgb(40, 138, 138);
  outline: none;
}
input:hover,
input:focus {
  border: 3px solid rgb(40, 138, 138);
}
.sub {
  font-size: 17px;
  font-weight: 600;
  color: white;
  background-color: rgb(40, 138, 138);
}
.sub:hover {
  background-color: white;
  color: rgb(40, 138, 138);
}
input::placeholder {
  color: rgb(40, 138, 138);
  font-weight: 500;
  font-family: Raleway;
}
small a {
  color: rgb(40, 138, 138);
}
@media (max-width: 50em)
{
  header{
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}
}