@import url("https://cdn.rawgit.com/mfd/f3d96ec7f0e8f034cc22ea73b3797b59/raw/856f1dbb8d807aabceb80b6d4f94b464df461b3e/gotham.css");
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

/* Some basic styling as per W3C standards mixed with some designer favorites */
* {
  /* Brand colorscheme */
  --brand: hsl(18, 98%, 56%);
  --brand-hue: 18;
  --brand-saturation: 98%;
  --brand-lightness: 56%;
  /* Light */
  --brand-light: hsl(
    var(--brand-hue) var(--brand-saturation) var(--brand-lightness)
  );
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
  --shadow-strength-light: 0.02;
  /* Dark */
  --brand-dark: hsl(
    var(--brand-hue) calc(var(--brand-saturation) / 2)
      calc(var(--brand-lightness) / 1.5)
  );
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5% 20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: 0.8;
  /* Dim */
  --brand-dim: hsl(
    var(--brand-hue) calc(var(--brand-saturation) / 1.25)
      calc(var(--brand-lightness) / 1.25)
  );
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5% 30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: 0.2;
  /* Font weights */
  --weight-thin: 100;
  --weight-extra-light: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi-bold: 600;
  --weight-bold: 700;
  --weight-extra-bold: 800;
  --weight-black: 900;
  /* Basic settings */
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: var(--weight-regular);
  font-style: normal;
  
  /* Material 3 Reference Tokens - Typeface */
  --md-ref-typeface-brand: "Raleway", sans-serif;
  --md-ref-typeface-plain: "Raleway", sans-serif;
  
  /* Material 3 System Tokens - Shape */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
}

@media (prefers-color-scheme: light) {
  @import url("theme/light.css");
  :root {
    color-scheme: light;
    --surface-shadow-light: var(--brand-hue) 10% 20%;
    --shadow-strength-light: 0.02;
    --brand: var(--brand-light);
    --text1: var(--text1-light);
    --text2: var(--text2-light);
    --surface1: var(--surface1-light);
    --surface2: var(--surface2-light);
    --surface3: var(--surface3-light);
    --surface4: var(--surface4-light);
    --surface-shadow: var(--surface-shadow-light);
    --shadow-strength: var(--shadow-strength-light);
    
    /* Material 3 Light Theme Color Tokens */
    --md-sys-color-primary: hsl(18, 98%, 56%);
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: hsl(18, 95%, 88%);
    --md-sys-color-on-primary-container: hsl(18, 98%, 16%);
    --md-sys-color-secondary: hsl(18, 60%, 50%);
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: hsl(18, 60%, 90%);
    --md-sys-color-on-secondary-container: hsl(18, 60%, 20%);
    --md-sys-color-tertiary: hsl(300, 98%, 56%);
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: hsl(300, 95%, 90%);
    --md-sys-color-on-tertiary-container: hsl(300, 98%, 20%);
    --md-sys-color-error: #BA1A1A;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #FFDAD6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-background: var(--surface2-light);
    --md-sys-color-on-background: var(--text1-light);
    --md-sys-color-surface: var(--surface2-light);
    --md-sys-color-on-surface: var(--text1-light);
    --md-sys-color-surface-variant: var(--surface3-light);
    --md-sys-color-on-surface-variant: var(--text2-light);
    --md-sys-color-surface-container-lowest: var(--surface1-light);
    --md-sys-color-surface-container-low: var(--surface2-light);
    --md-sys-color-surface-container: var(--surface3-light);
    --md-sys-color-surface-container-high: var(--surface4-light);
    --md-sys-color-surface-container-highest: hsl(var(--brand-hue) 20% 80%);
    --md-sys-color-surface-dim: hsl(var(--brand-hue) 20% 85%);
    --md-sys-color-surface-bright: hsl(var(--brand-hue) 25% 98%);
    --md-sys-color-outline: hsl(var(--brand-hue) 20% 60%);
    --md-sys-color-outline-variant: hsl(var(--brand-hue) 20% 80%);
    --md-sys-color-shadow: rgba(0, 0, 0, 0.3);
    --md-sys-color-scrim: rgba(0, 0, 0, 0.5);
    --md-sys-color-inverse-surface: var(--surface1-dark);
    --md-sys-color-inverse-on-surface: var(--text1-dark);
    --md-sys-color-inverse-primary: hsl(18, 98%, 76%);
  }
  @media (prefers-contrast: more) {
    @import url("theme/light-hc.css");
    :root {
      color-scheme: light;
      --surface-shadow-light: var(--brand-hue) 10% 20%;
      --shadow-strength-light: 0.02;
      --brand: var(--brand-light);
      --text1: var(--text1-light);
      --text2: var(--text2-light);
      --surface1: var(--surface1-light);
      --surface2: var(--surface2-light);
      --surface3: var(--surface3-light);
      --surface4: var(--surface4-light);
      --surface-shadow: var(--surface-shadow-light);
      --shadow-strength: var(--shadow-strength-light);
    }
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    @import url("theme/dark.css");
    color-scheme: dark;
    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
    
    /* Material 3 Dark Theme Color Tokens */
    --md-sys-color-primary: hsl(18, 98%, 70%);
    --md-sys-color-on-primary: hsl(18, 98%, 20%);
    --md-sys-color-primary-container: hsl(18, 98%, 30%);
    --md-sys-color-on-primary-container: hsl(18, 95%, 88%);
    --md-sys-color-secondary: hsl(18, 60%, 70%);
    --md-sys-color-on-secondary: hsl(18, 60%, 25%);
    --md-sys-color-secondary-container: hsl(18, 60%, 35%);
    --md-sys-color-on-secondary-container: hsl(18, 60%, 90%);
    --md-sys-color-tertiary: hsl(300, 98%, 80%);
    --md-sys-color-on-tertiary: hsl(300, 98%, 30%);
    --md-sys-color-tertiary-container: hsl(300, 98%, 40%);
    --md-sys-color-on-tertiary-container: hsl(300, 95%, 92%);
    --md-sys-color-error: #FFB4AB;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000A;
    --md-sys-color-on-error-container: #FFDAD6;
    --md-sys-color-background: var(--surface1-dark);
    --md-sys-color-on-background: var(--text1-dark);
    --md-sys-color-surface: var(--surface2-dark);
    --md-sys-color-on-surface: var(--text1-dark);
    --md-sys-color-surface-variant: var(--surface3-dark);
    --md-sys-color-on-surface-variant: var(--text2-dark);
    --md-sys-color-surface-container-lowest: hsl(var(--brand-hue) 10% 8%);
    --md-sys-color-surface-container-low: var(--surface1-dark);
    --md-sys-color-surface-container: var(--surface2-dark);
    --md-sys-color-surface-container-high: var(--surface3-dark);
    --md-sys-color-surface-container-highest: var(--surface4-dark);
    --md-sys-color-surface-dim: var(--surface1-dark);
    --md-sys-color-surface-bright: hsl(var(--brand-hue) 10% 25%);
    --md-sys-color-outline: hsl(var(--brand-hue) 15% 50%);
    --md-sys-color-outline-variant: hsl(var(--brand-hue) 10% 35%);
    --md-sys-color-shadow: rgba(0, 0, 0, 0.8);
    --md-sys-color-scrim: rgba(0, 0, 0, 0.9);
    --md-sys-color-inverse-surface: var(--surface2-light);
    --md-sys-color-inverse-on-surface: var(--text1-light);
    --md-sys-color-inverse-primary: hsl(18, 98%, 30%);
  }
  @media (prefers-contrast: more) {
    @import url("theme/dark-hc.css");
    :root {
      color-scheme: dark;
      --brand: var(--brand-dark);
      --text1: var(--text1-dark);
      --text2: var(--text2-dark);
      --surface1: var(--surface1-dark);
      --surface2: var(--surface2-dark);
      --surface3: var(--surface3-dark);
      --surface4: var(--surface4-dark);
      --surface-shadow: var(--surface-shadow-dark);
      --shadow-strength: var(--shadow-strength-dark);
    }
  }
}

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}

.rad-shadow {
  box-shadow:
    0 2.8px 2.2px
      hsl(var(--surface-shadow) / calc(var(--shadow-strength) + 0.03)),
    0 6.7px 5.3px
      hsl(var(--surface-shadow) / calc(var(--shadow-strength) + 0.01)),
    0 12.5px 10px
      hsl(var(--surface-shadow) / calc(var(--shadow-strength) + 0.02)),
    0 22.3px 17.9px
      hsl(var(--surface-shadow) / calc(var(--shadow-strength) + 0.02)),
    0 41.8px 33.4px
      hsl(var(--surface-shadow) / calc(var(--shadow-strength) + 0.03)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength));
}

/* Material 3 Typescale Tokens */
:root {
  /* Display */
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-weight: var(--weight-regular);
  
  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-weight: var(--weight-regular);
  
  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-weight: var(--weight-regular);
  
  /* Headline */
  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-weight: var(--weight-regular);
  
  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-weight: var(--weight-regular);
  
  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-weight: var(--weight-regular);
  
  /* Title */
  --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-weight: var(--weight-regular);
  
  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-weight: var(--weight-medium);
  
  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-weight: var(--weight-medium);
  
  /* Body */
  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-weight: var(--weight-regular);
  
  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-weight: var(--weight-regular);
  
  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-weight: var(--weight-regular);
  
  /* Label */
  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-weight: var(--weight-medium);
  
  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-weight: var(--weight-medium);
  
  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-weight: var(--weight-medium);
}