body {
  font-family: "SerifRegular";
  color: var(--dark-text);
  background-image: url("/images/keyboard.png");
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  background-color: var(--p-color-lightest);
}

header {
  font-family: "SansBold";
  text-align: center;
  position: sticky;
  top: 0px;
  background-color: var(--p-color);
  color: var(--dark-text);
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5em;
  margin-bottom: 2em;
}
header a {
  text-decoration: none;
}
header .title {
  font-size: 2.5em;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 5px;
  margin-top: 0px;
  padding-bottom: 0px;
}

#content {
  width: 75%;
  margin-right: auto;
  margin-left: auto;
}

.section {
  border: 2px solid var(--p-color-darker);
  border-radius: 10px;
  margin-bottom: 1em;
  background-color: var(--p-color-transparent);
}
.section h2 {
  border-radius: 10px 10px 0 0;
  background-color: var(--p-color);
  color: var(--dark-text);
  padding: 0.2em;
}
.section p, .section li {
  padding: 0 2em 0 2em;
  font-size: larger;
  color: var(--dark-text);
}

@font-face {
  font-family: "SansRegular";
  src: url("/fonts/SourceSansPro-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SansBold";
  src: url("/fonts/SourceSansPro-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SansSemiBold";
  src: url("/fonts/SourceSansPro-SemiBold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SansItalic";
  src: url("/fonts/SourceSansPro-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SerifRegular";
  src: url("/fonts/SourceSerifPro-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "SerifBold";
  src: url("/fonts/SourceSerifPro-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "SerifSemiBold";
  src: url("/fonts/SourceSerifPro-Semibold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
:root {
  --p-color: #87a7df;
  --p-color-darker: color-mix(in srgb, var(--p-color), #000000 20%);
  --p-color-darkest: color-mix(in srgb, var(--p-color), #000000 40%);
  --p-color-lighter: color-mix(in srgb, var(--p-color), #ffffff 20%);
  --p-color-lightest: color-mix(in srgb, var(--p-color), #ffffff 40%);
  --p-color-transparent: color-mix(in srgb, var(--p-color-lightest), transparent 10%);
  --dark-text: #333;
  --light-text: #eee;
}