:root {
  --accent-colour: #8d00cf;
  --font-colour: #303030;
  --font-colour-dark: #f0f0f0;
  --header-colour: rgba(255, 255, 255, 0.5);
  --header-colour-dark: rgba(31, 31, 31, 0.5);
  --shadow-colour: rgba(0, 0, 0, 0.5);
  --background-colour: rgba(255, 255, 255, 1.0);
  --background-colour-dark: rgba(31, 31, 31, 1.0);
  --bubble-colour: #ffffff;
  --bubble-colour-dark: #303030;
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none !important;
}

body {
  margin: 0;
  font-family: 'Inter';
  background-color: var(--background-colour);
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--background-colour-dark);
  }
}

h1, h2, h3 {
  line-height: 5%;
  font-weight: 300;
}
.hero > h1 {
  font-size: 3rem;
}

.header {
  z-index: 9999;
  position: fixed;
  top: 0;
  width: 100%;
  backdrop-filter: blur(1rem);
  margin-top: 100;
  line-height: 1rem;
  color: var(--font-colour);
  padding: 0.5rem 1rem;
  background-color: var(--header-colour);
  box-shadow: 0 0.1rem 0.3rem var(--shadow-colour);
  display: flex;
  align-items: center;
  row-gap: 1rem;
  column-gap: 1rem;
}
.ghost {
  opacity: 0;
  top: 0;
  width: 100%;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  row-gap: 1rem;
  column-gap: 1rem;
}
@media (prefers-color-scheme: dark) {
  .header {
    color: var(--font-colour-dark);
    background-color: var(--header-colour-dark);
  }
}
.site-icon {
  height: 1.5rem;
  text-decoration: none;
  transition-duration: 0.2s;
}
.site-icon:hover {
  transform: scale(1.2, 1.2);
  transition-duration: 0.2s;
}
.header-item {
  padding-bottom: 0.2rem;
  transition-duration: 0.2s;
  border-bottom: 0.02rem solid transparent;
}
.header-item:visited {
  color: var(--font-colour);
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .header-item:visited {
    color: var(--font-colour-dark);
  }
}
.header-item:hover {
  transition-duration: 0.2s;
  border-bottom: 0.02rem solid var(--accent-colour);
}
.hero {
  display: flex;
  color: var(--font-colour-dark);
  align-items: start;
  flex-direction: row;
  row-gap: 2rem;
  column-gap: 2rem;
  padding: 4rem;
  background-color: var(--accent-colour);
}
.bubble {
  display: flex;
  overflow: hidden;
  color: var(--font-colour);
  line-height: 8%;
  border-radius: 0.5rem;
  padding-right: 0.5rem;
  column-gap: 0.25rem;
  align-items: center;
}
@media (prefers-color-scheme: dark) {
  .bubble {
    color: var(--font-colour-dark);
  }
}
.bubble-tag {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin: 0.25rem;
  color: var(--font-colour-dark);
  border-radius: 0.3rem;
  background-color: var(--accent-colour);
}
@media (prefers-color-scheme: dark) {
  .bubble-tag {
    color: var(--font-colour-dark);
  }
}
.hero-download {
  display: flex;
  width: 100%;
  padding: 2rem;
  align-items: center;
  flex-direction: column;
}
.icon-large {
  height: 3.5rem;
}
.main-content {
  display: flex;
  flex-direction: column;
  width: 75%;
  row-gap: 0.5rem;
  align-self: center;
  align-content: center;
  color: var(--font-colour);
  padding: 2rem;
}
@media (prefers-color-scheme: dark) {
  .main-content {
    color: var(--font-colour-dark);
  }
}
.list-item {
  line-height: 150%;
  font-size: medium;
  font-weight: 600;
}
.list-descriptor {
  font-size: medium;
  font-weight: 400;
}
.note {
  line-height: 0%;
  font-size: small;
  font-weight: 200;
}
.list > .note {
  line-height: normal;
}