title: How Do I Fix This Syntax error in my CSS code?
body: <p>I am working on a project and have the css code below in place. But I am having syntax error when I run it.</p>
  
  <p>I have gone through the code thoroughly but can't figure the problem. I validate the code and got the errors below, but I can't fix it. Any help will be appreciated.</p>
  
  <pre><code>&lt;style&gt;
        body {
        margin: 0;
        padding: 1em;
        background: white;
        }
  
      [data-cc-digits] input:focus {
        outline: none;
      }
  
      .mdc-card__primary-action,
      .mdc-card__primary-action:hover {
        cursor: auto;
        padding: 20px;
        min-height: inherit;
      }
  
      [data-credit-card] [data-card-type] {
        transition: width 1.5s;
        margin-left: calc(100% - 130px);
      }
  
      [data-credit-card].is-visa {
        background: linear-gradient(135deg, #622774 0%, #c53364 100%);
      }
  
      [data-credit-card].is-mastercard {
        background: linear-gradient(135deg, #65799b 0%, #5e2563 100%);
      }
  
      .is-visa [data-card-type],
      .is-mastercard [data-card-type] {
        width: auto;
      }
  
      input.is-invalid,
      .is-invalid input {
        text-decoration: line-through;
      }
  
      span {
              display: inline-block;
              vertical-align: middle;
      }
  
      span.material-icons {
              font-size: 150px;
      }
  
      [data-credit-card] {
              width: 435px;
              min-height: 240px;
              border-radius: 10px;
              background-color: #5d6874;
      }
  
      [data-card-type] {
              display: block;
              width: 120px;
              height: 60px;
      }
  
      [data-cc-digits] {
              margin-top: 2em;
      }
  
      [data-cc-digits] &gt; input {
              color: white;
              font-size: 2em;
              line-height: 2em;
              background: none;
              border: none;
              margin-right:0.5em;
      }
  
      [data-cc-info] {
              margin-top: 1em;
      }
  
      [data-cc-info] &gt; input {
              color: white;
              font-size: 1.2em;
              border: none;
              background: none;
      }
  
      [data-cc-info] &gt; input: nth-child(2) {
              padding-right: 10px;
              float: right;
      }
  
      [data-pay-btn] {
              position: fixed;
              width: 90%;
              border: solid 1px;
              bottom: 20px;
      }
  
      ::placeholder {
              color: #fff;
      }
      &lt;/style&gt;
  </code></pre>
  
  <p>When I validate the CSS code I got the following error reports.</p>
  
  <pre><code>Unexpected token '&lt;' at line 103, col 5.
  This rule looks for recoverable syntax errors.
  
  Unexpected token '/' at line 103, col 6.    
  This rule looks for recoverable syntax errors.
  
  Unexpected token 'null' at line 103, col 13.
  Assure properties are in alphabetical order
  
  [data-cc-info] &gt; input: nth-child(2) { 
  Expected a `FUNCTION` or `IDENT` after colon at line 88, col 24.
  </code></pre>