/* regular font */
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');
/* monospace font */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: "reddit sans";
  color: rgb(20,20,20);
}

h1, h2, h3, h4, h5, h6 {
  color: black;
  font-style: bold;
}

table, tbody, tr, th, td {
  border-collapse: collapse;
}

ilcode {
  display: inline;
  font-family: 'jetbrains mono';
  color: rgb(34, 34, 34);
  background-color: rgb(225,225,225);
  border: 1px solid rgb(175,175,175);
  border-radius: 4px;
  padding: -2px 1.5px;
}

.mainContainer {
  box-sizing: border-box;
  overflow-x: hidden;
}

/* sidebar */
.mainContainer .sidebar {
  padding: 0 8px;
  background-color: rgb(20,20,20);
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
  width: 15%;
  text-align: center;
  vertical-align: top;
}

.mainContainer .sidebar ul {
  padding: 10px 0;
  list-style-type: none;
  top: 0;
  left: 0;
  position: sticky;
}

.mainContainer .sidebar ul hr {
  width: 85%;
}

.mainContainer .sidebar ul li {
  color: white;
  margin: 15px 0;
}

.mainContainer .sidebar ul li:hover {
  filter: brightness(90%);
  text-shadow: 0 0 4px rgba(245,245,245,0.41);
}

.mainContainer .sidebar li a:link {
  text-decoration: none;
  color: white;
}

.mainContainer .sidebar li a:visited {
  text-decoration: none;
  color: white;
}

.mainContainer .sidebar li a:hover {
  text-decoration: none;
  filter: brightness(90%);
}

.mainContainer .sidebar li a:active {
  text-decoration: none;
  filter: brightness(115%);
}

/* main content */
.mainContainer .mainContent {
  padding-left: 6px;
  padding-right: 12px;
}

.mainContainer .mainContent p {
  margin: 0;
  padding: 0;
}

.mainContainer .mainContent hr {
  width: 85%;
  margin: 28px auto;
}

.mainContainer .mainContent .collapsible {
  color: rgb(20,20,20);
  background-color: rgb(225,225,225);
  font-size: 14px;
}

.mainContainer .mainContent .collapsible:hover {
  filter: brightness(120%);
}

.mainContainer .mainContent .content {
  display: none;
}

.mainContainer .mainContent table tbody {
  border: 2px solid black;
  padding: 2px;
}

.mainContainer .mainContent table tbody tr th,
.mainContainer .mainContent table tbody tr td {
  padding: 2px 8px;
}

/* attribution */
.attribution {
  color: rgb(235,235,235);
  background-color: rgb(20,20,20);
  font-size: 14px;
  padding: 6px 0 6px 64px;
  width: 100%;
}

.attribution a:link {
  text-decoration: none;
  color: rgb(26,190,215);
}

.attribution a:visited {
  text-decoration: none;
  color: rgb(17,143,163);
}

.attribution a:hover {
  text-decoration: none;
  filter: brightness(90%);
}

.attribution a:active {
  text-decoration: none;
  filter: brightness(115%);
}

/* to top */
#totop {
  background-color: rgb(70,70,70);
  border: 3px solid rgb(120,120,120);
  margin: 20px 20px 0 0;
  padding: 8px;
  width: 20px;
  height: 20px;
  top: 20px;
  right: 20px;
  position: sticky;
  float: right;
  text-align: center;
  font-family: 'jetbrains mono';
  font-size: 20px;
  color: rgb(215,215,215);
  text-decoration: none;
  font-weight: bolder;
}

#totop a,
#totop a:link,
#totop a:visited,
#totop a:hover,
#totop a:active {
  color: rgb(215,215,215);
  text-decoration: none;
  font-weight: bolder;
}