:root {
  --primaryColor: #C89BFF;
  --secondaryColor: #FFAAAE;
  --tertiaryColor: #FFFF64;
  --quaternaryColor: #FF545D;
  --headerColor: var(--primaryColor);
  --menuColor: var(--tertiaryColor);
}

body {
  background-color: var(--primaryColor);
}

.credit {
  background-color: var(--quaternaryColor);
  color: white;
}

a {
  color: inherit;
}

footer {
  background-color: black;
  color: #E3CDFF;
}

#content {
  background-color: var(--primaryColor);
}

.accordion-body,
.content {
  background-color: var(--secondaryColor);
}

body {
  margin-top: calc(var(--spacing) + var(--menuHeight));
}

.navbar {
  padding: var(--spacing);
  padding-bottom: unset;
  margin-bottom: var(--spacing);
  display: flex;
  position: fixed;
  z-index: 3;
  width: 100%;
  top: 0;
  background-color: var(--headerColor);
}
.navbar .colorSwitchContainer {
  margin-left: auto;
  width: calc(var(--spacing));
  margin-right: calc(var(--spacing) / 2);
  margin-bottom: auto;
}
.navbar .colorSwitchContainer .colorSwitch {
  height: calc(var(--spacing) - 4px);
  width: calc(var(--spacing) - 4px);
  border: 2px solid black;
  border-radius: 100%;
}
.navbar .logo {
  margin: 0 !important;
  height: 103px;
  position: unset;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  scale: min(1, max(var(--scrollDistance) / 500 + 0.9, 0.9));
  transition-duration: 0.5s;
  transform-origin: top left;
}
.navbar .navbar-toggler {
  background-color: transparent;
  margin-bottom: auto;
  border: none;
  padding: 0;
  height: var(--spacing);
}
.navbar .navbar-toggler:focus {
  box-shadow: unset;
  outline: unset;
}
.navbar .navbar-toggler svg.navbar-toggler-icon {
  width: var(--spacing);
  height: var(--spacing);
  background-image: unset;
}
.navbar .menuContainer {
  border-top: var(--spacing) solid var(--headerColor);
  background-color: var(--menuColor);
  position: fixed;
  width: 100%;
  left: 0;
  top: var(--menuHeight);
  padding: var(--spacing);
}
.navbar .menuContainer .nav-link {
  padding: unset;
}
.navbar .menuContainer nav {
  width: fit-content;
  margin-left: auto;
}
.navbar .navbar-toggler {
  transform: rotate(0deg);
  transition: all 0.5s;
}
.navbar .menuContainer:not(.collapse) ~ .navbar-toggler, .navbar .menuContainer.show ~ .navbar-toggler {
  transform: rotate(135deg) !important;
}
.navbar .menuContainer.collapsing {
  padding-top: 0px;
  padding-bottom: 0px;
}
.navbar .menuContainer.collapsing[style^=height] {
  padding-top: var(--spacing);
  padding-bottom: var(--spacing);
}
.navbar .menuContainer.collapsing:not([style^=height]) + .navbar-toggler {
  transform: rotate(0deg) !important;
}

#containerElem {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  overflow-x: hidden;
  left: calc(var(--spacing) * -1px);
  right: calc(var(--spacing) * -1px);
  position: absolute;
}

#scrollContainer {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding-top: calc(var(--spacing) * 1px);
  padding-bottom: calc(var(--spacing) * 1px);
  height: 2em;
}

#list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  margin-left: 0;
}
#list .item {
  flex-shrink: 0;
  text-align: center;
}

#scrollContainer {
  background-color: #FFAAAE;
  transform: rotate(-1deg);
  transform-origin: left;
}

.bottomSpacing {
  width: 100%;
  height: var(--spacing);
  position: fixed;
  left: 0;
  top: var(--menuHeight);
  background-color: var(--primaryColor);
  z-index: 1;
}

.headerContainer {
  padding-bottom: calc(var(--fontSize) * 1.5) !important;
}

#scrollContainer {
  position: absolute;
  z-index: 2;
  height: calc(var(--fontSize) * 1.5) !important;
}