@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700;900&display=swap');

:root{
  --light-gray: #e9ecef;
  --text-placeholder: #666;
  --text-color: #000;
  --color-highlight: #00afb9;
}

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

input, button{
  padding: 10px 15px;
  border-radius: 25px;
  background: var(--light-gray);
  color: var(--text-color);
  border: none;
  margin: 3px 3px;
}

input::placeholder{
  color: var(--text-placeholder);
}

input:focus{
  outline: none;
  box-shadow: inset 0px 0px 0px 2px var(--color-highlight);
  animation-name: pulse;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  box-sizing: border-box;
}


#generateGrid{
  background: var(--color-highlight);
}


.pulse {
  animation-name: pulse;
  animation-duration: 1s;
  animation-fill-mode: both;
  }
  @keyframes pulse {
  0% {
  transform: scale(1);
  }
  50% {
  transform: scale(1.03);
  }
  100% {
  transform: scale(1);
  }
  }