/* ================== */
/* RESET              */
/* ================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  text-rendering: optimizeSpeed;
}


/* other element core behavior */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* REMOVE ANIMATIONS */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}




:root {
  /* COLORS */
  /* main text color: grey */
  --clr-primary-400: hsl(207, 11%, 19%);
  --clr-primary-2: #05386B;
  /* white */
  --clr-neutral-100: hsl(0, 0%, 100%);
  /* black */
  --clr-neutral-900: hsl(232, 12%, 13%); 
  /* accent colors */
  --clr-accent-100: hsl(13, 100%, 96%);
  --clr-accent-300: hsl(12, 88%, 75%);
  --clr-accent-400: hsl(12, 88%, 59%);
  --clr-accent-500: hsl(12, 60%, 45%);


  --clr-green-100: hsl(134, 61%, 60%);
  --clr-green-800: hsl(151.1,55.8%,37.3%);
  --clr-green-900: hsl(134, 61%, 41%);
  --clr-ms-dos-green:  hsl(123, 100%, 25%);

  --clr-orange-quotation: hsl(24.2,100%,46.7%);
  --color-redish-orange: #ee6000;

  --color-html-logo: #F06529;
  --color-css-new-logo: #663399;
  --color-javascript-logo: #f7df1e;
  --color-wordpress-logo: #00749C; 
  --color-shopify-logo: #96bf48; 
  --color-react-js-logo: #61dbfb;


  --gradient-linear-red-orange-yellow-900: linear-gradient(to right, #e71414, #eb4409, #ee6000, #ef7900, #f08f0d, #f09c10, #f0a917, #efb620, #eebf1c, #ecc919, #e9d219, #e5dc1b);
  --gradient-redish-gray: linear-gradient(to right top, #f44343, #d43a5f, #aa3e6c, #7d416b, #553f5a, #463c50, #3b3843, #333335, #333337, #333339, #33333b, #33333d); 
  --gradient-olive-green: linear-gradient(to right bottom, #edf389, #d6e071, #bfcd5a, #a9ba42, #92a829);



  /* FONT FAMILY */
  /* --ff-display: 'Alfa Slab One', serif; */
  --ff-primary: 'Radio Canada', sans-serif;
  --ff-primary: system-ui;

  --ff-body: var(--ff-primary);
  --ff-heading: var(--ff-primary);

  /* FONT SIZE */
  --fs-100: 0.6rem;
  --fs-200: 0.7rem;
  --fs-300: 0.8rem;
  --fs-400: 1rem;
  --fs-500: 1.3rem;
  --fs-600: 1.75rem;
  --fs-700: 2rem;
  --fs-800: 2.5rem;
  --fs-850: 3rem;
  --fs-900: 5rem;
  --fs-custom: 10rem;

  --fs-body: var(--fs-400);
  /* THESE CAN BE USED FOR CONSISTENCY */
  --fs-primary-heading: var(--fs-850);
  --fs-secondary-heading: var(--fs-700);
  --fs-tertiary-heading: var(--fs-500);
  --fs-side-comments: var(--fs-100);

  /* FONT WEIGTH */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semi-bold: 600;
  --fw-bold: 900;

  /* LINE HEIGHT */
  --line-height-100: 1;
  --line-height-400: 1.5;
  --line-height-500: 1.6;
  
  --lh-body: var(--line-height-400);
  --lh-display: var(--line-height-100);

  /* TEXT ALIGN */
  --t-align-center: center;
  --t-align-right: right;
  --t-align-left: left;


  /* TEXT DECORATION */
  --text-decoration-none: none;
  --text-decoration-underline: underline;
  
  /* SPACING & SIZING: REM  */
  /* Font size (titles, body text) */
  /* padding between sections*/
  /* marging */
  /* border, border-radius */
  --size-100: 0.25rem;
  --size-200: 0.5rem;
  --size-300: 0.75rem;
  --size-400: 1rem;
  --size-500: 1.5rem;
  --size-600: 2rem;
  --size-700: 3rem;
  --size-800: 4rem;
  --size-900: 5rem;
  --size-1000: 6rem;
  --size-accent: ;


  /* SPACING & SIZING: EM (with em unit) */
  /* Local Scoped Spacing!! */
  /* margin top based spacer */
  /* button padding based on the indivigual font size of the button */
  --size-em-100: 0.25em;
  --size-em-200: 0.5em;
  --size-em-300: 0.75em;
  --size-em-400: 1em;
  --size-em-500: 1.5em;
  --size-em-600: 2em;
  --size-em-900: 3em;
  --size-em-accent: ;
  
  /* SPACER: takes care the margin top of the headings based on their font size and not the root font size!!! */
  --flow-spacer-900: 5rem;
  --flow-spacer-800: 4.5rem;
  --flow-spacer-700: 4rem;
  --flow-spacer-600: 3rem;
  --flow-spacer-500: 2rem;
  --flow-spacer-400: 1rem;
  --flow-spacer-300: 0.75rem;
  --flow-spacer-200: 0.5rem;
  --flow-spacer-accent-sm: ;
  --flow-spacer-accent-lg: ;

  /* PADDING SPECIFIC */
  --padding-card-tag: 0.2em 1.5em;
  --padding-card-tag-lr: 0.4em 1.5em;
}

/* ========================================= */
/* UTILITY CLASSES */
/* ========================================= */

/* ================== */
/* COLORS_Text-colors */
/* ================== */
.text-primary-400 {
  color: var(--clr-primary-400);
}
.text-primary-2 {
  color: var(--clr-primary-2);
}
.text-neutral-100 {
  color: var(--clr-neutral-100);
}
.text-neutral-900 {
  color: var(--clr-neutral-900);
}
.text-accent-400 {
  color: var(--clr-accent-400);
}
.text-accent-100 {
  color: var(--clr-accent-100);
}
.clr-orange-quotation {
  color: var(--clr-orange-quotation);
}
.color-reddish-orange {
  color: var(--color-redish-orange);
}
/* GREENS */
.color-green-100 {
  color: var(--clr-green-100)
}
.color-green-800 {
  color: var(--clr-green-800)
}
.color-green-900 {
  color: var(--clr-green-900)
}
/* LOGO COLORS */
.color-html-logo {
  color: var(--color-html-logo);
}
.color-css-new-logo {
  color: var(--color-css-new-logo);
}
.color-javascript-logo {
  color: var(--color-javascript-logo);
}
.color-wordpress-logo {
  color: var(--color-wordpress-logo);
}
.color-shopify-logo {
  color: var(--color-shopify-logo);
}
.color-react-js-logo {
  color: var(--color-react-js-logo);
}
/* =================================== */
/* COLORS_Text-Background-Gradients */
/* ==================================== */
.text-bg-gradient-900 {
  background-image: var(--gradient-linear-red-orange-yellow-900);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
}
/* ============================ */
/* COLORS_Background-colors */
/* ============================ */
/* GREEN BACKGROUNDS */
.bg-green-100 {background-color: var(--clr-green-100)}
.bg-green-800 {background-color: var(--clr-green-800)}
.bg-green-900 {background-color: var(--clr-green-900)}

.bg-pegboard {
  background-image: radial-gradient(black 1px, transparent 1px);
  background-size: 10px 10px;
  background-color:rgb(42, 148, 97);
  border-top-left-radius: 200px;
  border-right: 5px solid var(--yellow);
}
.bg-noise-texture {
  background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  background-blend-mode: overlay;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="1" fill="rgba(0,0,0,0.1)"/></svg>');
}
.bg-primary-400 {
  background-color: var(--clr-accent-400);
}
.bg-neutral-100 {
  background-color: var(--clr-neutral-100);
}
.bg-neutral-900 {
  background-color: var(--clr-neutral-900);
}
.bg-accent-100 {
  background-color: var(--clr-accent-100);
}


/* ============================= */
/* BACKGROUND GRADIENT */
/* ============================= */
.bg-gradient-redish-gray {
  background-image: var(--gradient-redish-gray);
}
.bg-gradient-olive-green {
  background-image: var(--gradient-olive-green);
}
.bg-gradient-red-orange-yellow {
  background-image: var(--gradient-linear-red-orange-yellow-900);
}
/* ============================== */
/* BOX SHADOWS */
/* =============================== */
.shadow-black {
  box-shadow: 0px 10px 20px 2px rgba(0,0,0,0.25);
  -webkit-box-shadow: 0px 10px 20px 2px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 10px 20px 2px rgba(0,0,0,0.25);
}
.shadow-extra-light-gray {
  box-shadow: -2px 9px 19px 0px rgba(221,221,221,1);
  -webkit-box-shadow: -2px 9px 19px 0px rgba(221,221,221,1);
  -moz-box-shadow: -2px 9px 19px 0px rgba(221,221,221,1);
}
.shadow-light-gray {
  box-shadow: -2px 9px 19px 0px rgba(180, 180, 180, 1);
  -webkit-box-shadow: -2px 9px 19px 0px rgba(180, 180, 180, 1);
  -moz-box-shadow: -2px 9px 19px 0px rgba(180, 180, 180, 1);
}
/* ==================== */
/* BORDER-RADIUS */
/* ==================== */
.rounded-lg {
  border-radius: 69% 31% 84% 16% / 20% 79% 21% 80%;
}
.rounded-full {
  border-radius: 50%;
}
.rounded-sm {
  border-radius: 5px;
}
.rounded-top-left-radius-25 {
  border-top-left-radius: 25px;
}
.rounded-top-right-radius-25 {
  border-top-right-radius: 25px;
}
.rounded-25 {
  border-radius: 25px;
}
/* ========================= */
/* TYPOGRAPHY */
/* =========================*/
/* FONT FAMILY */
.ff-display {
  font-family: var(--ff-display);
}

/* FONT SIZE */
.fs-primary-heading {font-size: var(--fs-primary-heading);}
.fs-secondary-heading {font-size: var(--fs-secondary-heading);}
.fs-tertiary-heading {font-size: var(--fs-tertiary-heading);}
.fs-side-comments {font-size: var(--fs-side-comments);}
.fs-900 {font-size: var(--fs-900);}
.fs-850 {font-size: var(--fs-850);}
.fs-800 {font-size: var(--fs-800);}
.fs-700 {font-size: var(--fs-700);}
.fs-600 {font-size: var(--fs-600);}
.fs-500 {font-size: var(--fs-500);}
.fs-400 {font-size: var(--fs-400);}
.fs-300 {font-size: var(--fs-300);}
.fs-200 {font-size: var(--fs-200);}
.fs-100 {font-size: var(--fs-100);}

/* FONT SIZE - FUILD TYPOGRAPHY */
.fs-fluid-max-5rem {
  font-size: 5rem;
}
/* 456px */
@media (max-width: 28.5em) {
  .fs-fluid-max-5rem {
    font-size: 4rem;
  }
}
/* up to 350px */
@media (max-width: 21.875em) {
  .fs-fluid-max-5rem {
    font-size: 3rem;
  }
}



.fs-fluid-max-5rem-break-point-b {
  font-size: 5rem;
}
/* 1100px */
@media (max-width: 68.75em) {
  .fs-fluid-max-5rem-break-point-b {
    font-size: 4rem;
  }
}
/* 600px */
@media (max-width: 37.5em) {
  .fs-fluid-max-5rem-break-point-b {
    font-size: 3rem;
  }
}
/* FONT WEIGHT */
.fw-light {font-weight: var(--fw-light);}
.fw-regular {font-weight: var(--fw-regular);}
.fw-semi-bold {font-weight: var(--fw-semi-bold);}
.fw-bold {font-weight: var(--fw-bold);}

/* LINE HEIGHT */
.line-height-body {line-height: var(--lh-body);}
.line-height-display {line-height: var(--lh-display);}
.line-height-wide {line-height: var(--line-height-500);}

/* TEXT ALIGN */
.t-align-center {text-align: center;}
.t-align-right {text-align: right;}
.t-align-left {text-align: left;}

/* UPPERCASE LETTERS */
.uppercase {text-transform: uppercase;}

/* LETTER SPACING */
.letter-spacing-0_1 {letter-spacing: 0.1px;}
.letter-spacing-0_2 {letter-spacing: 0.2px;}
.letter-spacing-0_3 {letter-spacing: 0.3px;}
.letter-spacing-0_4 {letter-spacing: 0.4px;}
.letter-spacing-0_5 {letter-spacing: 0.5px;}
.letter-spacing-0_6 {letter-spacing: 0.6px;}
.letter-spacing-0_7 {letter-spacing: 0.7px;}
.letter-spacing-0_8 {letter-spacing: 0.8px;}
.letter-spacing-0_9 {letter-spacing: 0.9px;}
.letter-spacing-1 {letter-spacing: 1px;}

/* LINKS */
.text-decoration-none {text-decoration: var(--text-decoration-none);}
.text-decoration-underline {text-decoration: var(--text-decoration-underline);}
/* ================== */
/* SPACING   */
/* ================== */
/* =============================================== */
/* SPACING_PADDING(general spaceing around elements) (size 100-900) */
/* ================================================= */

/* PADDING INLINE: LEFT & RIGHT */
.padding-inline-400 {
  padding-inline: var(--size-400);
}
/* PADDING BLOCK: TOP & BOTTOM*/
.padding-block-100 {
  padding-block: var(--size-100);
}
.padding-block-200 {
  padding-block: var(--size-200);
}
.padding-block-300 {
  padding-block: var(--size-300);
}
.padding-block-400 {
  padding-block: var(--size-400);
}
.padding-block-500 {
  padding-block: var(--size-500);
}
.padding-block-600 {
  padding-block: var(--size-600);
}
.padding-block-700 {
  padding-block: var(--size-700);
}
.padding-block-800 {
  padding-block: var(--size-800);
}
.padding-block-900 {
  padding-block: var(--size-900);
}
/* PADDING TOP */
.padding-top-100 {
  padding-top: var(--size-100);
}
.padding-top-200 {
  padding-top: var(--size-200);
}
.padding-top-300 {
  padding-top: var(--size-300);
}
.padding-top-400 {
  padding-top: var(--size-400);
}
.padding-top-500 {
  padding-top: var(--size-500);
}
.padding-top-600 {
  padding-top: var(--size-600);
}
.padding-top-700 {
  padding-top: var(--size-700);
}
.padding-top-800 {
  padding-top: var(--size-800);
}
.padding-top-900 {
  padding-block: var(--size-900);
}
/* PADDING SPACE AROUND = all sides (top, right, bottom, left) */

.padding-space-around-400 {
  padding: var(--size-400);
}
.padding-space-around-500 {
  padding: var(--size-500);
}
.padding-space-around-600 {
  padding: var(--size-600);
}
.padding-space-around-700 {
  padding: var(--size-700);
}
.padding-space-around-800 {
  padding: var(--size-800);
}
/* PADDING FOR SPECIFIC USE CASES */
.padding-card-tag {
  padding: 0.2em 1.5em;
}
.padding-card-tag-lr {
  padding: 0.4em 1.5em;
}
/* ========================================== */
/* SPACING_MARGINS_(for outside the element) */
/* ========================================== */

/* MARGIN LEFT & RIGHT */
.margin-inline-400 {
  margin-inline: var(--size-400);
}
/* MARGINS TOP & BOTTOM */
.margin-block-400 {
  margin-block: var(--size-400);
}
.margin-block-900 {
  margin-block: var(--size-900);
}
.margin-block-700 {
  margin-block: var(--size-700);
}
/* MARGIN BOTTOM */
.margin-bottom-400 {
  margin-bottom: var(--size-400);
}
.margin-bottom-600 {
  margin-bottom: var(--size-600);
}
.margin-bottom-700 {
  margin-bottom: var(--size-700);
}
.margin-bottom-900 {
  margin-bottom: var(--size-900);
}

.margin-left-900 {
  margin-left: var(--size-900);
}
.margin-space-around-500 {
  margin: var(--size-500);
}


/* ========================================*/
/* SPACING_MARGIN TOP SPACER (wrapper for the first element to distribute space) */
/* ======================================= */
:where(.flow-spacer-900 :not(:first-child)) {
  margin-top: var(--flow-spacer-900);
}
:where(.flow-spacer-800 :not(:first-child)) {
  margin-top: var(--flow-spacer-800);
}
:where(.flow-spacer-700 :not(:first-child)) {
  margin-top: var(--flow-spacer-700);
}
:where(.flow-spacer-600 :not(:first-child)) {
  margin-top: var(--flow-spacer-600);
}
:where(.flow-spacer-500 :not(:first-child)) {
  margin-top: var(--flow-spacer-500);
}
:where(.flow-spacer-400 :not(:first-child)) {
  margin-top: var(--flow-spacer-400);
}
:where(.flow-spacer-300 :not(:first-child)) {
  margin-top: var(--flow-spacer-300);
}
:where(.flow-spacer-200 :not(:first-child)) {
  margin-top: var(--flow-spacer-200);
}

/* ======================= */
/* LAYOUT */
/* ======================= */

/* ========================== */
/* LAYOUT_Main Container */
/* ========================== */
.container {
  --max-width: 960px;
  --max-width: 1300px;
  --horizontal-margin: 2rem;

  width: min(var(--max-width), 100% - (var(--horizontal-margin) * 2));
  /* width: min(600px, 100%); */
  margin-inline: auto;
  /* these are locally scoped custom properties because I want them only to work for my container */
  /* or */
  /* max-width: 1110px; */
  /* padding: 0 1rem 0; */
  /* margin: 0 auto; */
}
@media (max-width: 500px) {
  .container {
    --horizontal-margin: 1rem;
  }
}



/* =========================================== */
/* LAYOUT_Grid X Columns with media break points */
/* =========================================== */


/* =============== */
/* 2 COLUMNS_900px */
/* =============== */
/* BELOW 900px we have 1 column */
.grid-cols-2-break-point-900 {
  display: grid;
  grid-template-columns: 1fr; 
  gap: var(--size-800);
}
/* ABOVE 900px we have 2 columns */
@media (min-width: 56.25em) {
  .grid-cols-2-break-point-900 {
    grid-template-columns: 1fr 1fr;
    gap: var(--size-500);
  }
}


/* =============== */
/* 2 COLUMNS_700px */
/* =============== */
/* BELOW 700px we have 1 column */
.grid-cols-2-break-point-700 {
  display: grid;
  grid-template-columns: 1fr; 
  gap: var(--size-800);
}
/* ABOVE 700px we have 2 columns */
@media (min-width: 43.75em) {
  .grid-cols-2-break-point-700 {
    grid-template-columns: 1fr 1fr;
    /* gap: var(--size-500); */
    /* justify-items: space-around; */
  }
}


/* ================== */
/* 3 COLUMNS_912px */
/* ================== */

.grid-cols-3-break-point-912 {
  display: grid;
  gap: var(--size-700);
  grid-template-columns: repeat(3, 1fr);
  place-items: start;
}
.card-as-link {
  /* max-width: 330px; */
}
/* 912px */
@media (max-width: 57em) {
  .grid-cols-3-break-point-912 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 600px */
@media (max-width: 37.5em) {
  .grid-cols-3-break-point-912 {
    grid-template-columns: 1fr;
    place-items: center;
  }
 
}


.grid-item-center {
  place-self: center;
}
.align-self-start {
  align-self: start;
}
/* ==================================== */
/* LAYOUT_Inner-Flexbox */
/* ==================================== */
.flexbox-inner-layout-custom-100 {
  display: flex;
  flex-direction: column;
  /* gap: var(--size-800); */
  align-items: center;
}

.flexbox-inner-layout-custom-200 {
  display: flex;
  flex-direction: column;
  width: fit-content;
  gap: 2rem;
  padding: 1rem 3rem;
  border-radius: 25px;
}

.flexbox-inner-layout-custom-300 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.flex-item-end {
  align-self: flex-end;
}

.center {
  /* width: 50%; */
  margin-left: auto;
  margin-right: auto;
  
}

/* ============================== */
/* GRID - FLEXBOX GAP SPACING */
/* ============================== */
.gap-100 {gap: var(--size-100);}
.gap-200 {gap: var(--size-200);}
.gap-300 {gap: var(--size-300);}
.gap-400 {gap: var(--size-400);}
.gap-500 {gap: var(--size-500);}
.gap-600 {gap: var(--size-600);}
.gap-700 {gap: var(--size-700);}
.gap-800 {gap: var(--size-800);}
.gap-900 {gap: var(--size-900);}

/* ==================================== */
/* LAYOUT_based on Characters max-width */
/* ==================================== */
.max-width-char-42 {
  --max-width-char-42: 42ch;
  max-width: var(--max-width-char-42);
}
.max-width-char-32 {
  --max-width-char-32: 32ch;
  max-width: var(--max-width-char-32)
}
.max-width-char-22 {
  --max-width-char-22: 22ch;
  max-width: var(--max-width-char-22)
}

/* width minimum content */
.width-fit-content {
  width: fit-content;
}


/* ACCESSIBLE HIDING  */
/* This class .visually-hidden does not display the text Menu on the screen. All we want here is not to show it but when the screen reader gets there they will say the word menu */
.visually-hidden {
  position: absolute;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
	white-space: nowrap !important; /* added line */
	border: 0 !important;
}



/* ========================= */
/* ANIMATIONS */
/* ========================== */
/* animation-100(animation background) */
.animation-100 {
  background: linear-gradient(90deg, #ff9a9e 50%, transparent 50%);

  /* Double the width to allow movement */
  background-size: 200%; 
  /* animation: wave 5s infinite alternate; */
  animation: wave 10s infinite alternate;
}


@keyframes wave {
  0% {
    background-position: 0%; /* Start */
  }
  40% {
    background-position: 50%; /* Pause here */
  }
  60% {
    background-position: 50%; /* Hold the position */
  }
  40% {
    background-position: 100%; /* End */
  }
}


/* ========================== */
/* IMAGES LAYOUT & WIDTH */
/* ========================== */
.img-w-1_5rem {width: 1.5rem;}
.img-w-2_0rem {width: 2rem;}
.img-w-2_5rem {width: 2.5rem;}
.img-w-3_0rem {width: 3rem;}
.img-w-3_5rem {width: 3.5rem;}
.img-w-4_0rem {width: 4rem;}
.img-w-5_0rem {width: 5rem;}
.img-w-1_0rem {width: 10rem;}

/* WIFI ICON */
.img_wifi-icon {
  width: 5rem;
}
.img_wifi-icon {
  animation: blink 1000ms linear infinite;
} 
/* take the opacity from 100% down to 0% and then back to 100% */
@keyframes blink {
  0% {
    opacity: 100%;
  }
  50% {
    opacity: 30%;
  }
}


/* QUOTATION MARK */
.img_quotation-mark {
  width: 3rem;
}
/* BACKHAND */
.img_backhand {
  width: 10rem;
  transition: transform 1000ms;
}
.img_backhand:hover,
.img_backhand:focus-visible {
  transform: translateX(0.75rem);
  transition: transform 500ms;
}
/* 700px */
@media (max-width: 43.75em) {
  .img_backhand {
    width: 5rem;
    rotate: 90deg;  
  }
}



/* ============================= */
/* BODY CORE DEFAULT STYLING */
/* ============================= */
body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--line-height-body);
  background-color: var(--clr-body-bg);
  color: var(--clr-text);
}
/* @media (max-width: 40em) {
  body {
    text-align: center;
  }
} */

/* =============================== */
/* GENERAL STYLING */
/* =============================== */
a {
  color: inherit;
}


/* ALL SECTIONS */
/* 1. NAVIGATION */
/* 2. MONITOR */
/* 3. REMOTE CONTROL */
/* 4. ABOUT */




/* ================================= */
/* SECTION: NAVIGATION & PRIMARY HEADER */
/* ================================= */
/* BIG-SCREENS   => equal or GREATER than 640px */
/* SMALL-SCREENS =< less than 640px */

/* PRIMARY HEADER PADDING */
@media (max-width: 40em) {
  .primary-header {
    padding-block: var(--size-500);
  }
}

/* NAVIGATION(BIG-SCREENS)_dissapear-the-toggle-button-from-640-pixels-and-up */
.mobile-nav-toggle {
  display: none;
}
/* NAVIGATION(BIG-SCREENS)_horizontal-alignment */
.primary-navigation__list {
  display: flex;
  justify-content: center;
  gap: var(--size-600);
}


/* NAVIGATION(ALL-SCREENS)_main-styling */
.primary-navigation__list a {
  display: inline-block;
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
  text-decoration-thickness: 0.2em;
  text-underline-offset: 1.8px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
  transition: transform 0.4s ease;
}
/* NAVIGATION(ALL-SCREENS)_hover-bounce-effect */
.primary-navigation__list a:hover {
  transform: translateY(-3px);
}
/* NAVIGATION(ALL-SCREENS)_link-color & underline-color */
.primary-navigation__list li:nth-child(1) a{
  color:  #e71414;
  text-decoration-color:  #e71414;
}
.primary-navigation__list li:nth-child(2) a{
  color:   #ee6000;
  text-decoration-color:   #ee6000;
}
.primary-navigation__list li:nth-child(3) a{
  color:  #f08f0d;
  text-decoration-color:  #f08f0d;
}
.primary-navigation__list li:nth-child(4) a{
  color:  #efb620;
  text-decoration-color:  #efb620;
  color:  #0072ef;
  text-decoration-color:  #0072ef;
}
.primary-navigation__list li:nth-child(5) a{
  color:  #ecc919;
  text-decoration-color:  #ecc919;
}
.primary-navigation__list li:nth-child(6) a{
  color:  #0072ef;
  text-decoration-color:  #0072ef;
}


/* ====================================================== */
/* NAVIGATION(SMALL-SCREENS)_equal or LESS than 640px */
/* ======================================================= */

/* NAVIGATION(SMALL-SCREENS)_menu-toggle, we build it from scratch, this is the html button element*/
@media (max-width: 40em) {
  .mobile-nav-toggle {
    display: block;
    position: absolute;
    top: var(--size-500);
    /* left: .3rem; */
    width: 40px;
    height: 40px;
    background-color: #ddd;
    background-image: var(--gradient-linear-red-orange-yellow-900);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    background: transparent;
  }
  /* the first two lines of the humberger menu  */
  .mobile-nav-toggle::before {
    content: '';
    position: absolute;
    width: 25px;
    height: 4px;
    background-image: var(--gradient-linear-red-orange-yellow-900);
    border-radius: 10px;
    transition: 0.2s;
    transform: translateY(-10px);
    box-shadow: 0 10px 0 #eebf1c;
  }
  /* the last line of the humberger menu */
  .mobile-nav-toggle::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 4px;
    background-image: var(--gradient-linear-red-orange-yellow-900);

    border-radius: 10px;
    transition: 0.2s;
    transform: translateY(10px);
  }
  /* hambergurmenu rotation when opens and close */
  .mobile-nav-toggle.active::before {
    transform: translateY(0px) rotate(45deg);
    box-shadow: 0 0 0 var(--clr-neutral-100);
  }
  .mobile-nav-toggle.active::after {
    transform: translateY(0px) rotate(-45deg);
  }
 

  .primary-header {
    position: relative;
    z-index: 1000;
  }
  /* NAVIGATION(SMALL-SCREENS)_hide-the-navigation-in small screens */
  .primary-navigation  {
    display: none;
  }
  /* NAVIGATION(SMALL-SCREENS)_bring it back to life and build it */
  .primary-navigation.active {
    display: block;
    position: fixed;
    inset: 5rem 1rem auto;
    max-width: 30rem;
    background-color: var(--clr-neutral-900);
    border-radius: var(--size-200);
    padding: var(--size-700) var(--size-800);
    box-shadow: 0 0 0.75em rgb(0,0,0, 0.2);
  }

  /* 480px */
  @media (max-width: 30em) {
    .primary-navigation.active {
      max-width: 20rem;
    }
  }


  /* NAVIGATION(SMALL-SCREENS)_mobile-menu-background-noise and opacity */
  .primary-header.active::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 1));
    background-image: url('./images/particles.jpg');
    background-repeat: repeat;
    opacity: 0.6;
  } 
  /* NAVIGATION(SMALL-SCREENS)_layout */
   .primary-navigation__list {
    display: grid;
    gap: var(--size-500);
    text-align: center;
  }  
}






/* ======================== */
/* SECTION: MONITOR   */
/* ======================== */
.monitor {
  position: relative;
  max-width: 600px;
  height: 280px;
  padding: 1rem;
  font-size: 1.8rem;
  /* font-weight: var(--fw-bold); */
  font-style: italic;
  color: var(--clr-primary-400);
  border: 6px solid var(--clr-primary-400);
  border-radius: 6px;
  border-bottom: 30px solid var(--clr-primary-400);
  cursor: pointer;

  /* background-image: url(./images/scanlines.png);  */
  background-color: #e2e3e1;
  /* background-blend-mode: overlay; */
  
  transition: transform 2000ms;
  transform: rotate(4deg);
} 
@media (max-width: 460px) {
  .monitor {
    max-width: 400px;
  }
}

.monitor:hover {
  transform: skewX(-2deg);
}
/* the base of the screen */
.monitor::before {
  position: absolute;
  content: '';
  width: 70px;
  height: 70px;
  background-color: var(--clr-primary-400);
  bottom: -70px;
  left: 50%;
  transform: translateX(-50%);  
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
.monitor::after {
  position: absolute;
  content: '';
  width: 160px;
  height: 10px;
  background-color: var(--clr-primary-400);
  bottom: -75px;
  left: 50%;
  transform: translate(-50%);
}
.monitor p {
  position: absolute;
  color: white;
  font-size: .7rem;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-weight: var(--fw-bold);
  letter-spacing: 0.5px;
}
.monitor img {
  position: relative;
  width: 30px;

}

/* typewriter: pipe cursor */
 .monitor__cursor {
  font-weight: var(--fw-bold);
  animation: blink 1000ms linear infinite;
  color: #0072ef;
} 

/* take the opacity from 100% down to 0% and then back to 100% */
@keyframes blink {
  0% {
    opacity: 100%;
  }
  50% {
    opacity: 0%;
  }
}



/* =========================================================== */
/* SECTION: REMOTE CONTROL (THEME SWITCHER - COLOR PICKER) */
/* =========================================================== */
/* SECTION: PICK YOUR THEME */


/* ============================ */
/* REMOTE CONTROL STARTS HERE */
/* ============================= */


/* REMOTE-CONTROL_the box of the remote control, the fieldset element itself) */
.color-picker > fieldset {
  border: 0;
  display: flex;
  flex-direction: column;
  
  gap: var(--size-600);
  width: fit-content;
  /* off white */
  /* margin-inline: auto; */
  background-color: var(--clr-neutral-100);
  background-color: #ddd;
  padding: 1em 3em;
  border: 3px solid black;
  border-top: 10px solid black;
  border-radius: 10px;
  
  box-shadow: 12px 9px 11px -3px rgba(0,0,0,0.39);
  -webkit-box-shadow: 12px 9px 11px -3px rgba(0,0,0,0.39);
  -moz-box-shadow: 12px 9px 11px -3px rgba(0,0,0,0.39);
  
  transform: rotate(10deg);
}
.color-picker fieldset > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* REMOTE-CONTROL_text above the radio buttons */
label.light-toggle-text {
  color: var(--clr-neutral-100);
  font-size: var(--size-300);
  font-weight: var(--fw-bold);
}
label.dark-toggle-text {
  color: var(--clr-neutral-900);
  font-size: var(--size-300);
  font-weight: var(--fw-bold);
}
label.console-toggle-text {
  color: var(--clr-ms-dos-green);
  font-size: var(--size-300);
  font-weight: var(--fw-bold);
}

/* REMOTE-CONTROL_the shape of radio buttons */
.color-picker input[type='radio'] {
  appearance: none;
  width: 1rem;
  height: 1rem;
  outline: 3px solid var(--radio-color, currentColor);
  outline-offset: 3px;
  border-radius: 50%;
  cursor: pointer;
  /* transition: 0.2s; */
}

/* REMOTE-CONTOL_the color of the circle of radio buttons */
.color-picker input[type="radio"]#light {
  --radio-color: var(--clr-neutral-100);
}
.color-picker input[type="radio"]#dark {
  --radio-color: var(--clr-neutral-900);
}
.color-picker input[type="radio"]#console {
  --radio-color: var(--clr-ms-dos-green);
}

/* REMOTE-CONTROL_once the radio button is checked, clicked it is filled with background color */
.color-picker input[type='radio']:checked {
  background-color: var(--radio-color);
}


/* REMOTE-CONTROL_the magic happens here! THE SWITCH */
/* LIGHT THEME */
:root:has(#light:checked) {
  --clr-body-bg: var(--clr-neutral-100);
  --clr-text: var(--clr-primary-400);
}
/* DARK THEME */
:root:has(#dark:checked) {
  --clr-body-bg: var(--clr-neutral-900);
  --clr-text: var(--clr-neutral-100);
}
/* CONSOLE GREEN THEME */
:root:has(#console:checked) body,
:root:has(#console:checked) h1,
:root:has(#console:checked) h2,
:root:has(#console:checked) h3,
:root:has(#console:checked) .cursor {
  background-color: var(--clr-ms-dos-green);
  color: var(--clr-neutral-900);
  font-family: monospace;
}

/* REMOTE-CONTROL_fallback :has() */
/* LIGHT THEME FALLBACK */
.light {
  --clr-body-bg: var(--clr-neutral-100);
  --clr-text: var(--clr-primary-400);
}
.light .text-color-modifier {
  color: #fff;
}
/* DARK THEME FALLBACK */
.dark {
  --clr-body-bg: var(--clr-neutral-900);
  --clr-text: var(--clr-neutral-100);
}
.dark .typewriter-text {
  color: var(--clr-primary-400);
  color: #ddd;
  background-color: #828282;
  /* background-color: #333; */
}
.dark .text-color-modifier {
  color: var(--clr-neutral-900);
}
.dark .card-as-link {
  box-shadow: 0px 10px 20px 2px rgba(0,0,0,0.25);
  -webkit-box-shadow: 0px 10px 20px 2px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 10px 20px 2px rgba(0,0,0,0.25);
}

/* CONSOLE THEME FALLBACK */
.console body,
.console h1,
.console h2,
.console h3,
.console.cursor {
  background-color: var(--clr-ms-dos-green);
  /* color: var(--clr-neutral-900); */
  font-family: monospace;
}
/* the last blue link was not visible */
.console .primary-navigation__list li:last-child a {
  color: blue;
  text-decoration-color: blue;
}
.console .typewriter-text {
  background-color: limegreen;
  color: #000;
  font-family: 'Courier New', Courier, monospace;
}
.console .monitor {
  color: var(--clr-ms-dos-green);
  background-color: black;
}
.console .monitor p {
  color: var(--clr-ms-dos-green);
}
.console .text-color-modifier {
  color: var(--clr-ms-dos-green);
}

.console .card-as-link {
  box-shadow: 0px 10px 20px 2px rgba(0,0,0,0.25);
  -webkit-box-shadow: 0px 10px 20px 2px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 10px 20px 2px rgba(0,0,0,0.25);
}


/* ========================= */
/* SECTION: NUMBERED LIST */
/* ========================== */
.numbered-items {
  counter-reset: count;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}

/* 944px */
@media (max-width: 59em) {
  .numbered-items {
    grid-template-columns: 1fr;
    place-items: center;
  }
}


.text-layout {
  /* grid-column: 1 / -1; */
  /* choose one of two for media queries */
  grid-column: 2 / -1;
  
}
/* 460px */
@media (max-width: 460px) {
  .text-layout {
    font-size: var(--fs-400);
    grid-column: 2 / -1;
  }
  .numbered-items h3 {
    font-size: var(--fs-600);
  }
}
@media (max-width: 330px) {
  .text-layout {
  grid-column: 1 / -1;

  }
}
.numbered-items li {
  counter-increment: count;

}

.numbered-items div {
  display: grid;
  align-items: center;
  grid-template-columns: min-content  1fr;
  column-gap: 1rem;
  position: relative;

}

/* the actual numbers */
.numbered-items div::before {
  content: "0" counter(count);
  display: flex;
  align-items: center;
  background-color: var(--clr-orange-quotation);
  font-weight: var(--fw-bold);
  font-size: 1.3rem;
  padding: 1em;
  border-radius: 8px;
  letter-spacing: 1px;
}


.title-layout {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}




/* ====================== */
/* SECTION: CARDS */
/* ====================== */
.card-as-link {
  border-radius: 33px;
  max-width: 300px;
  overflow: hidden;
  transition: transform 1000ms;
}
.card-as-link:hover {
  transform: translateY(-0.75rem);
  transition: transform 250ms;
}

/* ======================== */
/* Unique Bullet Point li */
/* ======================== */
.fun-bullets.bounce{ padding-left:0; margin:0; }
.fun-bullets.bounce li{
  list-style:none;
  padding-left:2.4rem;
  margin:.6rem 0;
  position:relative;
  transition: transform .12s;
}
.fun-bullets.bounce li::before{
  content:"🔸";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  transition: transform .28s;
  font-size:1.3rem;
}
.fun-bullets.bounce li:hover::before{
  transform: translateY(-55%) rotate(-10deg) scale(1.25);
}


/* =================================== */
/* SECTION: Infinite Scroll Animation */
/* =================================== */
.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list li {
  padding: var(--padding-card-tag-lr);
  background: var(--clr-primary-400);
  background: var(--clr-green-800);
  border-radius: 0.5rem;
  /* box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900); */
  color: var(--clr-neutral-100);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold)

}

.one-column-center {
  display: grid;
  place-items: center;
}

.scroller {
  max-width: 250px;
 
}
.scroller-inner-layout {
  padding-block: 1rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;

}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 90%, transparent);
}

.scroller[data-animated="true"] .scroller-inner-layout {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}


/* ==================== */
/* CONTACT FORM */
/* ==================== */
.contact-form {
  padding-block: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 2rem;
  /* background-color: #333339; */
  opacity: 0.8;
  border-radius: 15px;
}
@media (min-width: 600px) {
  .contact-form {
    width: 45%;
    margin: auto;
  }
}


input[type=text] {
  /* background-color: lightblue; */
  padding: 1em 3em;
  border-radius: 15px;
  border: 3px solid var(--clr-primary-400);
  
}

input[type=email] {
  /* background-color: lightblue; */
  border-radius: 15px;
  border: 3px solid var(--clr-primary-400);
  
  padding: 1em 3em;
}

textarea[name=message] {
  padding: 1em 3em;
  border-radius: 15px;
  border: 3px solid var(--clr-primary-400);
}

button[type=submit] {
  border: none;
  font-weight: var(--fw-bold);
  padding: 1em 3em;
  background: var(--gradient-linear-red-orange-yellow-900);
  border-radius: 15px;
  color: white;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 400ms ease;
}
button[type=submit]:hover {
  transform: translateY(-3px);
}




/* ======================== */
/* Google Recaptcha badge */
/* ======================== */
.grecaptcha-badge {
  display: none !important;
}

.grecaptcha-notify {
  text-align: center;
  border-radius: 10px;
  line-height: var(--line-height-400);
  font-size: var(--fs-side-comments);
}