:root {
  --accent-color: #86F393;
  --accent-shadow-color: #75d07f;
  --background-color: #272727;
  --text-color: #fff;
  --shadow-color: #383838;
}

body > div.container {
  padding: 50px 10vw;
  min-height: 100vh;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: "Roboto Serif", serif;
  box-sizing: border-box;
}

h1 {
  line-height: 1;
  margin: 0 0 10px;
}

a {
  color: var(--accent-color);

  &:visited {
    color: var(--accent-shadow-color);
  }
}

main {

}

.divider {
  width: 100%;
  height: 2px;
  background-color: var(--shadow-color);
}

h1, h2 {
  font-weight: 900;
}

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 50px;
  row-gap: 25px;
  padding: 0;
  list-style: none;

  h3 {
    margin: 0;
  }

  .pinned {
    padding: 10px;
    border: 2px solid var(--accent-color);
    border-radius: 10px;
  }

  li {
    max-width: 300px;
  }
}

.quote {
  padding-top: 25px;

  q {
    font-style: italic;
    font-weight: 700;
    font-size: 18.72px;
  }

  span {
    margin-top: 10px;
    display: block;
    color: var(--accent-color);
  }
}