style.css

/* Reset styles */
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

/* Navbar */
#nav {
  background-color: #efefef;
  height: 90px;
}
.nav-menu {
  display: flex;
  height: 100%;
  width: 30%;
  min-width: 300px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
.nav-item {
  height: 75%;
}
.nav-icon {
  height: 100%;
  filter: drop-shadow(1px 1px 1px #00000080);
}

/* Main Section */
#main {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

/* Login form */
.login-form {
  width: 300px;
  height: 345px;
  background: url(./images/Osis_back.png);
  background-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 2.9rem 2rem 2rem;
  box-sizing: border-box;
  gap: 0.29rem;
  position: relative;
}
.text-input,
.login-btn {
  padding: 1em;
  border-radius: 3px;
  border: none;
  outline: none;
}
.text-input:focus {
  box-shadow: 0px 0px 2px 1px wheat;
  transition: 0.5s;
}
.login-form-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.forgot-password,
.login-btn {
  width: 49%;
  cursor: pointer;
}

/* Shutter */
.login-form::before {
  content: '';
  width: 50%;
  height: 100%;
  background: url(./images/Osis_left.png);
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: 0.5s linear;
}
.login-form::after {
  content: '';
  width: 50%;
  height: 100%;
  background: url(./images/Osis_right.png);
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.5s linear;
}

/* Shutter Animation */
.login-form:focus-within::before {
  left: -50%;
  filter: blur(100px);
  opacity: 0;
}
.login-form:focus-within::after {
  right: -50%;
  filter: blur(100px);
  opacity: 0;
}