:root {
  --typography-color-primary-text: #272727;
  --typography-color-secondary-text: #656565;
  --typography-color-third-text: #a9a9a9;
}

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 1em;
}

.container small {
  font-size: 0.5em;
}

.container p,
.container li {
  color: var(--typography-color-secondary-text);
}

.container h1,
.container h2,
.container h3 {
  color: var(--typography-color-primary-text);
}

.container h1 {
  font-size: 3rem;
}
.container h2 {
  font-size: 2rem;
}
.container h3 {
  font-size: 1.5rem;
}

.peer-cursor {
  width: 5px;
  height: 5px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
}

@media screen and (max-width: 768px) {
  .container h1 {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 568px) {
  .container h1 {
    font-size: 2.5rem;
  }
}

.page {
  will-change: opacity;
}