authentication.scss

.authentication {
    
    background-color: $color-grey;

    h1 {
        text-align: center;
        text-transform: uppercase;
        color: $color-dark-grey;
    }

    form {
      display: flex;
      flex-direction: column;
    }

    form > * {
      margin-bottom: 1em;
    }

    main {
      background-color: $color-white;
      width: 500px;
      margin: 3em auto 0 auto;
      padding: 2em;
      border-radius: 8px;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0 10px 40px -14px rgba(0, 0, 0, 0.25);
    }

    input {
        font-size: 16px;
        padding: 15px;
        border-radius: 2px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(40, 47, 55, 0.1);
    }
    input[type="submit"] {
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        background-color: rgb(14, 125, 255);
        color: rgb(255, 255, 255);
        padding: 14px 20px;
        border-width: 0px;
        border-radius: 1px;
    }
}
@media (max-width: 600px) {
  .authentication main {
    width: 95%;
    margin-top: 1em;
  }
}