<h2>Sign up</h2>

<form>
        <label for="first-name">First Name:</label>
        <input name="first-name" type="text" autocomplete="given-name">

        
        <label for="last-name">Last Name:</label>
        <input name="last-name" type="text" autocomplete="family-name">
        
        <label for="phone-number">Phone number:</label>
        <input name="company" type="text" autocomplete="organization">
        
        <label for="country">Country:</label>
        <input name="country" type="text" autocomplete="country-name">
        
        <label for="home-address">Home Address:</label>
        <input name="address" type="text" autocomplete="street-address">
        
        <label for="password">Password:</label>
        <input name="password" type="password" autocomplete="new-password">

        <label for="confirm-password">Confirm Password:</label>
        <input name="confirm-password" type="password" autocomplete="new-password">
  
        <input type="submit" disabled/>
    </form>

body{
  display: grid;
  font-family: arial;
  background: #31b0dd;
  grid-template-columns: minmax(4rem, 27rem);
  justify-content: center;
  position: relative;
}

form{
  display: grid;
  width: 100%;
  position: relative;
  z-index: 3;
  background: white;
  grid-template-columns: minmax(2rem, 25rem);
  grid-template-rows: repeat(8, 2rem 2.4rem);
  justify-content: center;
  justify-items: center;
  font-size: 1rem;
  gap: 1rem;
  border: 1px solid;
}

form > * {
  width: 90%;
}
form > label{
    font-size: 1rem;
    margin-block-start: 1rem;
}
form > input{
  font-size: 0.85rem;
}

input:auto-fill{
  outline: 3px solid black;   
  animation: scaleUp ease 2.87s infinite;
}

input:-webkit-autofill {
  outline: 3px solid black;   
  animation: scaleUp ease 2.87s infinite;
}

@keyframes scaleUp{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.1);
  }
  100%{
    transform: scale(1);
  }
}