/* static/css/styles.css */

@import "normalize.css";

/*@import "@fontsource/fira-mono";*/

/*
@media screen and (max-width: 991px) {
}

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 479px) {
}
*/

:root {
  /* Colour palette for website UI */
  --colour-red-pastel: #F88379;
  --colour-red-saturated: oklch(0.55 0.17 40);
  --colour-maroon-saturated: oklch(0.3887 0.134 26.07);
  --colour-maroon-saturated-faded: oklch(0.6314 0.1849 33.52 / 0.2);
  --colour-orange-pastel: #FFD580;
  --colour-orange-saturated: oklch(0.8057 0.166 73.15);
  --colour-orange-saturated-faded: oklch(0.80572 0.16603 73.151 / 0.2);
  --colour-yellow-pastel: #FFEE8C;
  --colour-yellow-saturated: #FBEC5D;
  --colour-green-pastel: #9FE2BF;
  --colour-green-saturated: oklch(76% .177 163.223);
  --colour-blue-pastel: #6495ED;
  --colour-blue-saturated: #0070F3;
  --colour-purple-pastel: #7078EC;
  --colour-purple-saturated: #434DE7;
  --colour-white: oklch(1 0 0);
  --colour-white-off: oklch(0.98 0 0);
  --colour-white-dirty: oklch(0.925 0 0);
  --colour-grey-light: oklch(0.875 0 0);
  --colour-grey: #C6C6C6;
  --colour-grey-dark: #777A82;
  --colour-grey-dirty: #7F7884;
  --colour-black-dirty: oklch(0.3493 0.023 311.2);
  --colour-black: oklch(0.2088 0.0281 262.38);

  --colour-linen: oklch(0.9 0.03 78);

  --colour-background: var(--colour-white);
  --colour-box: var(--colour-white);
  --colour-border: var(--colour-white-dirty);
  --colour-placeholder: var(--colour-grey);

  --colour-text-bright: var(--colour-background);
  --colour-text-light: var(--colour-grey-dirty);
  --colour-text: var(--colour-black-dirty);

  --colour-success: var(--colour-green-saturated);
  --colour-error: var(--colour-red-saturated);

  --colour-shadow: color-mix(in oklab, var(--colour-text) 10%, transparent);
  --colour-navigation-background: color-mix(in oklab, var(--colour-background) 85%, transparent);

  /*
  --column-width: 42rem;
  --column-margin-top: 4rem;
  */

  /* Transition Styles */
  --transition-slow: 200ms ease-in, outline 1ms;
  --transition-fast: 150ms ease-in-out, outline 1ms;

  /* Typography */
  --font-body: "IBM Plex Sans Condensed", sans-serif;
  --font-heading: Merriweather, serif;
  --font-accent: "Goblin One", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Sizing */
  --spacing: 0.25rem;
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 16px;
  --border-radius-circular: 3.40282e38px;

  /* Theme Colours */
  --colour-theme-1: var(--colour-maroon-saturated);
  --colour-theme-1-faded: var(--colour-maroon-saturated-faded);
  --colour-theme-2: var(--colour-text);
  --colour-theme-3: var(--colour-linen);
}

* {
  /* 
   Apply border-box model to all elements for consistent sizing and layout.
   This ensures that padding and borders are included in the element's total width and height.
   Vendor prefixes are included for compatibility with older browsers.
  */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;

  font-size: 16px;

  /*overflow: hidden;*/
}

body {
  background-color: var(--colour-background);
  background-attachment: fixed;

  color: var(--colour-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.25em;

  scrollbar-color: var(--colour-theme-1) var(--colour-background);

}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
  font-family: var(--font-heading);
  line-height: 1.25em;
  margin: 0.25em 0;
}

p,
.paragraph {
  margin: 0 0 0.5rem 0;
  font-weight: 400;
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  line-height: 1.75em;
}

a {
  color: var(--colour-theme-1);
  font-weight: 600;
  text-decoration: underline;
}

a:hover {
  color: parent;
  text-decoration: underline;
}

h1,
.h1 {
  font-size: clamp(1.75rem, calc(4vw + 0.5rem), 3rem);
  font-weight: 400;
}

h2,
.h2 {
  font-size: clamp(1.5rem, 4vw + 0.25rem, 2.5rem);
  font-weight: 400;
}

h3,
.h3 {
  font-size: clamp(1.33rem, 3vw + 0.5rem, 2rem);
  font-weight: 400;
}

h4,
.h4 {
  font-size: clamp(1.25rem, 3vw + 0.25rem, 1.5rem);
  font-weight: 400;
}

h5,
.h5 {
  font-size: clamp(1rem, 2vw + 0.5rem, 1.25rem);
  font-weight: 500;
}

h6,
.h6 {
  font-size: clamp(0.75rem, 2vw + 0.25rem, 1rem);
  font-weight: 500;
}

pre {
  box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.45);

  padding: 0.5em;

  overflow-x: auto;

  color: var(--colour-text);
  font-family: var(--font-mono);
  font-size: 1rem;
}

input,
button {
  border: none;

  font-size: inherit;
  font-family: inherit;
}


img {
  display: inline-block;

  max-width: 100%;

  vertical-align: middle;

  background-color: var(--colour-grey-light);
}

.visually-hidden {
  position: absolute;

  border: 0;

  clip: rect(0 0 0 0);

  margin: 0;

  width: 1px;
  height: auto;

  padding: 0;

  overflow: hidden;

  white-space: nowrap;
}

.hide {
  display: none;
}

li {
  margin-bottom: 0.5em;
  line-height: 1.4em;
}