:root {
  --papaya-whip: #ffecc8;
  --plum: #dcabdf;
  --pumpkin-spice: #f3752b;
  --evergreen: #03312e;
  --oxblood: #95190c;
  --white: #ffffff;
  --slate-grey: #878e99;
  --black-forest: #9d96b8;
  --twilight-indigo: #3a405a;
  --graphite: #151515;

  --tile-size: 64pt;
}

body {
  background-color: var(--twilight-indigo);

  margin: 0;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@600&display=swap');
h1, h2 {
  color: var(--graphite);
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-align: center;
}

.tiles {
  display: flex;
  gap: 8pt;
}

.tile {
  background-color: var(--papaya-whip);

  width: var(--tile-size);
  height: var(--tile-size);
  border-radius: 16%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0.75pt 0.75pt 5pt var(--graphite);
}

.tile h1 {
  margin: 0;
  font-size: 40pt;
}

h2 {
  color: var(--papaya-whip);
}