:root {
  /* Colours  */
  --grey-50: 223 18% 98%;
  --grey-100: 223 18% 95%;
  --grey-200: 223 16% 85%;
  --grey-300: 223 14% 75%;
  --grey-400: 223 12% 65%;
  --grey-500: 223 10% 55%;
  --grey-600: 223 8% 45%;
  --grey-700: 223 6% 35%;
  --grey-800: 223 4% 25%;
  --grey-900: 223 2% 15%;
  --grey-950: 223 2% 8%;

  --white: 0 0% 98%;

  --orange: 22 84% 60%;
  --purple: 260 50% 40%;

  --pink: 328, 78%, 66%;
  --blue: 208, 68%, 51%;
  --green: 88, 68%, 51%;
  /* End colours */

  /* Default values */
  --spacing-1: 0.125rem;
  --spacing-2: 0.25rem;
  --spacing-3: 0.5rem;
  --spacing-4: 0.75rem;
  --spacing-5: 1rem;
  --spacing-6: 1.25rem;
  --spacing-7: 1.5rem;
  --spacing-8: 2rem;
  --spacing-9: 2.5rem;
  --spacing-10: 3rem;

  --font-size-s: 0.875rem;
  --font-size-m: 1rem;
  --font-size-l: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 3rem;
  --font-size-4xl: 4rem;
  /* End default values */

  --background: hsl(var(--grey-950));

  --bg-color-accent: hsl(var(--grey-800) / 0.3);
  --bg-pattern-size: 100px;

  --navbar-height: 5.5rem;
}

html {
  /* Sans-serif */
  font-family: Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
  /* Monospace */
  /* font-family: "Courier New", "Lucida Console", Monaco, monospace; */
  background: var(--background);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  color: hsl(var(--grey-50));
  line-height: 1.45em;
  margin: 0;
}

h1 {
  font-size: var(--font-size-3xl);
  padding-top: var(--spacing-5);
}

h2 {
  font-size: var(--font-size-2xl);
  padding-top: var(--spacing-4);
}

p {
  max-width: 65ch;
  padding-top: var(--spacing-2);
}

a,
a:visited {
  color: hsl(var(--white));
}

a.blue,
a.blue:visited {
  color: hsl(200, 100%, 70%);
}

footer {
  padding: var(--spacing-7) var(--spacing-7) var(--spacing-8) var(--spacing-10);
  background-color: hsl(var(--grey-900));
}

.fixed-width {
  width: 70rem;

  @media (max-width: 80rem) {
    width: 90%;
  }

  @media (max-width: 54rem) {
    width: 95%;
  }
}

.fixed-char-width {
  max-width: 70ch;
}

.border-box {
  box-sizing: border-box;
}

.pointer {
  cursor: pointer;
}

.cursor-blocked {
  cursor: not-allowed;
}

.block {
  display: block;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.align-items-start {
  align-items: start;
}

.self-stretch {
  align-self: stretch;
}

.fs-s {
  font-size: var(--font-size-s);
}

.fs-m {
  font-size: var(--font-size-m);
}

.fs-l {
  font-size: var(--font-size-l);
}

.fs-xl {
  font-size: var(--font-size-xl);
}

.fs-2xl {
  font-size: var(--font-size-2xl);
}

.fs-3xl {
  font-size: var(--font-size-3xl);
}

.fs-4xl {
  font-size: var(--font-size-4xl);
}

.fw-normal {
  font-weight: 500;
}

.semibold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

.text-primary {
  color: hsl(var(--grey-100));
}

.text-secondary {
  color: hsl(var(--grey-300));
}

.text-tertiary {
  color: hsl(var(--grey-500));
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.br-1 {
  border-radius: var(--spacing-1);
}

.br-2 {
  border-radius: var(--spacing-2);
}

.br-3 {
  border-radius: var(--spacing-3);
}

.br-4 {
  border-radius: var(--spacing-4);
}

.br-5 {
  border-radius: var(--spacing-5);
}

.br-6 {
  border-radius: var(--spacing-6);
}

.br-7 {
  border-radius: var(--spacing-7);
}

.br-8 {
  border-radius: var(--spacing-8);
}

.br-9 {
  border-radius: var(--spacing-9);
}

.br-10 {
  border-radius: var(--spacing-10);
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: var(--spacing-1);
}

.p-2 {
  padding: var(--spacing-2);
}

.p-3 {
  padding: var(--spacing-3);
}

.p-4 {
  padding: var(--spacing-4);
}

.p-5 {
  padding: var(--spacing-5);
}

.p-6 {
  padding: var(--spacing-6);
}

.p-7 {
  padding: var(--spacing-7);
}

.p-8 {
  padding: var(--spacing-8);
}

.p-9 {
  padding: var(--spacing-9);
}

.p-10 {
  padding: var(--spacing-10);
}

.pb-1 {
  padding-bottom: var(--spacing-1);
}

.pb-2 {
  padding-bottom: var(--spacing-2);
}

.pb-3 {
  padding-bottom: var(--spacing-3);
}

.pb-4 {
  padding-bottom: var(--spacing-4);
}

.pb-5 {
  padding-bottom: var(--spacing-5);
}

.pb-6 {
  padding-bottom: var(--spacing-6);
}

.pb-7 {
  padding-bottom: var(--spacing-7);
}

.pb-8 {
  padding-bottom: var(--spacing-8);
}

.pb-9 {
  padding-bottom: var(--spacing-9);
}

.pb-10 {
  padding-bottom: var(--spacing-10);
}

.pl-0 {
  padding-left: 0;
}

.pl-1 {
  padding-left: var(--spacing-1);
}

.pl-2 {
  padding-left: var(--spacing-2);
}

.pl-3 {
  padding-left: var(--spacing-3);
}

.pl-4 {
  padding-left: var(--spacing-4);
}

.pl-5 {
  padding-left: var(--spacing-5);
}

.pl-6 {
  padding-left: var(--spacing-6);
}

.pl-7 {
  padding-left: var(--spacing-7);
}

.pl-8 {
  padding-left: var(--spacing-8);
}

.pl-9 {
  padding-left: var(--spacing-9);
}

.pl-10 {
  padding-left: var(--spacing-10);
}

.pr-1 {
  padding-right: var(--spacing-1);
}

.pr-2 {
  padding-right: var(--spacing-2);
}

.pr-3 {
  padding-right: var(--spacing-3);
}

.pr-4 {
  padding-right: var(--spacing-4);
}

.pr-5 {
  padding-right: var(--spacing-5);
}

.pr-6 {
  padding-right: var(--spacing-6);
}

.pr-7 {
  padding-right: var(--spacing-7);
}

.pr-8 {
  padding-right: var(--spacing-8);
}

.pr-9 {
  padding-right: var(--spacing-9);
}

.pr-10 {
  padding-right: var(--spacing-10);
}

.pt-0 {
  padding-top: var(--spacing-1);
}

.pt-1 {
  padding-top: var(--spacing-1);
}

.pt-2 {
  padding-top: var(--spacing-2);
}

.pt-3 {
  padding-top: var(--spacing-3);
}

.pt-4 {
  padding-top: var(--spacing-4);
}

.pt-5 {
  padding-top: var(--spacing-5);
}

.pt-6 {
  padding-top: var(--spacing-6);
}

.pt-7 {
  padding-top: var(--spacing-7);
}

.pt-8 {
  padding-top: var(--spacing-8);
}

.pt-9 {
  padding-top: var(--spacing-9);
}

.pt-10 {
  padding-top: var(--spacing-10);
}

.px-1 {
  padding-inline: var(--spacing-1);
}

.px-2 {
  padding-inline: var(--spacing-2);
}

.px-3 {
  padding-inline: var(--spacing-3);
}

.px-4 {
  padding-inline: var(--spacing-4);
}

.px-5 {
  padding-inline: var(--spacing-5);
}

.px-6 {
  padding-inline: var(--spacing-6);
}

.px-7 {
  padding-inline: var(--spacing-7);
}

.px-8 {
  padding-inline: var(--spacing-8);
}

.px-9 {
  padding-inline: var(--spacing-9);
}

.px-10 {
  padding-inline: var(--spacing-10);
}

.py-1 {
  padding-block: var(--spacing-1);
}

.py-2 {
  padding-block: var(--spacing-2);
}

.py-3 {
  padding-block: var(--spacing-3);
}

.py-4 {
  padding-block: var(--spacing-4);
}

.py-5 {
  padding-block: var(--spacing-5);
}

.py-6 {
  padding-block: var(--spacing-6);
}

.py-7 {
  padding-block: var(--spacing-7);
}

.py-8 {
  padding-block: var(--spacing-8);
}

.py-9 {
  padding-block: var(--spacing-9);
}

.py-10 {
  padding-block: var(--spacing-10);
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: var(--spacing-1);
}

.m-2 {
  margin: var(--spacing-2);
}

.m-3 {
  margin: var(--spacing-3);
}

.m-4 {
  margin: var(--spacing-4);
}

.m-5 {
  margin: var(--spacing-5);
}

.m-6 {
  margin: var(--spacing-6);
}

.m-7 {
  margin: var(--spacing-7);
}

.m-8 {
  margin: var(--spacing-8);
}

.m-9 {
  margin: var(--spacing-9);
}

.m-10 {
  margin: var(--spacing-10);
}

.ml-1 {
  margin-left: var(--spacing-1);
}

.ml-2 {
  margin-left: var(--spacing-2);
}

.ml-3 {
  margin-left: var(--spacing-3);
}

.ml-4 {
  margin-left: var(--spacing-4);
}

.ml-5 {
  margin-left: var(--spacing-5);
}

.ml-6 {
  margin-left: var(--spacing-6);
}

.ml-7 {
  margin-left: var(--spacing-7);
}

.ml-8 {
  margin-left: var(--spacing-8);
}

.ml-9 {
  margin-left: var(--spacing-9);
}

.ml-10 {
  margin-left: var(--spacing-10);
}

.mt-1 {
  margin-top: var(--spacing-1);
}

.mt-2 {
  margin-top: var(--spacing-2);
}

.mt-3 {
  margin-top: var(--spacing-3);
}

.mt-4 {
  margin-top: var(--spacing-4);
}

.mt-5 {
  margin-top: var(--spacing-5);
}

.mt-6 {
  margin-top: var(--spacing-6);
}

.mt-7 {
  margin-top: var(--spacing-7);
}

.mt-8 {
  margin-top: var(--spacing-8);
}

.mt-9 {
  margin-top: var(--spacing-9);
}

.mt-10 {
  margin-top: var(--spacing-10);
}

.mx-auto {
  margin-inline: auto;
}

.mx-1 {
  margin-inline: var(--spacing-1);
}

.mx-2 {
  margin-inline: var(--spacing-2);
}

.mx-3 {
  margin-inline: var(--spacing-3);
}

.mx-4 {
  margin-inline: var(--spacing-4);
}

.mx-5 {
  margin-inline: var(--spacing-5);
}

.mx-6 {
  margin-inline: var(--spacing-6);
}

.mx-7 {
  margin-inline: var(--spacing-7);
}

.mx-8 {
  margin-inline: var(--spacing-8);
}

.mx-9 {
  margin-inline: var(--spacing-9);
}

.mx-10 {
  margin-inline: var(--spacing-10);
}

.gap-1 {
  gap: var(--spacing-1);
}

.gap-2 {
  gap: var(--spacing-2);
}

.gap-3 {
  gap: var(--spacing-3);
}

.gap-4 {
  gap: var(--spacing-4);
}

.gap-5 {
  gap: var(--spacing-5);
}

.gap-6 {
  gap: var(--spacing-6);
}

.gap-7 {
  gap: var(--spacing-7);
}

.gap-8 {
  gap: var(--spacing-8);
}

.gap-9 {
  gap: var(--spacing-9);
}

.gap-10 {
  gap: var(--spacing-10);
}

.h-100 {
  height: 100%;
}

.fit-content {
  width: fit-content;
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.w-100 {
  width: 100%;
}