div#login-area {

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;

  div.caption {

    display: flex;
    gap: 1rem;
    width: 100%;

    & h1 {
      font-size: 3rem;
      font-family: 'Roboto', sans-serif;
      text-shadow: 2px 2px 2px #000;
      color: burlywood;
      font-size: 2.5rem;
    }
    & img {
      width: 5rem;
      height: 5rem;
    }
  }


  & form {
    margin: 2rem;
  }



  & div.input__container {
    position: relative;
    background: #f0f0f0;
    padding: 1.25rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    border: 0.25rem solid #000;
    max-width: 21rem;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    transform: rotateX(10deg) rotateY(-10deg);
    perspective: 1000px;
    box-shadow: 0.65rem 0.65rem 0 #000;
    & i {
      font-size: 1.5rem;
      color: black;
    }
  }

  & div.input__container:hover {
    transform: rotateX(5deg) rotateY(1 deg) scale(1.05);
    box-shadow: 1.5rem 1.5rem 0 -5px burlywood, 1.5rem 1.5rem 0 0 #000;
  }

  & .shadow__input {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: -1;
    transform: translateZ(-50px);
    background: linear-gradient(
      45deg,
      rgba(255, 107, 107, 0.4) 0%,
      rgba(255, 107, 107, 0.1) 100%
    );
    filter: blur(20px);
  }

  & .input__button__shadow {
    cursor: pointer;
    border: 3px solid #000;
    background: burlywood;
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.65rem;
    transform: translateZ(20px);
    position: relative;
    z-index: 3;
    font-weight: bold;
    text-transform: uppercase;
  }

  & .input__button__shadow:hover {
    background: burlywood;
    transform: translateZ(10px) translateX(-5px) translateY(-5px);
    box-shadow: 5px 5px 0 0 #000;
  }



  & .input__search {
    width: 100%;
    outline: none;
    border: 3px solid #000;
    padding: 1rem;
    font-size: 1rem;
    background: #fff;
    color: #000;
    transform: translateZ(10px);
    transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    z-index: 3;
    font-family: "Roboto", Arial, sans-serif;
    letter-spacing: -0.5px;
  }

  & .input__search::placeholder, h3 {
    color: #666;
    font-weight: bold;
    text-transform: uppercase;
  }

  .install {
    margin-top: 2rem;
  }

  h3 {
    font-family: "Roboto", Arial, sans-serif;
    letter-spacing: -0.5px;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
  }

  & .input__search:hover,
  & .input__search:focus {
    background: #f0f0f0;
    transform: translateZ(20px) translateX(-5px) translateY(-5px);
    box-shadow: 5px 5px 0 0 #000;
  }

}