*,
*::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;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

a {
  color: inherit;
}

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

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

@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 */
  --clr-white: #fff;
  --clr-black: #000;
  --clr-off-black-light: hsl(207, 11%, 19%);
  --clr-off-black-dark: hsl(232, 12%, 13%); 
  --clr-gray-light: #ddd;
  --clr-gray-dark: #333;
  --clr-gray-scheme-light: #afcfd3;
  --clr-gray-scheme-dark: #859da0;
  --clr-blue-dark: #0000FF;
  --clr-blue-light: #3998e0;
  --clr-blue-bright: #0096FF;
  --clr-blue-sky: #87CEEB;
  --clr-blue-buccaneer: #056B7A; 
  --clr-yellow-deep: rgb(239, 190, 1);
  --clr-yellow-bright: rgb(255,237,41);
  --clr-yellow-light: rgb(255,255,197);
  --clr-orange-dark: #FF5533;
  --clr-orange-light: #FF9D8A;
  --clr-red-light: #eb313d;
  --clr-red-light-2: #FFB8B8;
  --clr-red-dark: rgb(226, 22, 22);
  --clr-red-dark-2: #7A1505;
  --clr-green-dark: rgb(46, 139, 87);
  --clr-green-light: #B8FFB8;
  --clr-facebook: #1877F2; 
  --clr-instagram: #c13584; 
  --clr-tiktok:  #FE2C55; 
  --clr-youtube: #FF0000; 
  --clr-purple-dark: #FF00FF;
  --clr-purple-light: #FF8AFF;
  
  /* FONT FAMILY */
  --ff-body-system-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-body-google: 'Open Sans', sans-serif;
  --ff-display-google: Lilita One, sans-serif;
  --ff-display: '';
  
  /* FONT SIZE */
  --fs-300: 0.6rem;
  --fs-400: 1rem;
  --fs-500: 1.2rem;
  --fs-600: 2rem;
  --fs-700: 3rem;
  --fs-800: 3.5rem;
  --fs-900: 5rem; 

  --fs-body-normal: var(--fs-400);
  --fs-body-large: var(--fs-500);
  --fs-primary-heading: var(--fs-900);
  --fs-secondary-heading: var(--fs-800);
  --fs-tertiary-heading: var(--fs-700);
  --fs-side-comments: var(--fs-300);

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

  /* FONT STYLE */
  --fs-italic: italic;

  /* LINE HEIGHT */
  --line-height-100: 1.1;
  --line-height-400: 1.5;
  --line-height-500: 1.6;
  --line-height-600: 1.7;
  
  --line-height-display: var(--line-height-100);
  --line-height-body: var(--line-height-400);

  /* TEXT ALIGN */
  --text-align-center: center;
  --text-align-right: right;
  --text-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: ;
  
  /* Takes care the spacing in a container */
  /* It uses margin top */
  /* It doen not affect the first element */
  --flow-spacer-100: 0.25rem;
  --flow-spacer-200: 0.5rem;
  --flow-spacer-300: 0.75rem;
  --flow-spacer-400: 1rem;
  --flow-spacer-500: 1.25rem;
  --flow-spacer-600: 1.5rem;
  --flow-spacer-700: 1.75rem;
  --flow-spacer-800: 2rem;
  --flow-spacer-900: 2.25rem;

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

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



/* ================== */
/* COLORS */
/* ================== */

/* TEXT */
.text-color-white {
  color: var(--clr-white);
}
.text-color-black {
  color: var(--clr-black);
}
.text-color-off-black-light {
  color: var(--clr-off-black-light);
}
.text-color-off-black-dark {
  color: var(--clr-off-black-mdium);
}
.text-color-gray-very-light {
  color: var(--clr-gray-very-light);
}
.text-color-gray-dark {
  color: var(--clr-gray-dark);
}
.text-color-blue {
  color: var(--clr-blue);
}
.text-color-red-light {
  color: var(--clr-red-light);
}
.text-color-red-dark {
  color: var(--clr-red-dark);
}
.text-color-yellow-deep {
  color: var(--clr-yellow-deep);
}
/* BACKGROUND */
.bg-color-white {
  background-color: var(--clr-white);
}
.bg-color-black {
  background-color: var(--clr-black);
}
.bg-color-off-black-light {
  background-color: var(--clr-off-black-light);
}
.bg-color-off-black-dark {
  background-color: var(--clr-off-black-dark);
}
.bg-color-gray-light {
  background-color: var(--clr-gray-light);
}
.bg-color-gray-dark {
  background-color: var(--clr-gray-dark);
}
.bg-clr-gray-scheme-light {
  background-color: var(--clr-gray-scheme-light);
}
.bg-clr-gray-scheme-dark {
  background-color: var(--clr-gray-scheme-dark);
}
.bg-clr-blue-dark {
  background-color: var(--clr-blue-dark);
}
.bg-clr-blue-light {
  background-color: var(--clr-blue-light);
}
.bg-clr-blue-bright {
  background-color: var(--clr-blue-bright);
}
.bg-clr-blue-sky {
  background-color: var(--clr-blue-sky);
}
.bg-clr-yellow-deep {
  background-color: var(--clr-yellow-deep);
}
.bg-clr-yellow-light {
  background-color: var(--clr-yellow-light);
}
.bg-clr-yellow-bright {
  background-color: var(--clr-yellow-bright);
}
.bg-red-light {
  background-color: var(--clr-red-light)
}
.bg-red-light-2 {
  background-color: var(--clr-red-light-2)
}
.bg-red-dark {
  background-color: var(--clr-red-dark)
}
.bg-red-dark-2 {
  background-color: var(--clr-red-dark-2)
}
.bg-clr-green-dark {
  background-color: var(--clr-green-dark);
}
.bg-clr-green-light {
  background-color: var(--clr-green-light);
}
.bg-clr-purple-dark {
  background-color: var(--clr-purple-dark);
}
.bg-clr-purple-light {
  background-color: var(--clr-purple-light);
}
.bg-clr-blue-buccaneer {
  background-color: var(--clr-blue-buccaneer);
}
.bg-clr-orange-dark {
  background-color: var(--clr-orange-dark);
}
.bg-clr-orange-light {
  background-color: var(--clr-orange-light);
}
/* ===================== */
/* TEXT SHADOWS */
/* ====================== */
/* for white text contrast */
.text-shadow-on-white {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.text-shadow-glow {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}


/* ========================= */
/* TYPOGRAPHY */
/* =========================*/

/* FONT FAMILY */
.ff-body-system-ui {font-family: var(--ff-body-system-ui);}
.ff-body-google {font-family: var(--ff-body-google);}
.ff-display {font-family: var(--ff-display-google);}


/* FONT SIZE */
.fs-100 {font-size: var(--fs-100);}
.fs-200 {font-size: var(--fs-200);}
.fs-300 {font-size: var(--fs-300);}
.fs-400 {font-size: var(--fs-400);}
.fs-500 {font-size: var(--fs-500);}
.fs-600 {font-size: var(--fs-600);}
.fs-700 {font-size: var(--fs-700);}
.fs-800 {font-size: var(--fs-800);}
.fs-850 {font-size: var(--fs-850);}
.fs-860 {font-size: var(--fs-860);}
.fs-900 {font-size: var(--fs-900);}

.fs-body-normal {font-size: var(--fs-body-normal);}
.fs-body-large {font-size: var(--fs-body-large);}
.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);}

/* body normal: 16px; */
/* body large: 20.8px; */
/* primary heading: 80px */
/* seconday heading: 56px */
/* tertiary heading: 48px */
/* side comments: 9.6px */

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

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



/* MAXIMUM FONT SIZE: 4rem */
.fs-fluid-max-4rem {
  font-size: 4rem;
}
/* from 456px to 350px */
@media (max-width: 28.5em) {
  .fs-fluid-max-4rem {
    font-size: 3rem;
  }
}
/* 350px and below */
@media (max-width: 21.875em) {
  .fs-fluid-max-4rem {
    font-size: 2.5rem;
  }
}


/* MAXIMUM FONT SIZE: 3rem */
.fs-fluid-max-3rem {
  font-size: 3rem;
}
/* from 456px to 350px */
@media (max-width: 28.5em) {
  .fs-fluid-max-3rem {
    font-size: 2rem;
  }
}
/* 350px and below */
@media (max-width: 21.875em) {
  .fs-fluid-max-3rem {
    font-size: 2rem;
  }
}


/* SOLUTION FOR SMALL TYPOGRAPHY */
/* MAXIMUM FONT SIZE: 1rem */
.fs-fluid-max-1_2rem {
  font-size: 1.2rem;
}
/* from 456px to 350px */
@media (max-width: 28.5em) {
  .fs-fluid-max-1_2rem {
    font-size: 0.8rem;
  }
}
/* 350px and below */
@media (max-width: 21.875em) {
  .fs-fluid-max-1_2rem {
    font-size: 0.6rem;
  }
}

/* MAXIMUM FONT SIZE: 0.9rem */
.fs-fluid-max-0_9rem {
  font-size: 0.9rem;
}
/* from 456px to 350px */
@media (max-width: 28.5em) {
  .fs-fluid-max-0_9rem {
    font-size: 0.7rem;
  }
}
/* 350px and below */
@media (max-width: 21.875em) {
  .fs-fluid-max-0_9rem {
    font-size: 0.6rem;
  }
}


/* 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);}

/* FONT STYLE */
.font-style-italic {font-style: var(--fs-italic)}

/* LINE HEIGHT */
.line-height-display {line-height: var(--line-height-display);}
.line-height-body {line-height: var(--line-height-body);}
.line-height-large {line-height: var(--line-height-600);}

/* TEXT ALIGN */
.text-align-center {text-align: var(--text-align-center);}
.text-align-right {text-align: var(--text-align-right);}
.text-align-left {text-align: var(--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;}

/* BORDER RADIUS */
.br-round-small {border-radius: 20px;}

/* 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 BOTTOM */
.padding-bottom-600 {
  padding-bottom: var(--size-600);
}
.padding-bottom-900 {
  padding-bottom: var(--size-900);
}

/* PADDING SPACE AROUND = all sides (top, right, bottom, left) */

.padding-space-around-300 {
  padding: var(--size-300);
}
.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-top-400 {
  margin-top: var(--size-400);
}
.margin-top-500 {
  margin-top: var(--size-500);
}
.margin-top-600 {
  margin-top: var(--size-600);
}
.margin-top-700 {
  margin-top: var(--size-700);
}
.margin-top-800 {
  margin-top: var(--size-800);
}
.margin-top-900 {
  margin-top: var(--size-900);
}

/* MARGIN LEFT & RIGHT */
.margin-inline-400 {
  margin-inline: var(--size-400);
}
/* MARGINS TOP & BOTTOM */
.margin-block-400 {
  margin-block: var(--size-400);
}
.margin-block-600 {
  margin-block: var(--size-600);
}
.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-100 :not(:first-child)) {
  margin-top: var(--flow-spacer-100);
}
:where(.flow-spacer-200 :not(:first-child)) {
  margin-top: var(--flow-spacer-200);
}
:where(.flow-spacer-300 :not(:first-child)) {
  margin-top: var(--flow-spacer-300);
}
:where(.flow-spacer-400 :not(:first-child)) {
  margin-top: var(--flow-spacer-400);
}
:where(.flow-spacer-500 :not(:first-child)) {
  margin-top: var(--flow-spacer-500);
}
:where(.flow-spacer-600 :not(:first-child)) {
  margin-top: var(--flow-spacer-600);
}
:where(.flow-spacer-700 :not(:first-child)) {
  margin-top: var(--flow-spacer-700);
}
:where(.flow-spacer-800 :not(:first-child)) {
  margin-top: var(--flow-spacer-800);
}
:where(.flow-spacer-900 :not(:first-child)) {
  margin-top: var(--flow-spacer-900);
}

/* ======================= */
/* 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; */
  /* border: 2px solid green; */
}
@media (max-width: 500px) {
  .container {
    --horizontal-margin: 1rem;
  }
}



/* =========================================== */
/* LAYOUT_Grid X Columns with media break points */
/* =========================================== */
/* 1 COLUMN */
.grid-col-1-center {
  display: grid;
  place-items: center;
}

/* =============== */
/* 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 */
/* ================== */
.new-grid {
  border: 2px solid seagreen;
  display: grid;
  /* grid-auto-flow: column; */
  /* grid-auto-columns: 1fr; */
  /* place-items: center; */
}

.grid-cols-3-break-point-912 {
  display: grid;
  gap: var(--size-700);
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
}

/* 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 - 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-62 {
  --max-width-char-62: 62ch;
  max-width: var(--max-width-char-62);
}
.max-width-char-52 {
  --max-width-char-52: 52ch;
  max-width: var(--max-width-char-52);
}
.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)
}
.max-width-char-5 {
  --max-width-char-5: 5ch;
  max-width: var(--max-width-char-5)
}


/* ========================== */
/* IMAGES LAYOUT & WIDTH */
/* ========================== */
/* Static 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-7_0rem {width: 7rem;}
.img-w-8_0rem {width: 8rem;}
.img-w-10_rem {width: 10rem;}

/* Fluid Width */
/* 900px */
@media (max-width: 56.25em) {
  .img-fluid-break-point-900 {
    width: 8rem;
  }
}






/* 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 */
  }
}


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