@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: 'border-box';
}

main {
  background: linear-gradient(to top right, #11998e, #38ef7d);
  height: 100vh;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
}

::placeholder {
  color: black;
}

.inputs {
  margin-top: 1rem;
}

input {
  padding: 10px;
  background: linear-gradient(
    to bottom left,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.2)
  );
  border: none;
  border-radius: 2rem;
  box-shadow: 3px 3px 5px rgba(167, 167, 167, 0.2);
}

input:active,
input:focus,
button:focus {
  outline: none;
}

button {
  font-family: 'Roboto Mono', monospace;
  display: block;
  margin: auto;
  margin-top: 20px;
  padding: 10px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    to bottom left,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.2)
  );
  border-radius: 2rem;
  padding: 1rem;
}

.container h1 {
  text-align: center;
}

@media (max-width: 720px) {
  input {
    display: block;
  }

  .fa-arrow-right {
    transform: rotate(90deg);
    margin: 15px;
  }

  .container {
    text-align: center;
  }
}