/*

GLOBAL STYLES
1_ COLOR VARIABLES 
2_ FLUID TYPE VARIABLES
3_ FLUID SPACING VARIABLES
4_ BODY AND FONT FACE
5_ TYPE ELEMENTS
6_ OTHER GLOBAL ELEMENTS 

*/

/********************************************************/

/************ 1_ COLOR VARIABLES  ************/        

/*********************************************************/


    :root {
       color-scheme: light;
      --brand: rgb(8, 45, 115);
      --accent: hsl(41, 90%, 54%);
      --secondary: hsl(128, 45%, 23%);
      --tertiary: hsl(358, 53%, 39%);  
      --text:hsl(220, 29%, 18%);
      --text-alt:hsl(220, 91%, 95%);
      --surface:hsl(0, 0%, 98%);     
      --shadow:hsl(0, 0%, 80%);
      --shadow-2: hsl(0, 0%, 90%);
    }    


  /* for dark theming  */

@media (prefers-color-scheme: dark) { 
  :root{ 
    color-scheme: dark;
    --brand: hsl(219, 100%, 81%);  
    --tertiary: hsl(351, 100%, 72%);  
    --text:hsl(220, 91%, 96%);
    --text-alt:hsl(220, 87%, 6%);
    --surface:hsl(223, 19%, 15%);  
    --shadow:hsl(240, 4%, 78%);
    --shadow-2: hsl(224, 19%, 19%);
}

.logo{  
    filter: invert(41%) sepia(55%) saturate(4715%) hue-rotate(209deg) brightness(152%) contrast(61%);
}
}

/********************************************************/

/************ 2_ FLUID TYPE VARIABLES ************/     

/*********************************************************/



/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1280,22,1.25,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7483rem + 0.1646vw, 0.88rem);
  --step--1: clamp(0.9375rem, 0.8833rem + 0.2708vw, 1.1rem);
  --step-0: clamp(1.125rem, 1.0417rem + 0.4167vw, 1.375rem);
  --step-1: clamp(1.35rem, 1.2271rem + 0.6146vw, 1.7188rem);
  --step-2: clamp(1.62rem, 1.4439rem + 0.8807vw, 2.1484rem);
  --step-3: clamp(1.944rem, 1.6968rem + 1.2359vw, 2.6855rem);
  --step-4: clamp(2.3328rem, 1.9914rem + 1.7069vw, 3.3569rem);
  --step-5: clamp(2.7994rem, 2.3338rem + 2.328vw, 4.1962rem);
  --step-6: clamp(3.3592rem, 2.7306rem + 3.1433vw, 5.2452rem);
  --step-7: clamp(4.0311rem, 3.1893rem + 4.2091vw, 6.5565rem);
  --step-8: clamp(4.8373rem, 3.7178rem + 5.5972vw, 8.1956rem);
  --step-9: clamp(5.8048rem, 4.3248rem + 7.3997vw, 10.2445rem);
  --step-10: clamp(5.9657rem, 5.019rem + 9.7333vw, 12.8057rem);
}

/********************************************************/

/************ 3_ FLUID SPACING VARIABLES ************/

/*********************************************************/

/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1280,22,1.25,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|s-xl|s-2xl|s-3xl&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.2917rem + 0.1042vw, 0.375rem);
  --space-2xs: clamp(0.5625rem, 0.5208rem + 0.2083vw, 0.6875rem);
  --space-xs: clamp(0.875rem, 0.8125rem + 0.3125vw, 1.0625rem);
  --space-s: clamp(1.125rem, 1.0417rem + 0.4167vw, 1.375rem);
  --space-m: clamp(1.6875rem, 1.5625rem + 0.625vw, 2.0625rem);
  --space-l: clamp(2.25rem, 2.0833rem + 0.8333vw, 2.75rem);
  --space-xl: clamp(3.375rem, 3.125rem + 1.25vw, 4.125rem);
  --space-2xl: clamp(4.5rem, 4.1667rem + 1.6667vw, 5.5rem);
  --space-3xl: clamp(6.75rem, 6.25rem + 2.5vw, 8.25rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1875rem + 0.625vw, 0.6875rem);
  --space-2xs-xs: clamp(0.5625rem, 0.3958rem + 0.8333vw, 1.0625rem);
  --space-xs-s: clamp(0.875rem, 0.7083rem + 0.8333vw, 1.375rem);
  --space-s-m: clamp(1.125rem, 0.8125rem + 1.5625vw, 2.0625rem);
  --space-m-l: clamp(1.6875rem, 1.3333rem + 1.7708vw, 2.75rem);
  --space-l-xl: clamp(2.25rem, 1.625rem + 3.125vw, 4.125rem);
  --space-xl-2xl: clamp(3.375rem, 2.6667rem + 3.5417vw, 5.5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.25rem + 6.25vw, 8.25rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.5833rem + 2.7083vw, 2.75rem);
  --space-s-xl: clamp(1.125rem, 0.125rem + 5vw, 4.125rem);
  --space-s-2xl: clamp(1.125rem, -0.3333rem + 7.2917vw, 5.5rem);
  --space-s-3xl: clamp(1.125rem, -1.25rem + 11.875vw, 8.25rem);
}
/********************************************************/

/************ 4_ BODY AND FONT FACE ************/

/*********************************************************/


/* Body */

html {
  font-size: 95%;
  scrollbar-gutter: stable; /* stops the jumping when there is a short page with no scroll */
  background-color: var(--shadow); 
  max-width: 1920px;
  margin-inline: auto; 
  box-shadow: 0 0 5rem 1rem rgba(0, 0, 0, 0.1);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}


body {
  font-family:system-ui, sans-serif;
  font-size: var(--step-0);
  line-height: calc(1.4em + 0.5rem);
  background-color: var(--surface);
  color: var(--text);
  font-weight: 400; 
}


/********************************************************/


/************ 5_ TYPE ELEMENTS ************/

/*********************************************************/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:'Times New Roman', Times, serif;
  line-height:calc(1em + 0.5rem);
  text-wrap: balance;
  font-weight: 700;
}


h1 {
  font-size: var(--step-4); 
  margin-block-end: var(--space-s);
  text-transform: capitalize; 
  text-align: center;  
}

h2 {
  font-size: var(--step-3);
  text-transform: capitalize ;

}

h3 {
  font-size: var(--step-2);
}

h4 {
  font-size: var(--step-1);
  font-weight: 500;
  text-transform: capitalize; 
 
}

h5 {
  font-size: var(--step--1); 
  color: var(--tertiary);
  line-height:2.2;
  font-family: system-ui, sans-serif;    
  letter-spacing: .05rem;
  text-transform: uppercase;
}

h6 {
  font-size: var(--step--1);
}

p{
  margin-block: var(--space-xs);
  font-variant-numeric: oldstyle-nums;
}

small {
  font-size: var(--step--1);
  line-height: 1.5;
  display: inline-block;
}

a {
  color: var(--text);
  text-decoration-color: var(--tertiary);
}

a:hover {
  color: var(--tertiary);
}


a:active{
  position: relative;
  inset-block-start: 0.05rem;
  /* give all links a bounce on click. */
}

strong {
  font-weight: 700;
}

ul {
  margin-block-end: var(--space-s);
}

main li {  
  margin-inline-start: var(--space-s);
  line-height: calc(1.5em + 0.5rem);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
small,
li,
figcaption {
  max-inline-size: 65ch;
}


/********************************************************/


/************ 6_ OTHER GLOBAL ELEMENTS ************/

/*********************************************************/


hr {
    height: .01rem;
    background-color: var(--shadow);  
    border:none;
}
 

* {
  scrollbar-color: hsl(224, 19%, 15%) var(--shadow);
  scrollbar-width: auto;
}

::marker {
  color: var(--tertiary);
  font-size: var(--step-1);
}

::selection {
  color: var(--surface);
  background-color: var(--tertiary);
}
/* 
https://codepen.io/dwaumsley/pen/LYKVZNY */


blockquote {
  display: block; 
  padding: var(--space-s);
  position: relative;
  background-color: var(--surface);
  margin-inline-start: 6rem;  
}
blockquote:before {
  content: '\201C';
  position: absolute;
  inset-block-start: 6rem;
  inset-inline-start: -2rem;
  transform: translate(-70%, 0%); 
  width: min-content;  
  font-size:var(--step-10);
  font-family:Arial, sans-serif;
  color: var(--text);
  font-weight: 700;  
}

blockquote:after {
  content: attr(cite);
  display: block; 
  font-size: var(--step--1);
}


address {
  display: inline-block;
  font-style: italic;
}

figcaption {
  padding: 1rem;
  display: inline-block;
}

/* details and summary */

@media (prefers-reduced-motion: no-preference) {
  @keyframes show {
    from {
      transform: translateY(-8%);
    }
    to {
      transform: translateY(0%);
    }
  }

  @keyframes details-show {
    from {
      opacity: 0;
      transform: translateY(-1rem);
    }
  }

  details[open] > *:not(summary) {
    animation: details-show 0.5s ease-out;
  }
}

summary {
  cursor: pointer;
  background-color: var(--surface);
  padding: var(--space-s);
  margin-block-end: var(--space-s);
}

/* skip links and focus */

.skip-link {
  position: absolute;
  padding: 0.5rem;
  margin: 1rem;
  background-color: var(--accent);
  color:hsl(220, 29%, 18%); 
  z-index: 10;
  font-weight: 700;}

.skip-link:not(:focus) {
  clip-path: inset(50%);
}

:focus-visible {
  outline: 0.3rem solid var(--accent);  
  border-radius: 0.5rem;
} 

/* Less used*/

kbd {
  border: 0.1rem solid;
  border-radius: 0.3rem;
  box-shadow: inset 0 -0.1rem 0 0;
  padding: 0.3rem 0.5rem;
  margin-inline: 0.3rem;
  white-space: nowrap; 
}

code {
  background-color: var(--tertiary);
  color: var(--brand-95-l);
  font-size: var(--step-0);
  font-family: "Courier New", Courier, monospace;
  padding: 0.2rem;
}

pre {
  background-color: var(--shadow-2);
  color: var(--text);
  font-size: var(--step-0);
  font-family: "Courier New", Courier, monospace;
  padding: var(--space-xs);
  overflow: auto;
  margin-block: var(--space-s);
  font-weight: 600;  
}