* {
  box-sizing: border-box;
}
body {
  background: rgb(246, 219, 231);
  background: radial-gradient(
    circle,
    rgba(246, 219, 231, 1) 0%,
    rgba(194, 214, 238, 1) 100%
  );
  margin: 0;
}
:root {
  --white: #ffffff;
  --gray1: #333333;
  --gray2: #555555;
  --gray3: #cccccc;
  --gray4: #aaaaaa;

  --black: #080808;
  --teal: #006060;
  --lightteal: #008080;
  --purple: #800080;
  --navy: #000080;
  --cyan: #17a2b8;
  --violetred: #c71585;
  --red: #ff0000;
  --orange: #ffa500;
  --green: #006400;
}

body {
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1.2em;
  color: var(--gray1);
}

h1 {
  text-align: center;
}

form {
  width: 400px;
}

.grid-item {
  padding: 10px;
  background-color: var(--purple);
  color: var(--white);
  font-size: 2.4em;
  text-align: center;
}