@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  --m3background: #131313;
  --m3onBackground: #e2e2e2;
  --m3surface: #131313;
  --m3surfaceContainerLow: #1b1b1b;
  --m3surfaceContainer: #1f1f1f;
  --m3onSurface: #e2e2e2;
  --m3onSurfaceVariant: #c6c6c6;
  --m3outline: #919191;
  --m3outlineVariant: #474747;
  --m3primary: #4cdadb;
  --m3onPrimary: #003737;
  --m3primaryContainer: #004f50;
  --m3onPrimaryContainer: #6ff6f8;
  --m3secondary: #b0cccb;
  --m3onSecondary: #1b3435;
  --m3secondaryContainer: #324b4b;
  --m3onSecondaryContainer: #cce8e7;
}

* { margin: 0; padding: 0; }

html {
  font-size: 15px;
}

body {
  min-width: 320px;
  background-color: var(--m3background);
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  color: var(--m3onSurface);
}

a {
  color: var(--m3onSurfaceVariant);
  text-decoration: none;
}

a:hover {
  color: var(--m3onSurface);
}

code {
  & pre {
    background-color: var(--m3background);
    border-radius: 15px;
    padding: 5px 10px;
  }
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

p {
  margin-bottom: 15px;
}

ul {
  margin-left: 15px;
  margin-bottom: 15px;
}

ul li {
  margin-bottom: 10px;
}

ul li:last-of-type {
  margin-bottom: unset;
}

ul lh {
  font-weight: 700;
}

#header {
  background-color: var(--m3surfaceContainer);
  padding: 15px;
  font-size: 28px;
}

#outer-wrap {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

#content-wrap {
  margin: 1.5rem auto;
  max-width: 1200px;
}

.container {
  background: var(--m3surfaceContainer);
  color: var(--m3onSurface);
  padding: 15px;
  border-radius: 25px;
  margin-bottom: 20px;
}

#content {
  overflow: hidden;
}

#list {
  width: 100%;
  overflow: auto;
  table-layout: fixed;
  border-collapse: collapse;
}

#list thead th,
#list tbody td {
  white-space: nowrap;
  overflow: hidden;
  padding: .5rem;
  vertical-align: middle;
}

#list thead th {
  border-bottom: solid .05rem var(--m3outline);
  text-align: start;
  line-height: 1.5em;
}

#list tbody td > * {
  vertical-align: middle;
}

#list .link a {
  margin-left: 1.5rem;
  display: inline-block;
  width: calc(100% - 1.5rem);
  text-overflow: ellipsis;
  overflow: hidden;
}

#list .link .icon~a {
  margin-left: 0;
}

#list .link .icon {
  display: inline-block;
  object-fit: contain;
  object-position: center;
  width: 1rem;
  height: 1rem;
  margin-right: .5rem;
}

.icon.material-symbols-rounded {
  font-size: 1rem;
}

@media (max-width: 640px) {
  body {
    margin: .5rem;
  }

  #list th:nth-child(2),
  #list th:nth-child(3),
  #list td:nth-child(2),
  #list td:nth-child(3) {
    display: none;
  }
}