* {
  box-sizing: border-box;
}

html {
  background-color: var(--bg);
  color: var(--default-color);
  font-family: Roobert, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  scroll-behavior: smooth;
}

pre {
  font-family: inherit;
  margin: 0;
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

#site-header {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  margin-bottom: 3rem;
}

#site-title {
  margin: 0px!important;
}

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

.section-wrap {
  width: 90vw;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.pasta-group {
  background-color: var(--bg-light);
  margin: 0.667rem 0 0.667rem 0;
  padding: 1rem;
  border-radius: 1.5rem;
  width: 100%;
}

.pasta-group .text-block,.ascii-group .text-block {
  margin: 1rem 0;
  padding: 0.667rem;
  border-radius: 1rem;
  background-color: var(--bg-lighter);
}

.group-title {
  margin: 0;
  text-decoration: underline;
}

.description-label {
  margin: 0;
  text-decoration: underline;
}

.pasta-title {
  margin: 0;
  text-decoration: underline;
}

.pasta-entry {
  margin: 1rem 0;
}

.pasta-entry:first-child {
  margin: 0 0 1rem 0;
}

.pasta-entry:last-child {
  margin: 1rem 0 0 0;
}

.pasta-entry:only-child {
  margin: 0;
}

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

.copy-button-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  margin: 0.6rem 0 0.6rem 0;
}

.copy-button {
  background-color: var(--accent-color);
  color: var(--bg);
  padding: 0.25rem 1rem;
  border-width: 0;
  border-radius: 0.33rem;
  cursor: pointer;
}

.copy-button:active {
  background-color: var(--twitch-purple);
}

#quick-links-section {
  width: 100%;
  background: var(--bg-light);
  padding: 0.5rem 3rem 1.5rem 3rem;
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
}

.section-title {
  margin: 0 0 0.5rem 0;
  text-decoration: underline;
}

#quick-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}

.quick-link {
  flex: 0 0 50%;
}