* {
  /* Added since appbar might be in the way */
  scroll-margin-top: 6rem;
  scroll-snap-margin-top: 6rem; /* For iOS support */
}

body {
  overflow-x: hidden;
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1000px !important;
  }
}

.f-navbar {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
    background-color 0.3s ease-in-out;
}

.f-navbar-icon {
  height: 3rem;
  width: 3rem;
}

.f-navbar-hidden {
  transform: translateY(-150%);
}

#cookie .f-cookie {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  border-radius: 0.75rem;
}

#cookie.f-cookie--wrapper {
  z-index: 99999;
  max-width: 38rem;
  width: 100%;
}

#languageSwitcher .list-group-item {
  padding: 0;
  overflow: hidden;
}

#languageSwitcher button {
  border-radius: 0;
}

.fabs {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 99999;

  display: grid;
  gap: 0.5rem;
}

.fabs .fab {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 3.5rem;
  width: 3.5rem;
  border-radius: 999rem !important;

  transform: translateX(0);
  transition: transform 300ms ease-in-out, background-color 100ms ease-in-out,
    box-shadow 100ms ease-in-out;
}

.fabs .fab span {
  margin: 0;
}

.fabs .fab.fab-hidden {
  transform: translateX(5rem);
}

#scrollToTop span {
  transform: translateY();
  transition: transform 300ms ease-in-out;
}

#scrollToTop:hover span {
  transform: translateY(-0.25rem);
}

/* Simple dark mode */
/* using media queries */
/* @media (prefers-color-scheme: dark) {
  html {
    filter: invert(100%);
  }

  .no-dark {
    filter: invert(100%);
  }
} */

/* using data attributes */
html[data-theme-dark="true"] {
  filter: invert(100%);
}

html[data-theme-dark="true"] .no-dark {
  filter: invert(100%);
}

html,
.no-dark {
  transition: filter 300ms ease-in-out;
  filter: invert(0%);
}

#footerNav ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  gap: 0.5rem;
}

#footerNav li {
  padding-left: 0;
  margin-left: 0;
  margin-top: 0;
}

#socialNav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#socialNav a {
  font-size: 1.25rem;
  display: grid;
  place-items: center;
  height: 1.75rem;
  width: 1.75rem;
}

#footerNav a,
#socialNav a {
  text-decoration: none;
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out,
    background-color 300ms ease-in-out;
}

#footerNav a:hover,
#socialNav a:hover {
  color: var(--bs-dark);
  background-color: var(--bs-light);
  box-shadow: 0 0 0 0.25rem var(--bs-light);
}

footer hr {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  width: calc(100% - 1.5rem) !important;
}

.divider {
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: 1rem 0 1rem 0;
  gap: 1rem;
  text-transform: uppercase;
  color: var(--f-colour-primary);
}

.divider:before,
.divider:after {
  content: "";
  flex: 1;
  flex-grow: 1;
  height: 0.1875rem;
  background-color: var(--f-colour-primary-light);
}

.f-footnote-anchor {
  text-decoration: none;
}

/* Override Bootstrap CSS Start */

:root {
  --f-colour-light: var(--bs-light);
  --f-colour-primary: #6d28d9;
  --f-colour-primary-hover: #5b21b6;
  --f-colour-primary-active: #7c3aed;
  --f-colour-primary-border: #c4b5fd;
  --f-colour-primary-light: #ede9fe;
  --f-rounded-default: 0.5rem;
  --f-rounded-factor: 1.5;
}

html a {
  color: var(--f-colour-primary);
}

html .text-primary,
.accordion-button:not(.collapsed),
.accordion-button.collapsed::after {
  color: var(--f-colour-primary) !important;
}

html .accordion-button:active,
html .accordion-button:focus,
html .btn:active,
html .btn:focus {
  box-shadow: 0 0 0 0.25rem var(--f-colour-primary-border) !important;
}

.accordion-button:not(.collapsed) {
  border-color: var(--f-colour-primary-border) !important;
  background-color: var(--f-colour-primary-light) !important;
}

.accordion-button::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" class="bi bi-chevron-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>') !important;
}

.accordion-button:not(.collapsed)::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="purple" class="bi bi-chevron-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>') !important;
}

html .bg-primary {
  background-color: var(--f-colour-primary) !important;
}

html .btn,
html .card,
html .list-group-item,
html .accordion-item,
html .accordion .accordion-item:only-child,
html .list-group > .list-group-item:only-child,
html .badge,
html .modal .modal-content {
  border-radius: calc(
    var(--f-rounded-default) * var(--f-rounded-factor)
  ) !important;
}

html .card-img-top,
html .accordion-item:first-of-type .accordion-button,
html .modal .modal-header {
  border-top-left-radius: calc(
    var(--f-rounded-default) * var(--f-rounded-factor)
  ) !important;
  border-top-right-radius: calc(
    var(--f-rounded-default) * var(--f-rounded-factor)
  ) !important;
}

html .card-footer:last-child,
html .modal .modal-footer {
  border-radius: 0px 0px
    calc(var(--f-rounded-default) * var(--f-rounded-factor))
    calc(var(--f-rounded-default) * var(--f-rounded-factor)) !important;
}

html .list-group-item > *:not(.badge) {
  border-radius: 0 !important;
}

html
  .list-group:not(.list-group-horizontal)
  > .list-group-item:first-child:not(:only-child),
.accordion > .accordion-item:first-child:not(:only-child) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

html
  .list-group:not(.list-group-horizontal)
  > .list-group-item:last-child:not(:only-child),
.accordion > .accordion-item:last-child:not(:only-child) {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

html
  .list-group:not(.list-group-horizontal)
  > .list-group-item:not(:first-child):not(:last-child),
.accordion > .accordion-item:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}

html .list-group-horizontal > .list-group-item:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

html .list-group-horizontal > .list-group-item:last-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

html .list-group-item.active {
  background-color: var(--f-colour-primary) !important;
  border-color: var(--f-colour-primary) !important;
}

html .btn {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

html .btn-lg {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

html .navbar-collapse {
  flex-grow: 0;
  gap: 2rem;
  justify-content: center;
}

html .btn-primary {
  background-color: var(--f-colour-primary) !important;
  border-color: var(--f-colour-primary) !important;
  transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out,
    color 100ms ease-in-out;
}

html .btn-primary:hover {
  background-color: var(--f-colour-primary-hover) !important;
}

html .btn-primary:active {
  background-color: var(--f-colour-primary-active) !important;
}

html .btn-outline-primary {
  border-color: var(--f-colour-primary) !important;
  color: var(--f-colour-primary) !important;
}

html .btn-outline-primary:hover {
  color: var(--f-colour-light) !important;
  background-color: var(--f-colour-primary-hover) !important;
}

html .btn-outline-primary:active {
  background-color: var(--f-colour-primary-active) !important;
}

html .list-group-item-action {
  transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out;
}
/* Override Bootstrap CSS End */

/* Custom Text Selection Colour */
::-moz-selection {
  /* Code for Firefox */
  background: #6c28d9cc;
  color: white;
}
::selection {
  background: #6c28d9cc;
  color: white;
}