:root {
  --background: #ecf0f3;
  --text-dark: #1e2125;
  --text-medium: #3c3e41;
  --text-light: #4d4f52;
  --rule: #dce1e4;
  --accent: #ff014f;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
  font-family: "Poppins", sans-serif;
  font-size: 14pt;
  color: var(--text-light);
}

select {
  box-shadow: none;
  background-color: white;
  border: 1px solid var(--rule);
  padding: 0.3rem;
  font-family: inherit;
  outline: none;
}

select:disabled {
  color: var(--rule);
  border: 1px solid var(--rule);
  background-color: white;
}

section {
  padding: 2rem 1rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

a {
  color: var(--text-light);
}
a:visited {
  color: var(--text-light);
}

h2 {
  color: var(--text-dark);
}

#hero {
  display: grid;
  justify-content: center;
  color: var(--text-dark);
  background-color: var(--background);
  padding: 0;
}

#hero img {
  width: 100vw;
  height: auto;
  max-width: 20rem;
  padding: 0rem 1rem;
}

#links {
  display: grid;
  gap: 2rem;
  grid-template-columns: auto auto;
  justify-content: center;
  padding: 1rem;
}

#menu {
  display: grid;
  justify-content: center;
  border-bottom: 1px solid var(--rule);
}

#charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#referrers {
  border-bottom: 1px solid var(--rule);
}
#referrers-grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
}

.referrer-label {
  font-weight: bold;
  margin-right: 1rem;
}

@media (max-width: 800px) {
  #charts-grid {
    grid-template-columns: 1fr;
  }
}