* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Raleway', sans-serif;
    }

    body {
      background: linear-gradient(90deg, #C7C5F4, #776BCC);
    }

    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 20px;
    }

    .screen {
      background: linear-gradient(90deg, #5D54A4, #7C78B8);
      position: relative;
      width: 100%;
      max-width: 400px;
      border-radius: 20px;
      box-shadow: 0px 0px 24px #5C5696;
      overflow: hidden;
    }

    .screen__content {
      position: relative;
      z-index: 1;
      padding: 30px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .text-logo {
      font-family: 'Pacifico', cursive;
      font-size: 38px;
      color: #6c6c75;
      margin-bottom: 20px;
      margin-right: auto;
    }

    .register {
      width: 100%;
    }

    .login__field {
      padding: 12px 0px;
      position: relative;
    }

    .login__icon {
      position: absolute;
      top: 24px;
      left: 0;
      color: #7875B5;
    }

    .login__input {
      border: none;
      border-bottom: 2px solid #D1D1D4;
      background: none;
      padding: 10px 10px 10px 26px;
      font-weight: 700;
      width: 100%;
      transition: .2s;
      color: black;
    }

    .login__input:focus {
      outline: none;
      border-bottom-color: #6A679E;
    }

    .login__input::placeholder {
      color: #8a8a99;
    }

    .login__submit {
      background: #fff;
      font-size: 14px;
      margin-top: 20px;
      padding: 16px 20px;
      border-radius: 26px;
      border: 1px solid #D4D3E8;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      color: #4C489D;
      box-shadow: 0px 2px 2px #5C5696;
      cursor: pointer;
      transition: .2s;
    }

    .login__submit:hover {
      transform: scale(1.03);
    }

    .button__icon {
      font-size: 24px;
      margin-left: auto;
      color: #7875B5;
    }

    .strength {
      height: 6px;
      width: 100%;
      margin-top: 4px;
      border-radius: 4px;
      background: transparent;
      transition: 0.3s;
    }

    .match {
      font-size: 12px;
      color: black;
      margin-top: 4px;
    }

    .screen__background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
    }

    .screen__background__shape {
      transform: rotate(45deg);
      position: absolute;
    }

    .screen__background__shape1 {
      height: 520px;
      width: 520px;
      background: #FFF;
      top: -50px;
      right: 120px;
      border-radius: 0 72px 0 0;
    }

    .screen__background__shape2 {
      height: 220px;
      width: 220px;
      background: #6C63AC;
      top: -172px;
      right: 0;
      border-radius: 32px;
    }

    .screen__background__shape3 {
      height: 540px;
      width: 190px;
      background: linear-gradient(270deg, #5D54A4, #6A679E);
      top: -24px;
      right: 0;
      border-radius: 32px;
    }

    .screen__background__shape4 {
      height: 400px;
      width: 200px;
      background: #7E7BB9;
      top: 420px;
      right: 50px;
      border-radius: 60px;
    }

    @media screen and (max-width: 400px) {
      .screen {
        width: 100%;
        margin: 0 10px;
      }
    }