/*
From Kevin Powel: "Very small CSS tweaks for better forms"
*/

/* <style>  Only use this line on Google form */
input {
    outline: 3px solid hsl(203, 30%, 26%);
  }
  
  input:not(:placeholder-shown):valid {
    outline-color: var(--clr-success);
  }
  
  input:not(:placeholder-shown):invalid {
    outline-color: var(--clr-error);
  }
  
  input:focus:invalid {
    outline-color: var(--clr-warning)
  }
  

  
  
  
  
  @layer general-styling {
    :root {
      --clr-success: hsl(143, 100%, 26%);
      --clr-warning: hsl(43, 100%, 66%);
      --clr-error: hsl(348, 55%, 49%);
    }
  
    form {
      display: grid;
      gap: 0.75rem;
      max-width: 30ch;
      margin: 2rem auto;
    }
  
    .form-group {
      display: grid;
      gap: 0.25rem;
    }
  
    html {
      font-size: 1.25rem;
      font-family: system-ui;
      color-scheme: dark;
    }
  
    label {
      font-size: 0.75rem;
    }
  
    input,
    button {
      font: inherit;
    }
  
    input {
      padding: 0.25rem 0.5rem;
      border-radius: 0.25rem;
      border: 0;
      background-color: hsl(201, 31%, 11%);
    }
  }
  
 /* </style>  Only use this line on Google form */