@import url('https://fonts.googleapis.com/css2?family=Beau+Rivage&family=Dancing+Script:wght@400..700&display=swap');
/* Attempt at new CSS3 Reset */
:root {

/* ///=========== Site Base Colours ============\\\ */
    --base-colour-white: hsl(0, 0%, 100%);
    --base-colour-rebeccapurple: hsl(270, 50%, 40%);
    --base-colour-gold: hsl(51, 100%, 50%);
    --base-colour-green: hsl(120, 100%, 25%);
    --base-colour-red: hsl(0, 100%, 50%);
    --base-colour-orange: hsl(39, 100%, 50%);
    --base-colour-beige: hsl(60, 56%, 91%);
    --brandBlue: hsl(210, 100%, 56%);
/* \\\=========== Site Base Colours ============/// */
    --upma-bdr: hsl(from var(--base-colour-rebeccapurple) h calc(s - 80) l)
    --brandBlue-light: hsl(from var(--brandBlue) h s calc(l + 12));
    --brandBlue-transparency: color-mix(in srgb, var(--brandBlue), transparent 30%);

    --brandBlue-sat20: hsl(from var(--brandBlue) h calc(s - 80) l);
    --brandBlue-sat50: hsl(from var(--brandBlue) h calc(s - 50) l);
    --brandBlue-sat80: hsl(from var(--brandBlue) h calc(s - 20) l);
    --brandBlue-transparency: color-mix(in srgb, var(--brandBlue), transparent 30%);

 /* ==// Color Scheme \\== */
    --clr-LG-primary: linear-gradient(45deg, rgba(0, 0, 255, 0.5), rgba(218, 165, 32, 0.5),  rgba(128, 0, 128, 0.5));
    --clr-transparent: transparent;
    --clr-primary-white: hsl(0, 0%, 100%);
    --clr-portrait-DS: hsla(240, 78%, 25%, 0.5);
    --clr-portrait-DS-2: hsla(29, 41%, 12%, 0.5);
    --clr-portrait-BG: hsl(300, 100%, 25%);
    --clr-titleHeader:hsl(212, 100%, 59%);
    --clr-BTN-BG-hover: hsl(192, 100%, 42%);
    --clr-primary-blue-fill: hsl(189, 72%, 50%);
    --clr-BTN-border-hover: rgb(0, 145, 225);
    --clr-BTN-boxShadow-hover: rgb(0, 197, 193);
    --clr-mediaM-BG:hsl(212, 90%, 37%);
    --clr-primary-green: hsl(120, 100%, 25%);
    --clr-primary-beige: hsl(60, 56%, 91%);
    

    --clr-primary-blue: hsl(240, 100%, 50%);
    --clr-primary-blue-accent: hsla(240, 100%, 50%, 0.3);
    --clr-primary-blue-accent-fill: hsla(240, 49%, 52%, 0.5);
    --clr-primary-blue-accent-light: hsl(192, 74%, 49%);
    --clr-accent-blue: hsl(184, 100%, 50%);

    --clr-primary-purple: hsl(300, 100%, 25%);
    --clr-primary-purple-accent: hsla(300, 100%, 25%, 0.3);
    --clr-primary-purple-PN-BG: hsla(295, 85%, 46%, 0.5);
    --clr-primary-purple-highlight-BG: rgba(255, 0, 255, 0.5);
    --clr-primary-purple-accent-text: rgb(243, 128, 238);

    --clr-primary-red:  0 0.2vw 0.2vw hsl(0, 100%, 50%);

    --clr-primary-red-accent-BG: hsl(0, 32%, 71%);

    --clr-primary-gold: hsl(51, 100%, 50%);
    --clr-primary-gold-accent-BG: rgba(218, 165, 32, 0.5);

    
    --titleShadowHover: 0 0.2vw 0.2vw var(--clr-accent-blue);
    --bodyBackGround:linear-gradient(127deg, #ff6f3a, #3a8a8d, #a03aff, #ffce3a);

    --clr-primary-yellow-accent-BG: rgb(255, 250, 222);
    --clr-primary-yellow-accent-BG-dark:  rgba(65, 47, 2, 0.8);
    --clr-primary-orange: rgb(255, 165, 0);
    --clr-primary-orange-accent: rgb(218, 165, 32);
    --esc: hsla(0, 0%, 100%, 0.1);
    --transparent: transparent;
        
    /* ==// Weights and Measures \\== */
    --pad05Rem: 0.5rem;
    --padding-1TB_2LR: calc(var(--inline-padding) / 2) var(--inline-padding);
    --maxWidth-feeInfo: calc((100svw - var(--pad05Rem) - 2rem) * .65);
    --maxWidth: 100svw;
    --min-width:100%;
    --pad-div: 0.5rem 1rem;
    --pad25Rem: 0.25rem;
}

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
      scroll-behavior: smooth;
      scroll-padding-top: 3rem;
  }
}

@function --opacity(--colour, --value) {
    result: hsl(from var(--colour) h s l / var(--value));
}

@function --saturation(--colour, --value) {
    result: hsl(from var(--colour) h calc(s - var(--value)) l);
}

@function --hueMinus(--colour, --value) {
    result: hsl(from var(--colour) calc(h - var(--value)) s l);
}

@function --huePlus(--colour, --value) {
    result: hsl(from var(--colour) calc(h + var(--value)) s l);
}

 @function --colourCorrectPlus(--colour, --value --value2 --value3) {
    result: hsl(from var(--colour) calc(h + var(--value)) calc(s + var(--value2)) calc(l + --value3));
}

@function --colourCorrectMinus(--colour, --value --value2 --value32) {
    result: hsl(from var(--colour) calc(h - var(--value)) calc(s - var(--value2)) calc(l - --value3));
} 

@function --conditional-radius(--radius, --edge-dist: 0.25rem) {
    result: clamp(0rem, ((100svw - var(--edge-dist) - 100%) * 9999, var(--radius)));
}

html,
body {
    min-width: 100vw;
    min-height: 100svh;
}

*,
*::after,
*::before {
    padding: 0;
    margin: 0;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
    outline: none;
    border: none;
}

img {
    max-width: 100%;
    display: inline-block;
}


button {
    cursor: pointer;
}


li {
    list-style: none;
    text-align: center;
  }
  
  a {
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.2rem;
    padding: 0.5rem 0.5rem;
    font-size: clamp(1rem, 1ch, 1.25rem);
  }
  
  p {
      max-width: 75ch;
      line-height: 2;
      text-wrap: pretty
  }
  
  h1, h2, h3, h4, h5, h6 {
      text-wrap: balance;
      text-align: center;
  }


.base__colour {
    background-color: var(--brandBlue);
    border: 0.2rem groove var(--base-colour-rebeccapurple);
    outline: 0.2rem ridge var(var(base-colour-gold));
    grid-column: 1 / -1;
    margin-inline: auto;

}

.light {
    background-color: var(--brandBlue-transparency); 
}

.transparency {
    background-color: var(--brandBlue-light);
}

.opacity {
    background-color: --opacity(var(--brandBlue), 60%); 
}

.sat20 {
    background-color: --saturation(var(--brandBlue), 80); 
}

.sat50 {
    background-color: --saturation(var(--brandBlue), 50); 
}

.sat80 {
    background-color: --saturation(var(--brandBlue), 20); 
}

.hue_20 {
    background-color: --hueMinus(var(--brandBlue), 20); 
}

.hue-10 {
    background-color: --hueMinus(var(--brandBlue), 10); 
}

.hue-30 {
    background-color: --hueMinus(var(--brandBlue), 40); 
}


.hue20 {
    background-color: --huePlus(var(--brandBlue), 20); 
}

.hue10 {
    background-color: --huePlus(var(--brandBlue), 10); 
}

.hue30 {
    background-color: --huePlus(var(--brandBlue), 40); 
}

.ccP {
    background-color: --colourCorrectPlus(var(--brandBlue), 40, 20, 20); 
}

.ccM {
    background-color: --colourCorrectMinus(var(--brandBlue), 40, 20, 20); 
}