:root {
  --k-primary: 204 70% 53%;
  --k-primary-accent: 204 70% 38%;
  --k-primary-foreground: 0 0 100%;
  --k-border: 192 10% 90%;
}
button {
  border: 0;
  background-color: hsl(var(--k-primary));
  color: hsl(var(--k-primary-foreground));
  
  transition: all 250ms ease;
  min-width: 163px;
  padding: 0 1em;
  line-height: 3;
  
  cursor: pointer;
  outline: none;
  
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
  
  &:hover,
  &:focus {
    background-color: hsl(var(--k-primary-accent));
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }
}





















section {
  min-height: 100vh;
  padding: 1em;
  display: grid;
  place-items: center;
}