/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #8292a2;
}

.token.punctuation {
	color: #f8f8f2;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #f92672;
}

.token.boolean,
.token.number {
	color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #e6db74;
}

.token.keyword {
	color: #66d9ef;
}

.token.regex,
.token.important {
	color: #fd971f;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}
/*
 * New diff- syntax
 */

.token.deleted {
	background-color: hsl(0, 51%, 37%);
	color: inherit;
}
.token.inserted {
	background-color: hsl(126, 31%, 39%);
	color: inherit;
}

/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
	-webkit-user-select: none;
	user-select: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-top: 2px;
	padding-bottom: 2px;
}
.token.prefix.inserted,
.token.prefix.deleted {
	background-color: rgba(0,0,0,.2);
}

/* Optional: full-width background color */
.token.inserted:not(.prefix),
.token.deleted:not(.prefix) {
	display: block;
	text-decoration: none; /* override del, ins, mark defaults */
	color: inherit; /* override del, ins, mark defaults */
}

:not(pre) > code[class*="language-"], pre[class*="language-"] {
    background:hsl(240, 8%, 10%);
}

pre[class*="language-"] {
   max-width: clamp(3rem, 0.1rem + 78vw, 90rem);  
   margin-block: var(--space-s) ; 
   font-size: var(--step-0);
  }

/* Ensure code inside maintains formatting */
code[class*="language-"] {
  white-space: pre;
  word-spacing: normal;  
}
/*CSS RESET*/

/* * {
  outline: 1px solid red;
} */

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
html {
  interpolate-size: allow-keywords;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}
textarea:not([rows]) {
  min-block-size: 10em;
}
:target {
  scroll-margin-block: 5ex;
}
img,
picture,
svg,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
a:not([class]) {
  text-decoration-thickness: max(0.06rem, 1px);
  text-underline-offset: .5rem;
}
body {
  min-block-size: 100vh;
}
:target {
  scroll-margin-block: 5ex;
}

/*
GLOBAL STYLES
--------------
COLOR VARIABLES 
FLUID TYPE VARIABLES
FLUID SPACING VARIABLES
FONT FACE AND BODY
TYPE ELEMENTS
OTHER GLOBAL ELEMENTS 
*/

/********************************/
/****** COLOR VARIABLES  *******/        

[data-theme="light"] {
	--brand: #663399;
	--accent: #9e9eff;
	--text: hsl(240, 8%, 10%);
  --text-alt: hsl(0, 0%, 98%);
	--surface:  #ffffff;
	--shadow: hsl(60, 1%, 15%);
  --shade:	#f3f0f0;
  }

  [data-theme="dark"] {
	--brand: hsl(270, 50%, 70%);
	--accent: #9e9eff;
	--text: hsl(0, 0%, 98%);
  --text-alt: hsl(240, 8%, 10%);
	--surface: hsl(240, 9%, 14%);
	--shadow: hsl(0, 0%, 96%);
  --shade:	hsl(240, 8%, 10%);
  }

  * {
    scrollbar-color:var(--brand) var(--surface);
    scrollbar-width:auto;
}

/********************************/
/***** FLUID TYPE VARIABLES ******/  

/* @link https://utopia.fyi/type/calculator?c=320,17,1.125,1280,21,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.8395rem, 0.8393rem + 0.0008vw, 0.84rem);
    --step--1: clamp(0.9444rem, 0.9093rem + 0.1759vw, 1.05rem);
    --step-0: clamp(1.0625rem, 0.9792rem + 0.4167vw, 1.3125rem);
    --step-1: clamp(1.1953rem, 1.0469rem + 0.7422vw, 1.6406rem);
    --step-2: clamp(1.3447rem, 1.1094rem + 1.1768vw, 2.0508rem);
    --step-3: clamp(1.5128rem, 1.1626rem + 1.7511vw, 2.5635rem);
    --step-4: clamp(1.7019rem, 1.2011rem + 2.504vw, 3.2043rem);
    --step-5: clamp(1.9147rem, 1.2177rem + 3.4846vw, 4.0054rem);
    --step-6: clamp(2.154rem, 1.2031rem + 4.7547vw, 5.0068rem);
    --step-7: clamp(2.4232rem, 1.1448rem + 6.3921vw, 6.2585rem);
    --step-8: clamp(2.7261rem, 1.0272rem + 8.4949vw, 7.8231rem);
    --step-9: clamp(3.0669rem, 0.8296rem + 11.1866vw, 9.7789rem);
    --step-10: clamp(3.4503rem, 0.5258rem + 14.6222vw, 12.2236rem);
  }
 
/********************************/
/*** FLUID SPACING VARIABLES ****/
  
  /* @link https://utopia.fyi/space/calculator?c=320,17,1.2,1280,21,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.25rem, 0.2292rem + 0.1042vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5208rem + 0.2083vw, 0.6875rem);
    --space-xs: clamp(0.8125rem, 0.75rem + 0.3125vw, 1rem);
    --space-s: clamp(1.0625rem, 0.9792rem + 0.4167vw, 1.3125rem);
    --space-m: clamp(1.625rem, 1.5rem + 0.625vw, 2rem);
    --space-l: clamp(2.125rem, 1.9583rem + 0.8333vw, 2.625rem);
    --space-xl: clamp(3.1875rem, 2.9375rem + 1.25vw, 3.9375rem);
    --space-2xl: clamp(4.25rem, 3.9167rem + 1.6667vw, 5.25rem);
    --space-3xl: clamp(6.375rem, 5.875rem + 2.5vw, 7.875rem);
  
    /* One-up pairs */
    --space-3xs-2xs: clamp(0.25rem, 0.1042rem + 0.7292vw, 0.6875rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4167rem + 0.7292vw, 1rem);
    --space-xs-s: clamp(0.8125rem, 0.6458rem + 0.8333vw, 1.3125rem);
    --space-s-m: clamp(1.0625rem, 0.75rem + 1.5625vw, 2rem);
    --space-m-l: clamp(1.625rem, 1.2917rem + 1.6667vw, 2.625rem);
    --space-l-xl: clamp(2.125rem, 1.5208rem + 3.0208vw, 3.9375rem);
    --space-xl-2xl: clamp(3.1875rem, 2.5rem + 3.4375vw, 5.25rem);
    --space-2xl-3xl: clamp(4.25rem, 3.0417rem + 6.0417vw, 7.875rem);
  
    /* Custom pairs */
    --space-s-l: clamp(1.0625rem, 0.5417rem + 2.6042vw, 2.625rem);
    --space-s-xl: clamp(1.0625rem, 0.1042rem + 4.7917vw, 3.9375rem);
    --space-s-2xl: clamp(1.0625rem, -0.3333rem + 6.9792vw, 5.25rem);
    --space-s-3xl: clamp(1.0625rem, -1.2083rem + 11.3542vw, 7.875rem);
  }

/********************************/
/****** FONT FACE AND BODY *******/

@font-face {
  font-family: "Ubuntu Mono";
  src: url("/fonts/UbuntuMono-Regular.woff2") format('woff2');
  unicode-range: U+0000, U+0008-0009, U+000D, U+001D, U+0020-007E,
      U+00A0-024F, U+0292, U+02BC, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0311,
      U+0384-0386, U+0388-038A, U+038C, U+038E-03A1, U+03A3-03CE,
      U+0400-045F, U+0462-0463, U+0472-0475, U+048A-04F9, U+1E80-1E85,
      U+1EF2-1EF3, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D,
      U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4,
      U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4,
      U+1FF6-1FFE, U+2013-2015, U+2018-201A, U+201C-201E, U+2020-2022,
      U+2026, U+2030, U+2039-203A, U+2044, U+2070, U+2074-2079, U+2080-2089,
      U+20AC, U+20AE, U+20B4, U+20B9, U+2113, U+2116, U+2122, U+2126,
      U+212E, U+2153-215E, U+2202, U+2206, U+220F, U+2211-2212, U+2215,
      U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+2500,
      U+2502, U+250C, U+2510, U+2514, U+2518, U+251C, U+2524, U+252C,
      U+2534, U+253C, U+2550-256C, U+2588, U+2591-2593, U+25CA, U+E0FF,
      U+EFFD, U+F000-F002, U+F506-F511, U+F80A-F81D, U+FB01-FB02, U+FFFD;
      font-display: swap;
}

@font-face {
font-family: "Ubuntu Mono Bold";
src: url("/fonts/UbuntuMono-Bold.woff2") format('woff2');
unicode-range: U+0000, U+0008-0009, U+000D, U+001D, U+0020-007E,
    U+00A0-024F, U+0292, U+02BC, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0311,
    U+0384-0386, U+0388-038A, U+038C, U+038E-03A1, U+03A3-03CE,
    U+0400-045F, U+0462-0463, U+0472-0475, U+048A-04F9, U+1E80-1E85,
    U+1EF2-1EF3, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D,
    U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4,
    U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4,
    U+1FF6-1FFE, U+2013-2015, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+2070, U+2074-2079, U+2080-2089,
    U+20AC, U+20AE, U+20B4, U+20B9, U+2113, U+2116, U+2122, U+2126,
    U+212E, U+2153-215E, U+2202, U+2206, U+220F, U+2211-2212, U+2215,
    U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+2500,
    U+2502, U+250C, U+2510, U+2514, U+2518, U+251C, U+2524, U+252C,
    U+2534, U+253C, U+2550-256C, U+2588, U+2591-2593, U+25CA, U+E0FF,
    U+EFFD, U+F000-F002, U+F506-F511, U+F80A-F81D, U+FB01-FB02, U+FFFD;
    font-display: swap;
}


html {
    font-size: 95%;
    scrollbar-gutter: stable;
    max-width: 1800px;
    margin-inline: auto;     
  }
  
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
  
  body {
    font-family: "Ubuntu Mono", monospace; 
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;  
    font-size: var(--step-1);
    line-height: calc(1.6em + 0.5rem);
    background-color: var(--surface);
    color: var(--text);  
    font-weight: 400; 
  }    

/********************************/
/******** TYPE ELEMENTS ********/

h1,
h2,
h3,
h4,
h5,
h6 {   
  line-height: calc(1em + 0.9rem);
  text-wrap: balance;
  font-weight: 500;
  font-family: "Ubuntu Mono Bold" , monospace;
}
h1 {
   font-size: var(--step-7);
  margin-block-end: var(--space-xs);  
}
h2 {
  font-size: var(--step-4); 
}
h3 {
  font-size: var(--step-3); 
}
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: 0.05rem;
  text-transform: uppercase;
}
h6 {
  font-size: var(--step--1);
}

small {
  font-size: var(--step--1);
  line-height: 1.5;
  display: inline-block;
}
a {
  color: var(--text);
  text-decoration-color: var(--brand);
  padding-block: 0.5rem;
}
a:hover {
  color: var(--brand); 
}

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

strong {
  font-weight: 700;
}

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

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

/********************************/
/***** OTHER GLOBAL ELEMENTS *****/


p, li{
    font-size: var(--step-1);
}

blockquote {
  border-inline-start: 0.4rem solid var(--brand);
  padding: var(--space-2xs);
  font-style: italic;
  margin-inline: 0;
  padding-inline-start: var(--space-s);
}

::selection {
  color: var(--text-alt);
  background-color: var(--text);
}

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

address {
  display: inline-block;
  font-style: italic;
}
  /* skip links and focus */

.skip-link {
  position: absolute;
  padding: 0.5rem;
  margin: 1rem;
  background-color: var(--text);  
  color: var(--text-alt);
  z-index: 10;
  font-weight: 700;
  text-underline-offset: .5rem;
} 

.skip-link:not(:focus) {
  clip: rect(0 0 0 0);
	clip-path: inset(50%);
	block-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	inline-size: 1px;
}
:focus-visible {
    outline: 0.4rem solid var(--text);     
  } 

.toggle:focus-visible {
  outline: 0.4rem solid var(--text); 
 }

 summary:focus-visible{ 
  border:0.4rem solid var(--text) ;
 }

/* Less used*/

abbr {
  text-decoration: underline dotted;
}
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;
}
/*
COMPOSITION
-----------
BODY
HEADER & NAV 
FOOTER 
FLUID BREAKOUTS 
*/

/*******************************/
/************ BODY ************/   

.top-bar     {grid-area: tb;}
header       {grid-area: h;}
main         {grid-area: m;}
footer       {grid-area: f;}


body { 
  display: grid; 
  grid-template:
  "tb"
  "h"
  "m" 1fr 
  "f"
  ; 
}
  
  header,  main, footer  {
    margin-inline: 2vw;
  }

  main {   
    margin-block-end: var(--space-2xl);
  }
     
  .top-bar {
    display: flex;
    justify-self: end; 
    block-size: 2.5rem;  
}

/********************************/
/******** HEADER & NAV  ********/

@media (width <= 45rem) {
    header {
      display: grid;
      justify-content: center;   
      margin-block-end: var(--space-xl);
    }
  }
  
  @media (width > 45rem) {
    header {
      display: flex;
      justify-content: space-between;      
      padding-block-end: var(--space-l);
    }
  }


/********************************/
/******** FOOTER  ********/

.fa1   {grid-area: fa1;}
.fa2   {grid-area: fa2;}
.fa3   {grid-area: fa3; 
  justify-self: center;
  margin-block-end:var(--space-l);
  padding-inline: var(--space-l);}


@media (width <= 40rem) {
footer .footer-wrapper{  
  display: grid; 
  justify-self: center;  
  grid-template:  
  "fa1"
  "fa2" 
  "fa3"
 / 1fr ;

}
}

@media (width > 40rem) {
footer .footer-wrapper{   
  justify-items: center;
  grid-template:  
  "fa1 fa2"
  "fa3 fa3"
 / 1fr 1fr ;

}
}

.footer-wrapper{
  display: grid;
  margin-block-start: -3rem;
  padding: var(--space-l);
  justify-content: center; 
}

  
.box {
  /*--------Settings-------*/ 
  --grid-col-count: 3;
  --grid-gap: var(--space-m);
  --grid-item-min-width: 18rem;
  /*------------------------*/ 
  --gap-count: calc(var(--grid-col-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-gap));
  --grid-item-max-width: calc((100% - var(--total-gap-width)) / var(--grid-col-count));
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item-min-width), var(--grid-item-max-width)), 1fr));
  grid-gap: var(--grid-gap);
  padding-block: var(--grid-gap); 
}

.box li{
  margin: 0;
  padding: var(--space-m);
  list-style: none;
  border: .4rem solid var(--text);
  align-content: start;

}

.box li{
display: grid;
grid-template-rows: subgrid;
grid-row: auto / span 4;
gap: 0;
}

.box h2 {
font-size: var(--step-2);
}


/********************************/
/******* FLUID BREAKOUTS *******/

/* https://layout-breakouts-builder.vercel.app/ */

.page-layout > *,
.full-width > * {
  grid-column: content;
  
}
.page-layout,
.full-width {
  --minimum-content-padding: 1rem;

  /** TRACK WIDTHS **/
  --full-max-width: 1fr;
  --popout-max-width: 90rem;
  --content-max-width: 55rem;

  /** TRACK SIZES **/
  --full: minmax(var(--minimum-content-padding), 1fr);
  --popout: minmax(
    0,
    calc((var(--popout-max-width) - var(--content-max-width)) * 0.5)
  );
  --content: min(
    var(--content-max-width),
    100% - var(--minimum-content-padding) * 2
  );

  display: grid;
  grid-template-columns:
    [full-start]
    var(--full)
    [popout-start]
    var(--popout)
    [content-start]
    var(--content)
    [content-end]
    var(--popout)
    [popout-end]
    var(--full)
    [full-end];
}

/** CLASSES **/
.full {
  grid-column: full;
}
.full-start {
  grid-column-start: full-start;
}
.full-end {
  grid-column-end: full-end;
}

.popout {
  grid-column: popout;
}
.popout-start {
  grid-column-start: popout-start;
}
.popout-end {
  grid-column-end: popout-end;
}

.content {
  grid-column: content;
}
.content-start {
  grid-column-start: content-start;
}
.content-end {
  grid-column-end: content-end;
}

.full-width {
  grid-column: full;
}
.full-content,
.full-content-nopad {
  grid-column: full;
}
.full-content {
  padding-inline: var(--minimum-content-padding);
}


/*******************************/
/************ FLOW ************/   

.flow {
    --flow-space: 1rem;
  }
  .flow > * + * {
    margin-top: var(--flow-space);
  }
  h2 {
    --flow-space: 3.4rem;
  }
  h3 {
    --flow-space: 2rem;
  }
  h4 {
    --flow-space: 1.3rem;
  }  
  p {
    --flow-space: 0.8rem;
  }
  section {
    --flow-space: 5rem;
  }
   div {
    --flow-space: 2rem;
  }
  img {
    --flow-space: 2rem;
  }
  blockquote,
  blockquote + * {
    --flow-space: 3rem;
  }
  article ul {
    --flow-space: 2rem;
  }
  main ul li {
    --flow-space: 2rem;
  }

/*******************************/
/************ OTHER ************/   

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	block-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	inline-size: 1px;
}

.right-me{
    text-align: right;
}

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

.sidelines {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2xl);
  max-inline-size: initial;
}

.sidelines:before,
.sidelines:after {
  content: "";
  border-block-start: 0.4rem solid var(--text);
  align-self: center;
}

.angle {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-s-2xl);
    max-inline-size: initial;
    align-items: start;
}
.angle::before {
  content: "";
  border-block-start: 0.4rem solid var(--text);
  border-inline-start: 0.4rem solid var(--text);
  margin-block-start: 0.6em;
  padding-block-end: 5rem;
}

.angle:after {
  content: "";
  border-block-start: 0.4rem solid var(--text);
  border-inline-end: 0.4rem solid var(--text);
  margin-block-start: 0.6em;
  padding-block-end: 5rem;
}

.angle-up {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-s-2xl); 
  align-items: baseline;
}

.angle-up::before {
  content: "";
  border-block-end: 0.4rem solid var(--text);
  border-inline-start: 0.4rem solid var(--text);
  padding-block-end: 5rem;
}

.angle-up:after {
  content: "";
  border-block-end: 0.4rem solid var(--text);
  border-inline-end: 0.4rem solid var(--text);
  padding-block-end: 5rem;
}

.center-me {
  display: grid;
  justify-items: center;
} 
 
.display-none{
  display: none;
}

.center-place-me {
  display: grid;
  place-content: center;
} 

  .pretty {
   text-wrap: pretty;
}

.side-note  {
  margin-block-start: var(--space-l);
  background-color: var(--shade);
  padding: var(--space-s);
 
}
.side-note p {
  font-size: var(--step--1); 
    line-height: 1.6; 
}

.side-note li{
  font-size: var(--step--1);
  line-height: 1.4;
}

.side-note li::marker{
 content: initial;
}


@media (prefers-reduced-motion: no-preference) {
@view-transition {
	navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .2s ; 
}
}

.brand-font{
  font-family: "Ubuntu Mono" , monospace; 
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: hsl(240, 8%, 10%);
}
/*
BLOCK
-----------
HOMEPAGE:   Hero - Episodes - Projects - Hosts
POSTS:   Paginations 
GLOBAL: Light Youtube - Light/dark mode - Forms - Buttons - Header - Footer
*/

/********************************/
/************ HOMEPAGE ************/

/* HERO */

  .value-prop{
    font-size: var(--step-7);
    text-align:center;   
  }
  
 .value-prop span {
    display: block;
    font-size: var(--step--1);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5;
    line-height: 1.5;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 600;
}


 /********************************/
/************ POSTS ************/
main lite-youtube{
  margin-block-end: var(--space-xl);
}


  .post-metadata li{
    font-size: var(--step-0);
  }
 
  .pagination {  
    justify-self: center;  
  }

  .pagination li {
    display: inline-block; 
   margin-block: var(--space-l); 
  }

  .pagination a {
   border: .4rem solid var(--text); 
   padding: var(--space-s); 
   font-weight: 700;
   text-decoration: none;
   
  }
  
  .pagination a:hover {
   background-color: var(--brand); 
   color: var(--text-alt); 
   }
  
.links-nextprev {
	display: flex; 
	justify-content: space-between;
	gap: .5em 1em;
	list-style: "";
	border-top: 1px dashed var(--color-gray-20);
	padding: 1em 0;  
}

.links-nextprev li {
	font-size: var(--step-0);
}
.links-nextprev > * {
	flex-grow: 1;
}
.links-nextprev-next {
	text-align: right;
}

.page-indicator{
  float: right;
  margin-block-start: .6rem;
  vertical-align:baseline;
}

table {
	margin: 1em 0;
}
table td,
table th {
	padding-right: 1em;
}

pre,
code {
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
pre:not([class*="language-"]) {
	margin: .5em 0;
	line-height: 1.375; /* 22px /16 */
	-moz-tab-size: var(--syntax-tab-size);
	-o-tab-size: var(--syntax-tab-size);
	tab-size: var(--syntax-tab-size);
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	overflow-x: auto;
}
code {
word-break: normal;
 background: hsl(240, 8%, 10%);
 color: #f8f8f2;
 padding-inline: var(--space-xs);
 padding-block: .4rem;
 display: block;
 margin-block: var(--space-s);
 border-radius: 0.3em;
}


/* Posts list */

.post-metadata li{
  
    margin-inline-start: var(--space-xs);
}

.post-metadata li::marker{
     content: ""; 
}

.post-title{
  margin-block-end: var(--space-l);
}
.postlist {
	list-style: none;
	padding: 0;
	padding-left: 1.5rem;
}
.postlist-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	counter-increment: start-from -1;
	margin-bottom: 1em;
}
.postlist-item:before {
	display: inline-block;
	pointer-events: none;
	content: "" counter(start-from, decimal-leading-zero) ". ";
	line-height: 100%;
	text-align: right;
	margin-left: -1.5rem;
}
.postlist-date,
.postlist-item:before {
	font-size: var(--step-0);
	color: var(--brand);
  font-weight: 500;
}
.postlist-date {
	word-spacing: -0.5px;
}
.postlist-link {
	font-size: 1.1875em; /* 19px /16 */
	font-weight: 700;
	flex-basis: calc(100% - 1.5rem);
	padding-left: .25em;
	padding-right: .5em;
	text-underline-position: from-font;
	text-underline-offset: 0;
	text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
	font-weight: bold;
}

/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: capitalize;
	font-style: italic;
}
.postlist-item > .post-tag {
	align-self: center;
}

/* Tags list */
.post-metadata {
	display: inline-flex;
	flex-wrap: wrap;	
	list-style: none;
	align-items: baseline;
	font-size: var(--step-1);	
}
.post-metadata time {
	margin-right: 1em;
}

/********************************/
/************ GLOBALS ************/

/* LIGHT YOU TUBE */

lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer; 
    border: .4rem solid var(--text);  
}

/* gradient */
lite-youtube::before {
    content: attr(data-title);
    display: block;
    position: absolute;
    top: 0;       
    block-size: 99px;
    inline-size: 100%;
    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
    color: hsl(0deg 0% 93.33%);
    text-shadow: 0 0 2px rgba(0,0,0,.5);
    font-size: 18px;
    padding: 25px 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

lite-youtube:hover::before{

background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
}
lite-youtube:hover::before {
    color: white;
}

lite-youtube::after {
   content: "";
   display: block;
	aspect-ratio: 16 / 9 ;
}
lite-youtube > iframe {
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lyt-playbtn {
    display: block;
    /* Make the button element cover the whole area for a large hover/click target… */
    inline-size: 100%;
    block-size: 100%;
    /* …but visually it's still the same size */
    background: no-repeat center/68px 48px;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    position: absolute;
    cursor: pointer;
    z-index: 1;
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: 0;
}

lite-youtube:hover > .lyt-playbtn,
lite-youtube .lyt-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lyt-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    block-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    inline-size: 1px;
  }


  /* LIGHT DARK TOGGLE */

.toggle {
	background: none;
	color: inherit;
	border: none;
	padding: 1rem;
	font: inherit;
	cursor: pointer;
	outline: inherit;
  }
  .theme-icon {
	inline-size: 25px;
	block-size: 25px;
	transition: 0.3s;
	
  }
  .theme-icon:hover {
	transform: scale(1.2);
  }
  
  .hide-dark-img {
	display: none;
  }
  
  @media (prefers-reduced-motion: no-preference) {
	.theme-icon:active {
	  transform: rotate(-22deg);
	}
  }

/********************************/
/************ FORMS ************/

/* Base form styles */
form {
  margin-block-end: var(--space-m); 
}

.field-wrapper {
  margin-block-end: 1.5rem;
}

/* Label styles */
label {
  display: block;
  font-weight: 600;
  margin-block-end: 0.5rem;
  color: var(--text);
}

/* Required field indicator */
.required {
  color: var(--brand);
  margin-inline-start: 0.25rem;
}

/* Input styles */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 1rem 0.5rem;
  border: 0.4rem solid var(--text); 
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Focus states */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand); 
}   

/* Textarea specific styles */
textarea {
  block-size: 20rem;
  resize: vertical;  
}

main li::marker {
  color: var(--brand);
  content: '⬤  ';
  font-size: var(--step-1); 
}

.links-nextprev li::marker{
   content: '';
}

.latest-eps li::marker{
   content: '';
}

.btn, .btn:active{  
  border: none;
  background-color: var(--brand);  
  color: var(--text-alt);
  display: block;
  padding: 0.6em 1.5em;
  font-weight: 900;
  letter-spacing: 0.05em; 
  font-family: "Ubuntu Mono Bold"; 
  text-decoration: none;  
  text-transform: uppercase;
  inline-size:  fit-content;
  block-size: fit-content; 
  font-size: var(--step-0); 
  outline: 0.1rem solid transparent;
  outline-offset: -0.125rem;
  /* box-shadow: 0  .1rem 0rem 0rem hsla(0, 0%, 2%, 1); */
  transition: .2s ease-out;
  margin-block: var(--space-m);
}

.btn-alt{
  background-color: var(--brand);
  color: var(--text-alt) ;
}

.btn:hover {
  color: var(--text-alt);
  transition: .1s ease-in; 
  box-shadow: 0 0 0 0 hsla(0, 0%, 2%, 0.1);    
  background-color: var(--text); 
}  
 
.btn:focus-visible{
  outline: 0.4rem solid var(--text);   
}

.latest-eps a:focus{
   display: block; 
   padding: 0; 
   outline: 0.4rem solid var(--brand);   
}

.projects a:focus{
   display: block; 
   padding: 0; 
   outline: 0.4rem solid var(--brand);   
}


/********************************/
/******** HEADER & NAV  ********/

header svg { 
  inline-size:16rem;
  padding-inline: var(--space-xs); 
  justify-self: center;
}


header svg:focus-visible {
 margin-block-start: -2rem;
 outline: 0.4rem solid var(--text); 
}

.nss-icon {
  inline-size:16rem;
  padding: var(--space-xs);
}


@media (width <= 55rem) {
.nss-icon {
  display: none;
}

}


header nav ul {
  display: flex;
  flex-wrap: wrap; 
  margin-block-end: 0; 
   margin-block-start: var(--space-xs); 
}

nav a,
nav a:active {
  font-size: var(--step--1);
  text-transform: uppercase;
  transition: 0.5s;
  padding: var(--space-xs);
  font-weight: 500;
}

header nav a[href]:not(:hover) {
text-decoration: none;
  list-style-type: none;
}

.nav a[href][aria-current="page"], .nav a[href][aria-current="true"] {
text-decoration: underline;
text-decoration-thickness: .4rem;
text-decoration-color: var(--brand);
text-underline-offset: .8rem;
}

header li {
  list-style: none;
  line-height: 2.2;
}

header a {
  text-decoration: none;
}

/********************************/
/************ FOOTER ************/

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

footer li{
  font-size: var(--step-0);
  list-style: none;
}

footer nav a, footer nav a:active{
padding-inline-start: 0;
}


.copy-button {   
    float: right;
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
    cursor: pointer;
    background-color: var(--text);
    color: var(--text-alt);
    padding: 0.5rem 1rem;
    border: .4rem solid var(--text-alt);
}


      .resize {       
        padding: 1rem;
        overflow: hidden;
        resize: horizontal;
        position: relative; 
      }

      .resize:after {
        bottom: 0rem;
        /* block-size: 6rem; */   
        content: "Resize me!";
        position: absolute;
        font-size: var(--step-0);
        right: 0;     
        padding-inline:var(--space-xs); 
      }

 .ha:hover, .ha:focus{
color: transparent;
margin: 0;
  }