/*           
    .-++####### +               
   ..++++++-+# +     .            
   .      -##- +  .+##+             ✦ ────────────────────────── 𓆩✧𓆪 ──────────────────────────────── ✦
         .### +..#######.            
     .---+### .++.  .###-.                               The Kade King Network
    .--+##### .-.   -+.                 ────────────────────────────────────────────────────────────
         #### .-. ++.                   TM & © 2021–2025 The Kade King Network. All Rights Reserved.
      .-..### .+######-                 Unauthorized copying, modification, or redistribution of this   
     .-+##### .+ .-####+.                  stylesheet, in whole or in part, is strictly prohibited.
        +###  -.    +####.          
       .##-..#...   .+####.  .      ✦ ────────────────────────── 𓆩✧𓆪 ──────────────────────────────── ✦   
      .+-+#+++####+++.-####+.      
    .#---+.  --++#.   -+##+.   

Kade King Website [Version Alpha Testing 1.0]
(c) Kade King Network. All rights reserved.
*/


/* ──────────────────────────────────────────────
✦ BACKGROUND, SCROLL, FONTS, CURSOR, FUNCTIONS ✦
───────────────────────────────────────────────── */
html, body {
  overflow-x: hidden;         /* HA scroll kill switch */

  min-height      : 100vh;    /* Ctrl+Alt+A aligns */
  min-width       : 100vw;    /* Ctrl+Shift+P > Fold All */
  margin          : 0;
  background-color: #080808;
}
.reference-img {

  /* https://southpark.cc.com/ */
  /* https://www.adultswim.com/rick-and-morty */
  /* https://www.adultswim.com/videos/rick-and-morty */
  /* https://viewportsizer.com/what-is-my-screen-size/ */
  
  position: absolute;
  width   : 100%;     /* Width full length of the screen */
  height  : auto;    /* Retains aspect ratio */
  display : block;  /* Removes any inline spacing issues */
  z-index : -1;    /* send it behind everything */
}
:focus {
  outline: none; /* Hides annoying boarder pop up */
}
::-webkit-scrollbar {
      width: 6px;                 /* ultra-thin */
      background: transparent;    /* no track */
      /* Creates custom thin scroll bar */  
}
::-webkit-scrollbar-track {
      background: transparent !important;
}
::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.25);   /* low-contrast floating bar */
      border-radius: 50px;
      border: 2px solid transparent;          /* makes it appear even thinner */
      background-clip: padding-box;           /* keeps the bar visually slim */
}
::-webkit-scrollbar-button {
    display: none;
}
/* To get: JUST sans, Nimbus, etc. */
/* FONT-FACES:
'BootlegTimBurton'
'Sevastopol' 
'DrawFont'
'Roboto'  - Need to allow for all weighting, import like public
'ArthemysDisplay'
'Cormorant'
'Work Sans' - Remove previous imports and stick to new imports? Does my new weighting work?
'Public Sans'

System UI - font-family: system-ui, -apple-system, "Segoe UI", "Segoe UI Symbol", Roboto, Arial, sans-serif;
*/
@font-face {
  font-family: 'BootlegTimBurton';
  src        : url('../fonts/BootlegTimBurton.woff2') format('woff2'), url('../fonts/BootlegTimBurton.woff') format('woff');
  font-weight: normal;
  font-style : normal;
}
@font-face {
  font-family: 'Sevastopol';
  src: url('../fonts/sevastopol.ttf') format('truetype');
  font-weight : normal;
  font-style  : normal;
  font-display: swap;
}
@font-face {
  font-family: 'DrawFont';
  src        : url('../fonts/DrawFont.woff2') format('woff2'), url('../fonts/DrawFont.woff') format('woff');
  font-weight: normal;
  font-style : normal;
}
/* Mod this */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
  font-weight : 400;
  font-style  : normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
  font-weight : 500;
  font-style  : normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Bold.ttf') format('truetype');
  font-weight : 700;
  font-style  : normal;
  font-display: swap;
}
/* ^ */
/* Mod Arthemys for just numbers and remove meta data. */
@font-face {
  font-family: 'ArthemysDisplay';
  src        : url('../fonts/ArthemysDisplay.woff2') format('woff2'), url('../fonts/ArthemysDisplay.woff') format('woff');
  font-weight: normal;
  font-style : normal;
}
@font-face {
  font-family: 'Cormorant';
  src        : url('../fonts/CormorantGaramond.woff2') format('woff2'), url('../fonts/CormorantGaramond.woff') format('woff');
  font-weight: normal;
  font-style : normal;
}
/* Remove here? */
@font-face {
  /* Vietnamese */
  font-family  : 'Work Sans';
  font-style   : normal;
  font-weight  : 400;
  font-display : swap;
  src          : url(https://fonts.gstatic.com/s/worksans/v24/QGYsz_wNahGAdqQ43Rh_c6Dpp_k.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family  : 'Work Sans';
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
    src          : url(https://fonts.gstatic.com/s/worksans/v24/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family  : 'Work Sans';
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
    src          : url(https://fonts.gstatic.com/s/worksans/v24/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family  : 'Work Sans';
    font-style   : normal;
    font-weight  : 700;
    font-display : swap;
    src          : url(https://fonts.gstatic.com/s/worksans/v24/QGYsz_wNahGAdqQ43Rh_c6Dpp_k.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family  : 'Work Sans';
    font-style   : normal;
    font-weight  : 700;
    font-display : swap;
    src          : url(https://fonts.gstatic.com/s/worksans/v24/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family  : 'Work Sans';
    font-style   : normal;
    font-weight  : 700;
    font-display : swap;
    src          : url(https://fonts.gstatic.com/s/worksans/v24/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ^ */
@font-face {
  font-family : 'Work Sans';
  font-style  : normal;
  font-display: swap;
  font-weight : 100 900;
  src         : url(https://cdn.jsdelivr.net/fontsource/fonts/work-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family  : 'Work Sans';
  font-style   : italic;
  font-display : swap;
  font-weight  : 100 900;
  src          : url(https://cdn.jsdelivr.net/fontsource/fonts/work-sans:vf@latest/latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family  : 'Public Sans';
  font-style   : normal;
  font-display : swap;
  font-weight  : 100 900;
  src          : url(https://cdn.jsdelivr.net/fontsource/fonts/public-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family  : 'Public Sans';
  font-style   : italic;
  font-display : swap;
  font-weight  : 100 900;
  src          : url(https://cdn.jsdelivr.net/fontsource/fonts/public-sans:vf@latest/latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family : "Nimbus Sans L";
  font-style  : normal;
  font-weight : 300;
  font-display: swap;
  src         : url("https://db.onlinewebfonts.com/t/05c2c6630ebb447b301f8c0278299ca5.woff2") format("woff2");
}
@font-face {
  font-family : "Nimbus Sans L";
  font-style  : normal;
  font-weight : 800;
  font-display: swap;
  src         : url("https://db.onlinewebfonts.com/t/0cfa1bf4d57d3dd86fc56867bd885797.woff2") format("woff2");
}
/* Inter Variable (CDN-hosted, open-source) */
@font-face {
  font-family  : 'Inter';
  font-style   : normal;
  font-display : swap;
  font-weight  : 100 900;
  src          : url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family  : 'Inter';
  font-style   : italic;
  font-display : swap;
  font-weight  : 100 900;
  src          : url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family  : 'Helvetica Web';
  font-style   : normal;
  font-display : swap;
  font-weight  : 100 900;
  src          : url(/fonts/helvetica-vf-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family  : 'Helvetica Web';
  font-style   : italic;
  font-display : swap;
  font-weight  : 100 900;
  src          : url(/fonts/helvetica-vf-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/*html, body, a, button, input, textarea, select, canvas, iframe, *  {
  /* cursor: url(cursor/feather.png) 0 0, auto;    /* Cursor Styles */
  /* cursor: url(cursor/feather.png) 8 8, auto;    /* Moves click point 8px right, 8px down from top left 
}*/



/* ──────────────────────
✦ DEVTOOLS - DEBUGGING ✦
────────────────────── */

/* :root {
  --dev-color1: red; 
  --dev-color2: orange;
  --dev-color3: yellow;
  --dev-color4: green;
  --dev-color5: blue;
  --dev-color6: purple;
} */

/* RESOURCES:
HEX TO FILTER: https://codepen.io/sosuke/pen/Pjoqqp
https://simpleicons.org/?q=spot ICONS 
https://super.so/icons SVG Iconpacks
https://www.flaticon.com/search/2?word=play ICONS
 */

/* NOTES:
- MOBILE LAYOUT STARTS AT 750PX
*/
/* PATCH NOTES:
- Custom cursor clippiing on bottom y and right x.
- Latest episodes hover effecting on text and shouldn't be
- Is hero image really in grid or positioned to veiwport?
- Hover NEW! to be put in grid and automated with timer
- Hero images to be fetched from server to load faster and get from latest video
- .episodes to be overriden
- Style mobile layout min 500 based on youtube layout
- Smooth scroll only working on one page.
- Paragrah1 is too big. Shrink it down to Rick and morty size. 
- Newsletter header font overhaul, and shrink down text appropriatly 
- Can An alternative server control the 'web' maintenence, & submit data
with a private key. And password info in Vercel.
- Lander vdieo: Move down. Dial 
- Turn into a terminal page that i can submit data too like announcements?
- Simplify Episodes css stylesheet.
- Load episodes seciton within the main container x2.
- Create PSD With all newsletters elements layed out. 
- Put newsletters in respective folder & create script for loading all of them
with reference links pointing to eachother
- Newsletter.. exclusive fonts? Exclusive crest? Newsletters can be writen
by others, and have their name placed in it. 
- Hit box is too big for latest episodes, should only work on image hover
and then stick is inside prime section container.
- Fix and detail hamburger menu, correct positioning.
- Brave browsers information loads & link being shared
- 404 page to be set.
- Typeography especially for nav bar.
- Spotlight on Newsletter? Use gothic type font? Leading display section set up like newspaper. Black and white images?
or should have blur hue to them?
- All section to be in respective folders with page #ref links.
- Lander video to be server loaded to allow for bigger file? 
- Shop section basic layout? - Or create later. 
- Maybe expand max threshold for outer container (fill with -var) and have global in blurprints.
- Could have pure text sections in newsletter if needed. Or bio sections with headers and descriptional paragraphs. 
- Will come back to Shine comments
- Add "window" like in PSRIM that opens as a news request. centered in page with an X arrow.
- - Draw out full side naviation panel
- Adjust size of nav panel closer to youtube
- Glitch text animation to be a pattern and not just string, so it can be applied
as a class
- Section 1 shrinking: 2 lines rule for description, with ... as expandable.
- Title reduces to NEW RELEASE from 1200px to 900px ?
- Mobile spacing for section 1 & determin mobile button sizing
- Copy scrollable from cruncy roll mobile, import seperatly. 
- Later link details to section 1 descriptions.
- ALL Episodes serach algorithm needs to be as advanced as youtube. Reference their algorithm. 
*/


/* ─────────────
✦ BLUEPRINTS ✦
───────────── */
.nobr {
  /* Prevents line breaks in html */
  white-space: nowrap;
}
.nohighlight {
  user-select      : none;
  -webkit-user-drag: none;
}
.tooltip{
  /* Add in with class="tooltip" data-tip="My List" */
  position       : relative;
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  overflow       : visible;
}
.tooltip::after{
  content : attr(data-tip);
  position: absolute;
  left    : 50%;
  bottom  : calc(100% + 10px);

  background             : rgba(0, 0, 0, 0.62);
  backdrop-filter        : blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform              : translateX(-50%) translateY(8px) scale(0.92);
  transform-origin       : 50% 100%;

  padding      : 10px 10px;
  border-radius: 4px;

  font-family   : 'Public Sans', sans-serif;
  font-size     : 11px;
  font-weight   : 300;
  letter-spacing: 0.2px;
  color         : rgba(255,255,255,0.92);
  white-space   : nowrap;

  opacity       : 0;
  pointer-events: none;
  z-index       : 9999;
  transition    : 
    opacity 120ms ease,
    transform 220ms cubic-bezier(.15, 1.25, .25, 1);
}
.tooltip:hover::after,
.tooltip:focus-visible::after{
  opacity  : 1;
  transform: translateX(-50%) translateY(0px) scale(1);
}
h1 {
  font-size     : 2.09rem;
  font-family   : 'Helvetica', sans-serif;
  font-weight   : bold;
  color         : rgb(255, 255, 255);
  user-select   : text;
  pointer-events: auto;
  user-select   : text;
  /* user-select: none;      This prevents the user from highlighting the text */
  /* pointer-events: none;   This prevents the user from clicking this         */
}
h2 {
  font-size     : 1.9rem;
  font-family   : 'Helvetica', sans-serif;
  font-weight   : bold;
  color         : rgb(255, 255, 255);
  user-select   : text;
  pointer-events: auto;
  user-select   : text;
  /* user-select: none;      This prevents the user from highlighting the text */
  /* pointer-events: none;   This prevents the user from clicking this         */
}
h3 {
  font-size     : 1.4rem;
  font-family   : 'Helvetica', sans-serif;
  font-weight   : bold;
  color         : rgb(255, 255, 255);
  user-select   : text;
  pointer-events: auto;
  user-select   : text;
  /* user-select: none;      This prevents the user from highlighting the text */
  /* pointer-events: none;   This prevents the user from clicking this         */
}
.title1 {
  font-family   : 'Work Sans', sans-serif;
  font-weight   : 500;
  font-size     : 30px;  /* Was at 25px */
  letter-spacing: 0.25px;
  line-height   : 21.5253px;
  color         : rgb(255, 255, 255);
}
.title2 {
  font-family   : 'Helvetica Web', sans-serif;
  /* Increase the weighting */
  font-weight   : 900;  /* 400 was standard */
  font-size     : 30px;  /* Was at 25px */
  letter-spacing: 25px;  /* 0.25px 19px */
  line-height   : 35px;
  color         : rgb(255, 255, 255);
  margin: 0px;
}
.title2-1 {
  font-family   : 'Arail', sans-serif;
  /* Increase the weighting */
  font-weight   : 600;  /* 400 was standard */
  font-size     : 30px;  /* Was at 25px */
  letter-spacing: 15px;  /* 0.25px 19px */
  line-height   : 35px;
  color         : rgb(255, 255, 255);
  margin: 0px;
}
.title3 {
  font-family   : 'Work Sans', sans-serif;
  /* Increase the weighting */
  font-weight   : 500;
  font-size     : 20px;  /* Was at 25px */
  letter-spacing: 0.25px;
  line-height   : 35px;
  color         : rgb(255, 255, 255);
  margin: 0px;
}
.paragraph1 {
  font-size     : 1.4rem;
  font-family   : 'Helvetica', sans-serif;
  letter-spacing: -0.7px;
  color         : #fff;
}
.paragraph1-1 {
  font-size     : 1.4rem;
  font-family   : 'Roboto', sans-serif;
  letter-spacing: -0.02em;
  color         : rgb(255, 255, 255);

  transform: scaleY(0.95);
  display  : inline-block;
}
.paragraph2 {
  /* Renovated */
  font-family   : 'Work Sans', sans-serif;
  font-weight   : 400;
  /* font-size     : 1.027rem; */
  font-size     : 12px;
  /* letter-spacing: -0.3px; */
  letter-spacing: 0.25px;
  line-height   : 21.5253px;
  color         : #fff;
}
.paragraph2-1 {
  /* Renovated */
  font-family   : 'Work Sans', sans-serif;
  /* Drop the weight */
  font-weight   : 300;
  font-size     : 13px;  /* Was at 12 */
  /* letter-spacing: -0.3px; */
  letter-spacing: 0.25px;
  line-height   : 21.5253px;
  color         : #fff;
}
.paragraph2-2 {
  /* Original Helvetica */
  font-size     : 1.027rem;
  font-family   : 'Helvetica', sans-serif;
  letter-spacing: -0.3px;
  color         : rgb(255, 255, 255);
}
.paragraph2-3 {
  font-family   : 'Public Sans', sans-serif;
  font-weight   : 300;
  font-size     : 12px;  /* Was at 12 */
  letter-spacing: 0.25px;
  line-height   : 21.5253px;
  color         : #fff;
}
.paragraph2-4 {
  font-family   : 'Work Sans', sans-serif;
  font-weight   : 300;
  font-size     : 11px;
  /* letter-spacing: -0.3px; */
  letter-spacing: 0.25px;
  line-height   : 21.5253px;
  color         : #ffffff;
}
.paragraph2-5 {
  /* Renovated */
  font-family   : 'Work Sans', sans-serif;
  font-weight   : 500;
  /* font-size     : 1.027rem; */
  font-size     : 11px;
  /* letter-spacing: -0.3px; */
  letter-spacing: 0.8px;
  line-height   : 21.5253px;
  color         : #fff;
}
.paragraph2-6 {
  /* Renovated */
  font-family   : 'Public Sans', sans-serif;
  /* Drop the weight */
  font-weight   : 400;
  font-size     : 14px;  /* Was at 12 */
  /* letter-spacing: -0.3px; */
  letter-spacing: 0px;
  line-height   : 21.5253px;
  color         : #fff;
}
.paragraph3 {
  font-size     : 0.66rem;
  font-family   : 'Helvetica', sans-serif;
  font-weight   : bold;
  letter-spacing: -0.26px;
  color         : rgb(255, 255, 255);
}
.paragraph4 {
  font-weight   : bold;
  font-size     : 1.2rem;
  font-family   : 'Helvetica', sans-serif;
  letter-spacing: 0px;
  color         : rgb(255, 255, 255);
}
.paragraph5 {
  font-weight   : bold;
  font-size     : 0.8rem;
  font-family   : 'Helvetica', sans-serif;
  letter-spacing: 0px;
  color         : rgb(255, 255, 255);
}
.paragraph5-1 {
  font-weight   : bold;
  font-size     : 0.8rem;
  font-family   : 'Roboto', sans-serif;
  letter-spacing: 0.07em;
  color         : rgb(255, 255, 255);

  transform: scaleY(0.9);
  display  : inline-block;
}
.paragraph6 {
  font-size     : 0.739rem;                 /* For navigation links */
  font-family   : 'Helvetica', sans-serif;  /* Used in footer navigation text*/
  letter-spacing: -0.3px;
  color         : rgb(255, 255, 255);
  user-select   : text;
  cursor        : pointer !important;
}
.paragraph7 {
  font-size     : 3rem;                 /* For navigation links */
  font-family   : 'Cormorant', sans-serif;  /* Used in footer navigation text*/
  letter-spacing: 0px;
  color         : rgb(255, 255, 255);
  user-select   : text;
  margin: 0px;
}
.paragraph7-1 {
  font-size     : 16px;                 /* For navigation links */
  font-family   : 'Cormorant', sans-serif;  /* Used in footer navigation text*/
  letter-spacing: 0px;
  color         : rgb(255, 255, 255);
  user-select   : text;
  margin: 0px;
}
.paragraph8 {
  /* Work Sans Acents */
  font-family   : 'Work Sans', sans-serif;
  font-weight   : 400;
  font-size     : 9.6px;
  letter-spacing: 0.25px;
  line-height   : 21.5253px;
  color         : rgba(122, 122, 122, 0.908);
}
.paragraph8-1 {
  /* Work Sans Acents */
  font-family   : 'Work Sans', sans-serif;
  font-weight   : 400;
  font-size     : 9.8px;
  letter-spacing: 0.25px;
  line-height   : 21.5253px;
  color         : #a5a5a5;
}
.paragraph9 {
  /* Comments Content Username */
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  line-height: 20px;
  font-size  : 14px;
  color      : #fff;

  margin       : 0;
  padding      : 0;
  margin-bottom: 3.5px;
  transform    : scaleY(0.95)
}
.paragraph9-1 {
  /* Comments Content Username */
  font-family: 'Works Sans', sans-serif;
  font-weight: 400;
  line-height: 20px;
  font-size  : 14px;
  color      : #fff;

  margin       : 0;
  padding      : 0;
  margin-bottom: 3.5px;
  transform    : scaleY(0.95)
}
.paragraph10 {
  /* Renovated */
  font-family   : 'sevastopol', sans-serif;
  font-weight   : 400;
  font-size     : 25px;
  letter-spacing: 2px;
  line-height   : 21.5253px;
  color         : #fff;
}
.paragraph11 {
  /* Nimbus Has issues */
  font-family   : 'Nimbus Sans L', sans-serif;
  font-weight   : 400;
  font-size     : 13px;
  letter-spacing: 0px;
  line-height   : 21.5253px;
  color         : #fff;
}
.paragraph12 {
  font-family   : 'Times New Roman', sans-serif;
  font-weight   : 400;
  font-size     : 13px;
  letter-spacing: 0.3px;
  line-height   : 21.5253px;
  color         : #ffffff;
}

.paragraph10-1 {
  /* Renovated */
  font-family   : 'sevastopol', sans-serif;
  font-weight   : 400;
  font-size     : 25px;
  letter-spacing: 2px;
  line-height   : 21.5253px;
  color         : #fff;
  border: 1px white solid;
}
/* Will be added to js and comments engine, Color determined by like count */
:root {
  /* Text Shine Values */
  --textshine-base : #a80808;
  --textshine-ramp1: #d93c3d;
  --textshine-ramp2: #fa6568;
  --textshine-shine: #f86f71;
  --textshine-innerglow : rgba(168, 8, 8, 0.5);
  --textshine-middleglow: rgba(250, 101, 104, 0.7);
  --textshine-outerglow : rgba(250, 101, 104, 0.4);

  --textshine-base : #ca85fe;
  --textshine-ramp1: #d39afe;
  --textshine-ramp2: #deb5fd;
  --textshine-shine: #ebd5fc;
  --textshine-innerglow : rgba(91, 8, 168, 0.5);
  --textshine-middleglow: rgba(163, 101, 250, 0.7);
  --textshine-outerglow : rgba(166, 101, 250, 0.4);

  --textshine-base : #929292;
  --textshine-ramp1: #b8b8b8;
  --textshine-ramp2: #d7d7d7;
  --textshine-shine: #ffffff;
  --textshine-innerglow : rgba(91, 8, 168, 0.5);
  --textshine-middleglow: rgba(163, 101, 250, 0.7);
  --textshine-outerglow : rgba(166, 101, 250, 0.4);

  --textshine-base : #9d9d9d;
  --textshine-ramp1: #d7d7d7;
  --textshine-ramp2: #e7e7e7;
  --textshine-shine: #ffffff;
  --textshine-innerglow : rgba(123, 79, 164, 0.5);
  --textshine-middleglow: rgba(185, 143, 245, 0.7);
  --textshine-outerglow : rgba(184, 138, 244, 0.4);

  --textshine-innerglow : rgba(148, 113, 181, 0.5);
  --textshine-middleglow: rgba(206, 177, 247, 0.7);
  --textshine-outerglow : rgba(184, 138, 244, 0.4);
  
  --textshine-base : #9d9d9d;
  --textshine-ramp1: #d7d7d7;
  --textshine-ramp2: #e7e7e7;
  --textshine-shine: #ffffff;
  --textshine-innerglow : rgba(175, 150, 198, 0.5);
  --textshine-middleglow: rgba(209, 194, 229, 0.5);
  --textshine-outerglow : rgba(204, 175, 243, 0.4);

  /* --textshine-base : #76959e;
  --textshine-ramp1: #b8b8b8;
  --textshine-ramp2: #d7d7d7;
  --textshine-shine: #ffffff;
  --textshine-innerglow : rgba(79, 161, 164, 0.5);
  --textshine-middleglow: rgba(143, 218, 245, 0.7);
  --textshine-outerglow : rgba(138, 232, 244, 0.4); */

  /* --textshine-base : #9d9d9d;
  --textshine-ramp1: #d7d7d7;
  --textshine-ramp2: #e7e7e7;
  --textshine-shine: #ffffff;
  --textshine-innerglow : rgba(206, 190, 220, 0.5);
  --textshine-middleglow: rgba(236, 228, 246, 0.5);
  --textshine-outerglow : rgba(235, 224, 250, 0.4); */

  --textshine-base : #9d9d9d;
  --textshine-ramp1: #d7d7d7;
  --textshine-ramp2: #e7e7e7;
  --textshine-shine: #ffffff;
  --textshine-innerglow : rgba(248, 242, 254, 0.4);
  --textshine-middleglow: rgba(255, 255, 255, 0.4);
  --textshine-outerglow : rgba(255, 255, 255, 0.5);


}
.text-shine {
  position: relative;

  /* font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size  : 16px;
  white-space: nowrap; */

  color: transparent;
  background-image: repeating-linear-gradient(
    270deg,
    var(--textshine-base)  0px,   
    var(--textshine-base)  24px,   
    var(--textshine-ramp1) 32px,  
    var(--textshine-ramp2) 40px, 
    var(--textshine-shine) 60px,  
    var(--textshine-ramp1) 68px,   
    var(--textshine-base)  80px  
    /* 0 → 24 [BASE] 24 → 32 [RAMP1] 32 → 40 [RAMP2] 40 → 60 [SHINE] 60 → 68 [RAMP1] 68 → 80 [BASE] | 80px [MAX VAL] */
  );

  background-repeat      : repeat-x;
  background-size        : auto 100%;
  background-position    : 0 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 3px var(--textshine-innerglow),     /* Inner Backing Glow */
    0 0 6px var(--textshine-middleglow),   /* Middle Surround Glow */
    0 0 10px var(--textshine-outerglow);  /* Outer Soft Glow */

  animation: shine 1.4s linear infinite;
}
@keyframes shine {
  from {
    background-position: -80px 0;
  }
  to {
    background-position: 0 0;
  }
}
.text-float {
  position : absolute;
  top      : 17%;
  left     : 64.5%;
  transform: translateX(0);

  font-family   : 'BootlegTimBurton', sans-serif;
  font-size     : 4.2rem;
  letter-spacing: -1.2px;
  color         : #fffd6c;

  user-select   : text;
  pointer-events: auto;
  z-index       : 11;
  opacity       : 1;

  text-shadow: 0 0 30px rgba(255, 253, 108, 1);
  animation  : float 3s ease-in-out infinite;
}
.text-float2 {
  position : absolute;
  top      : 17%;
  left     : 75%;
  transform: translateX(0);

  font-family   : 'DrawFont', sans-serif;
  font-size     : 4.2rem;
  letter-spacing: -1.2px;
  color         : #c3e9ff;

  user-select   : text;
  pointer-events: auto;
  z-index       : 11;
  opacity       : 1;

  text-shadow: 0 0 30px rgb(116, 199, 255);
  animation  : float 3s ease-in-out infinite;
}
.text-float3 {
  font-family   : 'DrawFont', sans-serif;
  font-size     : 4.2rem;
  letter-spacing: -1.2px;
  color         : #c3e9ff;
  line-height   : 0px;

  user-select   : text;
  pointer-events: auto;
  z-index       : 11;
  opacity       : 1;

  text-shadow: 0 0 30px #74c7ff;
  animation  : float 3s ease-in-out infinite;
}
.text-float4 {
  margin-left: 40px;
  font-size     : 4.2rem;
  letter-spacing: -1.2px;
  color         : #c3e9ff;
  line-height   : 0px;
  letter-spacing: 1px;

  user-select   : text;
  pointer-events: auto;
  z-index       : 11;
  opacity       : 1;

  text-shadow: 0 0 30px #74c7ff;
  animation  : float 3s ease-in-out infinite;
}
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.text-typewriter {
  white-space: pre-wrap;
}
.text-typewriter.cursor::after {
  /* Text indicator cursor */
  display: inline-block;
  content: "";

  width      : 0.6ch;
  height     : 1em;
  margin-left: 0.15ch;
  transform  : translateY(-0.5em); /* Move up / down */

  background    : currentColor;
  vertical-align: bottom;
  animation     : blink 1s infinite;
}
@keyframes blink {
  /* 0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; } */
}
.text-typewriter2 {
  white-space: pre-wrap;
}
.text-typewriter2.cursor::after {
  /* Text indicator cursor */
  display: inline-block;
  content: "";

  width      : 0.6ch;
  height     : 1em;
  margin-left: 0.15ch;
  /* transform  : translateY(-0.5em); */

  background    : currentColor;
  vertical-align: bottom;
  animation     : blink 1s infinite;
}
@keyframes blink {
  /* 0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; } */
}
.text-underline1 {
  position       : relative;
  display        : inline-block;
  text-decoration: none;
  color          : inherit;
}
.text-underline1::before {
  content : '';
  position: absolute;

  left      : 0;
  right     : 0;
  bottom    : 0;
  height    : 1px;
  background: currentColor;

  transform       : scaleX(0);
  transform-origin: left;
  transition      : transform 0.3s ease;
}
.text-underline1:hover::before {
  transform: scaleX(1);
}
.text-underline2{
  position       : relative;
  display        : inline-block;
  text-decoration: none;
  color          : inherit;
  cursor         : pointer;
}
.text-underline2::before{
  content : '';
  position: absolute;

  left      : 0;
  right     : 0;
  bottom    : 0;
  height    : 0.8px;
  background: currentColor;

  transform       : scaleX(0);
  transform-origin: center;         
  transition      : transform 0.3s ease;
}
.text-underline2:hover::before{
  transform: scaleX(1);
}
.spotlight-overlay { 
  position: fixed;          
  
  background: radial-gradient(
    circle at var(--sx,50%) var(--sy,50%),
    rgba(255,255,255,0.08) 20%,         /* Center Glow */
    rgba(255,255,255,0.08) 20%,         /* Edge Glow */
    transparent 45%                       /* Radius Size */
  );
  filter        : blur(40px);
  mix-blend-mode: screen;
  border-radius : 8px;
  clip-path     : inset(0 round 0px);

  opacity       : 0;                      /* hidden by default */
  transition    : opacity .2s ease;
  pointer-events: none;
  z-index       : 100;
}
.spotlight-overlay-api { 
  position: fixed;  
          
  background: radial-gradient(
    circle at var(--sx,50%) var(--sy,50%),
    rgba(255,255,255,0.08) 20%,
    rgba(255,255,255,0.08) 20%,
    transparent 45%
  );
  filter        : blur(40px);
  mix-blend-mode: screen;
  border-radius : 8px;
  clip-path     : inset(0px 0 4px 0 round 0px);    /* 0 0 0 0 clockwise inset clip. round. boarder radius */

  opacity       : 0;
  transition    : opacity .2s ease;
  pointer-events: none;
  z-index       : 100;
}
.nlrelsptlightoverlay {
  position: fixed;
  
  background:
    radial-gradient(
      450px circle at var(--sx, 50%) var(--sy, 50%),
      rgba(255,255,255,0.035),        /* Was at 0.18 */
      rgba(255,255,255,0.028) 35%,   /* Was at 0.08 */
      rgba(255,255,255,0.01) 55%,  /* Was at 0.02 */
      transparent 70%
    );

  mix-blend-mode: screen;
  pointer-events: none;
  transition    : opacity 0.25s ease;
  opacity       : 0;
  z-index       : 50;
}
.nlrelsptlightcard {
  position: relative;
  overflow: hidden;
}
.nv-text {
  font-family   : 'Work Sans', sans-serif;
  font-weight   : 400;
  font-size     : 12px;
  letter-spacing: 0.25px;
  line-height   : 21.5253px;
  color         : rgb(255, 255, 255);
}
.nv-text1 {
  font-family   : 'Work Sans', sans-serif;
  font-weight   : 300;
  font-size     : 11px;
  letter-spacing: 1px;
  line-height   : 21.5253px;
  color         : rgb(255, 255, 255);
}
.cmt-user-name {
  /* Community Hub Comments Usernames */
  font-size     : 14px;
  font-family   : 'Roboto', sans-serif;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.0em;
  color         : rgb(255, 255, 255);

  transform: scaleY(0.95);
  display  : inline-block;
}
.cmt-age {
  font-size     : 12px;
  font-family   : 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.00em;
  color         : rgb(255, 255, 255);

  transform: scaleY(0.95);
  display  : inline-block;
}
.cmt-text {
  /* Episodes Gallery Title Sub-Desciption Text  */
  font-size     : 14px;
  font-family   : 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.00em;
  color         : rgb(255, 255, 255);

  
}
.cmt-user-name-test {
  /* Community Hub Comments Usernames */
  font-size     : 14px;
  font-family   : 'Roboto', sans-serif;
  font-weight: normal;
  line-height: 20px;
  letter-spacing: -0.0em;
  color         : rgb(255, 255, 255);

  transform: scaleY(0.95);
}
.cmt-age-test {
  font-size     : 12px;
  font-family   : 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.00em;
  color         : rgb(255, 255, 255);

  transform: scaleY(0.95);
  display  : inline-block;
}
.cmt-text-test {
  /* Episodes Gallery Title Sub-Desciption Text  */
  font-size     : 14px;
  font-family   : 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.00em;
  color         : rgb(255, 255, 255);

  
}
.numbers1 {
  font-size     : 3rem;                 /* For navigation links */
  font-family   : 'ArthemysDisplay', sans-serif;  /* Used in footer navigation text*/
  letter-spacing: 0px;
  line-height   : 0px;
  color         : rgb(255, 255, 255);
  user-select   : text;
  cursor        : pointer !important;
}
.divprimarycontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;  

  width : 100%;
  height: 15px;
  
  background: var(--dev-color1);   

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .dividercontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .dividercontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : 15px;
  }
}
.divinnercontainer {
  display    : flex;
  width      : 90%;
  height     : 100%;
  align-items: center;

  background: var(--dev-color2);
  min-width : 0;
}
.divider1 {
  width: 100%;           
  height: 0.1px;     

  background-color: #ececec;       
}
.divider2 {
  width : 90%;
  height: 1.8px;
  margin: 0 auto;

  background-color: #ececec;       
}
.divider3{
  display    : flex;
  align-items: center;
  width      : 100%;
}
.divider3::before,
.divider3::after{
  content   : "";
  flex      : 1;
  height    : 0.1px;
  background: rgba(255,255,255,0.35);
}
.divider3-text{
  margin     : 0 10px; /* Spacing betwen text / divider */
  white-space: nowrap;
}
.divider4 {
  width: 5%;           
  height: 1px;     

  margin: 15px 0px;
  background-color: #ececec;   
}
.divider5{
  display    : flex;
  align-items: center;
  width      : 100%;
}
.divider5::before,
.divider5::after{
  content   : "";
  flex      : 1;
  height    : 0.1px;
  background: #ffffff80;
}
.divider5-text{
  color: #ffffff80;
  margin     : 0 10px; /* Spacing betwen text / divider */
  white-space: nowrap;
}
.button1 {
                                        
  -webkit-font-smoothing : antialiased;     /* target="_blank":             This opens my my link in a new window */
  -moz-osx-font-smoothing: grayscale;       /* rel="noopener noreferrer":   Prevents security + privacy risks */

  display        : inline-flex;             /* Centers my text */
  align-items    : center;
  justify-content: center;
  box-sizing     : border-box;

  padding        : 0.79em 1.53em;
  background     : #ffffff;
  color          : #000000;
  border-radius  : 4px;
  text-decoration: none;

  font-family   : 'Helvetica', sans-serif;
  font-weight   : bold;
  font-size     : 1em;      /* Determines button sizing */
  letter-spacing: 0.2px;
  line-height   : 1.1;

  transition : box-shadow 540ms ease;
  will-change: box-shadow;
}
a.button1:hover {
  box-shadow:
    0 0 22px 4px rgb(255, 246, 246),
    0 0 48px 18px rgba(255, 0, 0, 0);
}
.button2 {
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;

  display        : inline-flex;             
  align-items    : center;
  justify-content: center;
  box-sizing     : border-box;

  padding        : 0.743em 1.53em;
  /* background     : #0a0b0b; */
  border         : 1.5px solid #ffffff;
  color          : #ffffff;
  border-radius  : 4px;
  text-decoration: none;

font-family   : 'Helvetica', sans-serif;
font-weight   : bold;
font-size     : 1em;      /* Determines button sizing */
letter-spacing: 0.2px;
line-height   : 1.1;

transition: background-color 0.3s ease, color 0.3s ease;
}
/* TO DO: Fade into white & Glow. */
a.button2:hover {
  background-color: white;
  color: #000000;
  transition: fade;
}
.button3 {
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;

  display        : inline-flex;             
  align-items    : center;
  justify-content: center;
  box-sizing     : border-box;

  padding        : 0.483em 0.748em;
  background     : #0a0b0b;
  border         : 1.5px solid #ffffff;
  color          : #ffffff;
  border-radius  : 4px;
  text-decoration: none;

  font-family   : 'Helvetica', sans-serif;
  font-weight   : bold;
  font-size     : 1em;      /* Determines button sizing */
  letter-spacing: 0.2px;
  line-height   : 1.1;

  transition: transform 0.05s ease, background 0.2s ease, border-color 0.2s ease;
}
a.button3:hover {
  background-color: white;
  color: #000000;
  /* To Do */
}
/* Needs to be adaptive to the text thats changed inside */
/* Needs work: Should only be on one line, no text break, should expand with padding not text size (might fix previous issue)
Should make small ones as big? Idk. New loading animation? Or idk. |
Loading animation no longer working: Suspect new glow corrections
*/
.button4 {
  display         : flex;
  align-items     : center;
  justify-content : center;
  background-color: transparent;

  width : 200px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.4);
  color : #ffffff;
  margin: 15px;

  text-decoration: none;
  letter-spacing : .12em;
  font-family    : var('Works Sans', sans-serif);
  font-size      : 0.9rem;

  background:
  /* Was 8px 1px */
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - .5px) calc(100% + .5px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 1px 5px no-repeat;

  /* Load Animation */
  opacity    : 0;
  transform  : translateY(20px);
  transition : opacity .4s ease, transform .6s ease;
  transition : box-shadow 100ms ease;
  will-change: box-shadow;
}
.button4:hover {
  background-color: #ffffffe3;
  color: #000;
  
  box-shadow:
    0 0 18px 4px rgba(255, 246, 246, 0.267),
    0 0 48px 18px rgba(255, 0, 0, 0);
}
.button4.is-ani {
  opacity: 1;
  transform: translateY(0);
}
.button4-0 {
  display         : inline-flex;     
  align-items     : center;
  justify-content : center;
  box-sizing      : border-box;
  background-color: transparent;

  padding: 10px 0px;
  margin: 0px 0px;
  border: 1px solid rgba(0, 0, 0, 0);
  color : #ffffff;

  text-decoration: none;
  letter-spacing : .12em;
  line-height: 0px;
  font-family    : 'Work Sans', sans-serif;
  font-size      : 0.9rem;


  /* Load Animation */

  transition : opacity .4s ease, transform .6s ease;
  transition : box-shadow 100ms ease;
  will-change: box-shadow;
}
.button4-0:hover {
  color: #ffffffdb;
  cursor:rgb(255, 255, 255)nter;
  
}
.button4-1 {
  display         : inline-flex;     
  align-items     : center;
  justify-content : center;
  box-sizing      : border-box;
  background-color: transparent;

  padding: 12px 63px;
  border: 1px solid rgba(255,255,255,0.4);
  color : #ffffff;
  margin: 0px;

  text-decoration: none;
  letter-spacing : .12em;
  font-family    : 'Work Sans', sans-serif;
  font-size      : 0.9rem;

  background:
  /* Was 8px 1px */
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - .5px) calc(100% + .5px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 1px 5px no-repeat;

  /* Load Animation */

  transition : opacity .4s ease, transform .6s ease;
  transition : box-shadow 100ms ease;
  will-change: box-shadow;
}
.button4-1:hover {
  background-color: #ffffffe3;
  color: #000;
  
  box-shadow:
    0 0 18px 4px rgba(255, 246, 246, 0.267),
    0 0 48px 18px rgba(255, 0, 0, 0);
}
.button4-2 {
  display         : inline-flex;     
  align-items     : center;
  justify-content : center;
  box-sizing      : border-box;
  background-color: transparent;

  padding: 12px 1.53em;
  border: 1px solid rgba(255,255,255,0.4);
  color : #ffffff;

  text-decoration: none;
  letter-spacing : .12em;
  font-family    : 'Work Sans', sans-serif;
  font-size      : 0.9rem;

  background:
  /* Was 8px 1px */
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - .5px) calc(100% + .5px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 1px 5px no-repeat;

  /* Load Animation */

  transition : opacity .4s ease, transform .6s ease;
  transition : box-shadow 100ms ease;
  will-change: box-shadow;
}
.button4-2:hover {
  background-color: #ffffffe3;
  color: #000;
  
  box-shadow:
    0 0 18px 4px rgba(255, 246, 246, 0.267),
    0 0 48px 18px rgba(255, 0, 0, 0);
}
.button4-3 {
  display         : inline-flex;     
  align-items     : center;
  justify-content : center;
  box-sizing      : border-box;
  background-color: transparent;

  height: 40px;
  width: 40px;
  /* padding: 12px 63px; */
  border: 1px solid rgba(255,255,255,0.4);
  color : #ffffff;
  margin-right: 15px;

  text-decoration: none;
  letter-spacing : .12em;
  font-family    : 'Work Sans', sans-serif;
  font-size      : 0.9rem;

  background:
  /* Was 8px 1px */
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(100% + 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 1px 5px no-repeat;

  /* Load Animation */

  transition : opacity .4s ease, transform .6s ease;
  transition : box-shadow 100ms ease;
  will-change: box-shadow;
}
.button4-3:hover {
  background-color: #ffffffe3;
  color: #000;
  
  box-shadow:
    0 0 18px 4px rgba(255, 246, 246, 0.267),
    0 0 48px 18px rgba(255, 0, 0, 0);
}
.button4-4 {
  /* Search Button */
  display         : inline-flex;     
  align-items     : center;
  justify-content : center;
  box-sizing      : border-box;
  background-color: transparent;

  padding: 12px 63px;
  border: 1px solid rgba(255,255,255,0.4);
  color : #ffffff;
  margin: 15px;

  text-decoration: none;
  letter-spacing : .12em;
  font-family    : 'Work Sans', sans-serif;
  font-size      : 0.9rem;

  background:
  /* Was 8px 1px */
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - .5px) calc(100% + .5px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 1px 5px no-repeat;

  /* Load Animation */

  transition : opacity .4s ease, transform .6s ease;
  transition : box-shadow 100ms ease;
  will-change: box-shadow;
}
.button4-5 {
  display         : inline-flex;     
  align-items     : center;
  justify-content : center;
  box-sizing      : border-box;
  background-color: transparent;

  padding: 12px 63px;
  border: 1px solid rgba(255,255,255,0.4);
  color : #ffffff;
  margin: 0px;

  text-decoration: none;
  letter-spacing : .12em;
  font-family    : 'Work Sans', sans-serif;
  font-size      : 0.9rem;

  background:
  /* Was 8px 1px */
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - .5px) calc(100% + .5px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 1px 5px no-repeat;

  /* Load Animation */

  transition : opacity .4s ease, transform .6s ease;
  transition : box-shadow 100ms ease;
  will-change: box-shadow;

  background-color: #ffffffe3;
  color: #000;
}
.button4-5:hover {
  background-color: #ffffffe3;
  color: #000;
  
  box-shadow:
    0 0 18px 4px rgba(255, 246, 246, 0.267),
    0 0 48px 18px rgba(255, 0, 0, 0);
}
.button4-icon{
  --btn-size : 40px;                       
  --btn-gap  : 15px;                       
  --icon-size: 21px;                       

  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  box-sizing     : border-box;

  width       : var(--btn-size);
  height      : var(--btn-size);
  margin-right: var(--btn-gap);

  background-color: transparent;
  border          : 1px solid rgba(255,255,255,0.4);
  text-decoration : none;
  line-height     : 0;

  background:
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(100% + 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 1px 5px no-repeat;

  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  will-change: box-shadow;
}
.button4-icon-img{
  display   : block;
  width     : var(--icon-size);
  height    : var(--icon-size);
  object-fit: contain;



  filter: brightness(0) invert(1);

  transition: filter 160ms ease, opacity 160ms ease;
}
.button4-icon:hover{
  background-color: #ffffffe3;
  box-shadow:
    0 0 18px 4px rgba(255, 246, 246, 0.267),
    0 0 48px 18px rgba(255, 0, 0, 0);
}
.button4-icon:hover .button4-icon-img{
  filter: none;
}
.nlnavbtn-left .button4-icon:last-child{
  margin-right: 0;  /* Removes spacing on last child */
}
/* Make corrections here */
.button5 {
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  box-sizing      : border-box;
  background-color: transparent;

  width  : 35px;
  height : 35px;
  /* padding: 8px 11px; */
  /* How do i remove that bottom padding first before finding the correct padding? */
  /* Text isn't centering correctly inside off button */
  border: 1px solid rgba(255,255,255,0.4);
  color : #ffffff;
  margin-left: 15px;   /* Remove later */
  text-decoration: none;

  font-family   : 'Work Sans', sans-serif;
  font-weight   : normal;
  font-size     : 1em;      /* Determines button sizing */
  /* letter-spacing: 0.2px; */
  letter-spacing : -0.01em;
  line-height   : 1.1;
  /* line-height: -0.8em; */

  
  background:
  /* Was 8px 1px */
    linear-gradient(#fff 0 0) calc(0% - .5px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - .5px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + .5px) calc(0% - 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(0% - 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(0% - .5px) calc(100% + 1px) / 1px 5px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 5px 1px no-repeat,
    linear-gradient(#fff 0 0) calc(100% + 1px) calc(100% + 1px) / 1px 5px no-repeat;

  /* Load Animation */
  opacity   : 0;
  transform : translateY(20px);
  transition: opacity .4s ease, transform .6s ease;
  /* transition: transform 0.05s ease, background 0.2s ease, border-color 0.2s ease; */
}
.button5:hover {
  background-color: #ffffffe3;
  color: #000;
}
.button5.is-ani {
  opacity: 1;
  transform: translateY(0);
}
/* Search button needs smalLer mobile modifications */
.button4-4.search-button {
  display    : inline-block;
  box-sizing : border-box;

  padding    : 12px 63px;
  margin     : 0;
  border     : 1px solid rgba(255,255,255,0.4);

  font-family   : 'Work Sans', sans-serif;
  font-size     : 0.9rem;
  letter-spacing: 0.12em;
  text-align    : left;

  /* IMPORTANT: DONT set `background` here. Keeps corner ticks intact
}

.button4-4.search-button,
.button4-4.search-button:hover,
.button4-4.search-button:focus,
.button4-4.search-button:active,
.button4-4.search-button:focus-visible {
  background-color       : transparent !important; /* no white fill */
  color                  : #ffffff !important;
  caret-color            : #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  appearance        : none;
  -webkit-appearance: none;
  outline           : none;
}
.button4-4.search-button::placeholder {
  color          : rgba(255,255,255,0.6);
  letter-spacing : 0.2em;
}
.button4-4.search-button:not(:placeholder-shown)::placeholder {
  opacity: 0;
}
.button4-4.search-button:-webkit-autofill,
.button4-4.search-button:-webkit-autofill:hover,
.button4-4.search-button:-webkit-autofill:focus,
.button4-4.search-button:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  box-shadow             : 0 0 0 1000px transparent inset !important;
  transition             : background-color 999999s ease-out 0s;
}
.button4-4.search-button:hover,
.button4-4.search-button:focus,
.button4-4.search-button:focus-visible {
  box-shadow:
    0 0 12px rgba(255,255,255,0.04),
    0 0 28px rgba(255,255,255,0.02);
}

#snowfall {
  position: fixed;
  inset   : 0;
  width   : 100vw;
  height  : 100vh;

  pointer-events: none;
  z-index       : 9999;
  background    : transparent;
}
::selection {
  /* Text highlight color */
  background: rgba(255, 255, 255, 0.84); 
  color     : #000000;                          
}
::-moz-selection {
  background: rgba(255, 255, 255, 0.22);
  color     : #fff;
}
* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.18); /* Mobile Tap */
}

/* REFERENCE: SoloLevelingTypography */
.paragraph_sl1 {
	line-height:1;
	font-size:min(calc(20 / var(--vw-min) * 100vw),20px);
	font-family: 'Work Sans', sans-serif;
	letter-spacing: 0.025em;
	color:rgba(255,255,255,.4)
}
.paragraph_sl2 {
	font-family: 'Work Sans', sans-serif;
	color:#fff;
	letter-spacing: 0.025em;
	font-size:min(calc(16 / var(--vw-min) * 100vw),16px);
	line-height:1;
	margin-right:min(calc(3 / var(--vw-min) * 100vw),3px);
}
.paragraph_sl4 {
  /* Copyright */
	font-size:min(calc(10 / var(--vw-min) * 100vw),10px);
	font-family: 'Work Sans', sans-serif; 
	letter-spacing: 0.025em;
	color:rgba(255,255,255,.4);
}
.paragraph_sl5 {
	line-height:1;
	font-size:min(calc(12 / var(--vw-min) * 100vw),12px);
	color:#fff;
	font-family: 'Work Sans', sans-serif;
}


@media (max-width: 1280px) and (min-width: 1150px) {
  h1 {
    font-size: 1.9rem;
  }
  h3 {
    font-size: 1.27rem;
  }
  .paragraph1 {
    font-size: 1.4rem;
  }
  .paragraph2 {
    font-size: 0.9rem;
  }
  .paragraph4 {
    font-size: 1.13rem;
  }
  .ep-title {
    font-size: 1.15625rem;
  }
  .ep-meta {
    font-size: 0.915rem;
  }
  .button1, .button2 {
    font-size: 0.9rem;
  }
}
@media (max-width: 1150px) and (min-width: 1050px) {
  h1 {
    font-size: 1.85rem;
  }
  h3 {
    font-size: 1.22rem;
  }
  .paragraph1 {
    font-size: 1.2rem;
  }
  .paragraph2 {
    font-size: 0.85rem;
  }
  .paragraph4 {
    font-size: 0.97rem;
  }
  .ep-title {
    font-size: 1.125rem;
  }
  .ep-meta {
    font-size: 0.840rem;
  }
  .button1, .button2 {
    font-size: 0.85rem;
  }
}
@media (max-width: 1050px) and (min-width: 950px) {
  h1 {
    font-size: 1.7rem;
  }
  h3 {
    font-size: 1.12rem;
  }
  .paragraph1 {
    font-size: 1.1rem;
  }
  .paragraph2 {
    font-size: 0.8rem;
  }
  .paragraph4 {
    font-size: 0.89rem;
  }
  .ep-title {
    font-size: 1.0625rem;
  }
  .ep-meta {
    font-size: 0.792rem;
  }
  .button1, .button2 {
    font-size: 0.8rem;
  }
}
@media (max-width: 950px) and (min-width: 0px) {
  h1 {
    font-size: 1.6rem;
  }
  h3 {
    font-size: 1.07rem;
  }
  .paragraph1 {
    font-size: 1rem;
  }
  .paragraph2 {
    font-size: 0.75rem;
  }
  .paragraph4 {
    font-size: 0.81rem;
  }
  .ep-title {
    font-size: 1rem;
  }
  .ep-meta {
    font-size: 0.744rem;
  }
  .button1, .button2 {
    font-size: 0.75rem;
  }
  /* Needs to shrink a size and all buttons should be font size relative */
  .button4, .button4-1, .button4-2, .button4-3, .button4-4.search-button {
    /* font-size: 10px; */
  }
  .paragraph7 {
    font-size: 37px;
  }
}



/* ──────────────────
✦ HOME SECTION ONE ✦
────────────────── */
.creationkey {
  --ep-title-margin: 0px 0 22px 0;
  --ep-dsc-margin: 0px 5px 21px 0;
  --ep-info-margin: 0 0 46px 0;
  --ep-button-margin: 0 0 0px 0;    /* With epinfo2: 0 0 60px 0 */
  --ep-button-gap: 1.2em;

  /* Dynamic Viewport Scaling Formula */
  margin-bottom: max(MIN px, min(MAX px, calc(0.0188 * (100vw - 750px))));
  /* max(min-marg, min(max-margin, slope = max-margin/(vw-start - vw-end) * (100vw - vw-end) */
  /* max(0,        min(MAX,                (MAX       / (1536 - 750))       * (100vw - 750))) */

  /* line-height: 100px; */

  /* Scale downratio: 2.048 */
}
.sectiondivider {
  position: relative;
  display : flex;

  width : 100%;
  aspect-ratio: 18.9;
  /* height: 60px; */
  
  background: var(--dev-color6);   
}
.primarycontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;   /* Allows correct inner padding */

  width       : 100%;
  aspect-ratio: 2.6;   /* From height 600px; */
  
  background: var(--dev-color1);   

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .primarycontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .primarycontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
.innercontainer {
  display: grid;
  
  width : 90%;     /* Gives 5% margins */
  height: 100%;

  background: var(--dev-color2);     

  grid-template-columns: 50% 4.5% 45.5%; /* Give me 3 colunms */
  grid-template-rows   : 15% 70% 15%;    /* Give me 3 rows    */
} 
.grid1 {
  grid-column: 1 / 2;
  grid-row   : 2 / 3;

  background: var(--dev-color4);

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */
} 
.grid1-1 {
  grid-column: 1 / 2;
  grid-row   : 2 / 3;

  background: var(--dev-color4);

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */
} 
.grid2 {
  grid-column: 2 / 3;
  grid-row   : 1 / 4;

  background: var(--dev-color3);
}
.grid3 {
  grid-column: 3 / 4;
  grid-row   : 2 / 3;

  color: #fff !important;

  background: var(--dev-color5);

  align-content: center;  /* Centers content vertically */
  justify-content: start; /* Left align content */

  /*align-content: start;*/  /* Positions content from top */
  /*padding-top  : 85px;*/   /* Pushed content down vertically */
}
@media (max-width: 750px) and (min-width: 0px) {
  .innercontainer {
    width : 93%;

    grid-template-columns: 100%; /* Give me 1 colunms */
    grid-template-rows   : 25px auto 25px auto 25px;    /* Give me 5 rows    */
  } 
  .grid1 {
    grid-column: 1 / 2;
    grid-row   : 2 / 3;

    grid-template-rows: auto;
  }
  .grid1-1 {
    
    grid-column: 1 / 2;
    grid-row   : 2 / 3;

    grid-template-rows: auto;
  }
  .grid2 {
    grid-column: 1 / 2;
    grid-row   : 3 / 4;
  }
  .grid3 {
    grid-column: 1 / 2;
    grid-row   : 4 / 5;

    grid-template-rows: auto;
  }
}
.s1-heroimg-ghost {
  position: relative;

  width        : 100%;
  aspect-ratio : 16 / 9;
  background   : #000;
  border-radius: 4px;

  overflow      : hidden;
  pointer-events: none;
  animation     : ghostBasePulse 1.6s ease-in-out infinite;
}
@keyframes ghostBasePulse {
  0%   { opacity: 0.6; }
  50%  { opacity: 0.9; }
  100% { opacity: 0.6; }
}
.s1-heroimg-ghost::after {
  content : "";
  position: absolute;
  inset   : 0;

  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.20) 50%,
    rgba(255,255,255,0.08) 60%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  mix-blend-mode : screen;

  animation: GhostLoaderShine 2.4s ease-in-out infinite;
}
@keyframes GhostLoaderShine {
  0%   { background-position: 200% 0; opacity: .7; }
  100% { background-position: -200% 0; opacity: .7; }
}
.s1-heroimg {
  position: relative;
  
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  z-index: 1;
}
.s1-heroimg-glow {
  position: relative;
  
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  filter : blur(25px) saturate(1.4);
  opacity: 0.9;

  pointer-events: none;
  z-index: 0;
}
.s1-heroimg-api {
  position: relative;      

  width : 100%;
  height: auto;

  background-size    : contain;
  background-position: center;
  background-repeat  : no-repeat;

  display        : flex;
  justify-content: center;
  align-items    : center;

  z-index: 1;
}
.s1-heroimg-glow-api {
  position: relative;      

  width : 100%;
  height: auto;

  background-size    : contain;
  background-position: center;
  background-repeat  : no-repeat;

  display        : flex;
  justify-content: center;
  align-items    : center;

  filter   : blur(25px) saturate(1.4);
  opacity  : 0.9;

  pointer-events: none;
  z-index       : 0;
}
.eptitle {
  margin-top   : 0px;
  margin-bottom: max(10.74px, min(22px, calc(0.0280 * (100vw - 750px))));

  color : var(--dev-color1);
}
.epdsc {
  margin-top   : 0px;
  margin-right : 5px;
  margin-bottom: max(10.25px, min(21px, calc(0.0267 * (100vw - 750px))));

  text-align: justify;

  color : var(--dev-color4);
}
.epinfo {
  margin-top   : 0px;
  /* margin-bottom: max(22.46px, min(46px, calc(0.0586 * (100vw - 750px)))); */
  margin-bottom: 30px;

  background-color: var(--dev-color2);
}
.epbuttons {
  margin-top   : 0px;
   margin-bottom: max(0px, min(0px, calc(0.0188 * (100vw - 750px))));

  display    : flex;
  align-items: center;

  gap: 1.2em; /* Spacing between buttons */
}
.epbuttons2{
  --icon-filter: invert(1) brightness(1.15); /* Icon color */
  --icon-gap   : 21px;
  --icon-size  : 21px;

  display    : flex;
  align-items: center;

  gap        : var(--icon-gap);
  margin     : 0;
  padding    : 0;
  line-height: 0;
}
.epbuttons2 a{
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  text-decoration: none;

  width : var(--icon-size);
  height: var(--icon-size);
}
.epbuttons2 img{
  display: block;

  width : var(--icon-size);
  height: var(--icon-size);

  filter    : var(--icon-filter);
  transition: filter .25s ease-in-out, opacity .25s ease-in-out;
}


.epinfo2 {
  margin: 0 0 0px 0;
  background-color : var(--dev-color6);
}
.text-inline2 {
  display: inline-block;
  text-align: right;
}


/* Needs fixing, especially for @750px */
/* Currently loading Above text. */
/* Could add vinget to fade it out */
#landerVideo {
  position:fixed;

  top      : 50%;
  left     : 50%;
  transform: translate(-50%, -50%);

  width: 100%;         
  height: auto;     

  min-height     : 100%;   
  object-fit     : cover;
  object-position: center;

  filter: blur(3px) saturate(100%) opacity(25%); /* Opacity was at 25% */

  pointer-events: none;
  z-index: 0;
}



/* Youtube embed testing */
/* Responsive YouTube embed */
.yt-embed{
  width: 100%;
}

/* 16:9 player box */
.yt-embed iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;

  border: 0;
  border-radius: 18px; /* remove if you want sharp corners */
  overflow: hidden;
}

/* Optional CTA row */
.yt-embed-cta{
  display: flex;
  align-items: center;
  gap: 14px;

  margin-top: 12px;
}

/* Button */
.yt-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 999px;

  text-decoration: none;
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 12px;

  color: #ffffff;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform 160ms ease, opacity 160ms ease;
}

.yt-cta-btn:hover{
  transform: translateY(-1px);
  opacity: 0.92;
}

/* Link */
.yt-cta-link{
  text-decoration: none;
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;

  color: rgba(255,255,255,0.82);
  transition: opacity 160ms ease;
}

.yt-cta-link:hover{
  opacity: 0.9;
}







/* ────────────
✦ NEWSLETTER ✦
──────────── */
.nlheaderprimarycontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;   /* Allows correct inner padding */

  width       : 100%;
  aspect-ratio: auto;
  height      : auto;
  
  background: var(--dev-color1);   

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .nlheaderprimarycontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .nlheaderprimarycontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
.nlheadercontainer {
  display: grid;
  
  width : 90%;     /* Gives 5% margins */
  height: 100%;

  margin-top   : 5.8%;
  margin-bottom: 0%;  /* Was at 5.8% */

  background: var(--dev-color2) !important;     

  grid-template-columns: auto;
  grid-template-rows   : auto auto auto;
} 
.nlheadgrid1 {
  grid-column: 1 / 1;
  grid-row   : 1 / 1;

  margin : 0px;
  padding: 0px;
}
.nlheadgrid2 {
  grid-column: 1 / 1;
  grid-row   : 2 / 2;
}
.nlheadgrid3 {
  display    : grid;
  grid-row   : 3 / 3;

  grid-template-columns: 1fr auto 1fr;

  width: 100%;

  background: var(--dev-color4);
}
.newslettertitle {
  margin: 0px;
  margin-bottom: 0px;
  text-align   : center;
}
.nlheadtext1 {
  grid-column: 1;

  line-height: 0px;
  margin     : 0px;
  margin-top : 6px;

  justify-self: start;   /* Left aligns text */
  text-align  : left;

}
.nlheadtext2 {
  margin: 0px;
  margin-top: 20px;

  justify-self: center;  /* Center aligns text */
  text-align  : center;
}
.nlheadtext3 {
  grid-column: 3;

  line-height: 0px;
  margin     : 0px;
  margin-top : 6px;

  justify-self: end;     /* Right aligns text */
  text-align  : right;
}

/* ───────────────────────
✦ NEWSLETTER NAVIGATION ✦
─────────────────────── */
.nlnavprimarycontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;   /* Allows correct inner padding */

  width       : 100%;
  aspect-ratio: auto;
  height      : auto;
  
  background: var(--dev-color1);   

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .nlnavprimarycontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .nlnavprimarycontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
.nlnavcontainer {
  display: grid;
  
  width : 90%;     /* Gives 5% margins */
  height: 100%;

  margin-top   : 1%;   /* Was 5.8%, then 0% */
  margin-bottom: 5.8%; /* Was 5.8% */

  background: var(--dev-color2) !important;     

  grid-template-columns: auto;
  grid-template-rows   : auto;
} 
.nlnavgrid1 {

  grid-column: 1 / 3;
  grid-row   : 1 / 1;

  background: var(--dev-color4) !important;

  display        : flex;     /* Makes grid cell a flex container  */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */

  grid-template-rows: auto;
}
.nlnavbtn-left {
  display: flex;
  gap    : 8px;
}
.nlnavbtn-right {
  margin-left    : auto;
  display        : flex;
  justify-content: flex-end;
}

/* ─────────────────────
✦ NEWSLETTER RELEASES ✦
───────────────────── */
/* Acts like steam news releases, as a news and updates page > Newsletters, Articles, Updates, Announcments */
/* Include load animations like SL */
/* Could add in role tags like: News or New tags, hover glow. Make it look more appealing */
/* Needs atual modificaiton so that the image stays x big and the dsc doesnt exceed 2-3lines. Ends with ... */
/* Scroll is messed up for some reason */
.nlrelprimarycontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;   /* Allows correct inner padding */

  width       : 100%;
  aspect-ratio: auto;
  height      : auto;
  
  background: var(--dev-color1);   

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .nlrelprimarycontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .nlrelprimarycontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
/* Spotlight messed up after 950px on scroll. Image needs to retain its size and force text over and descirption gets compressed
into a read more... */
.nlrelcontainer {
  display: grid;
  
  width : 90%;     /* Gives 5% margins */
  height: 100%;

  margin-top   : 0%; /* Was 5.8%*/
  margin-bottom: 4%;

  background   : var(--dev-color2);
  background   : black;
  border-top   : #a2a2a2 1px solid;
  border-bottom: #a2a2a2 1px solid;

  grid-template-columns: 25% 25px auto;
  grid-template-rows   : auto; /* Was auto */
} 
/* Needs refinement for acurate spacing */
.eventcontainer {
  display: grid;
  
  width : 90%;     /* Gives 5% margins */
  height: 100%;

  margin-top   : 0%; /* Was 5.8%*/
  margin-bottom: 4%;

  background   : var(--dev-color2);
  background   : black;
  border-top   : #a2a2a2 1px solid;
  border-bottom: #a2a2a2 1px solid;

  grid-template-columns: 15% 25px auto;
  grid-template-rows   : auto; /* Was auto */
} 
.nlrelgrid1 {

  grid-column: 1 / 1;
  grid-row   : 1 / 1;

  background: var(--dev-color4);

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */

  grid-template-rows: auto;
}
.nlrelgrid2 {
  grid-column: 2 / 2;
  grid-row   : 1 / 1;

  display        : flex;
  justify-content: center;
  align-items    : center;

  
  background: var(--dev-color3) !important;
}
.nlrelgrid3 {
  grid-column: 3 / 3;
  grid-row   : 1 / 1;

  /* padding-left: 1.8%; */
  /* padding-bottom: 1%; */
  /* padding-right: 5%; */

  background: var(--dev-color5) !important;
  background: #000000;

  display        : flex;
  flex-direction : column;
  align-content  : center;  /* Centers content vertically */
  justify-content: center;
}
.nlrelcoverimg {
  position: relative;
  
  /* height: 300px; */
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  z-index: 1;
}
.nlreldiv {
  height    : 100%;
  width     : 1px;
  background: #fff;
}
.nlreldivha {
  height      : 1px;
  width       : 100%;
  background  : #fff;
  margin      : 10px 0px; /* Height, width */
}
.nlreltitle {
  margin    : 0px;
  margin-top: 25px;
  font-size : 25px;
}
.nlrelpara {
  margin-right: 5%;
  text-align  : justify;
}
.eventpara {
  margin: 0px;
  margin-right: 5%;
  text-align  : justify;
}
.button4 {
  margin-left  : 0px;
  margin-bottom: 25px;
}
/* Needs to center text and stack MON/DAY etc. */
.event-date {
  width: 170px;
  height: 160px;
  background-color: #000000;
  color: white;
}
/* Image needs to be cropped to specific height */
/* Replace image with appropriate one. And have new fetches conform */
.nlrel-img {
  position: relative;
  
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  z-index: 1;
}
.nlrel-img-glow {
  position: relative;
  
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  filter : blur(25px) saturate(1.4);
  opacity: 0.6;           /* Was at 0.9 default */

  pointer-events: none;
  z-index: 0;
}
.nlrel-no-results {
  font-family   : 'Work Sans', sans-serif;
  font-weight   : 400;
  font-size     : 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align    : center;
  margin        : 24px auto 0;
  color         : rgba(255,255,255,0.85);
}
/* Hover spotlight should turn off here */
@media (max-width: 750px) and (min-width: 0px) {
  .nlrelcontainer {
    grid-template-columns: auto;
    grid-template-rows   : auto 2.8% auto;
    margin-top: 3%;
  }
  .nlrelgrid1 {
    grid-column: 1 / 1;
    grid-row   : 1 / 1;
  }
  .nlrelgrid2 {
    grid-column: 1 / 1;
    grid-row   : 2 / 2;
  }
  .nlrelgrid3 {
    grid-column: 1 / 1;
    grid-row   : 3 / 3;

    margin-top: -25px;
    margin-left: 20px;
  }
  .btnread {
    margin-bottom: 45px;
  }
}


/* ────────────────
✦ DISPLAY WINDOW ✦
──────────────── */
.windisprimarycontainer {
  position       : fixed;
  display        : flex;
  justify-content: center;
  align-items    : center;

  background     : rgba(0, 0, 0, 0.65);
  background     : var(--dev-color1) !important;
  backdrop-filter: blur(6px);

  opacity   : 1;
  inset     : 0;
  transition: opacity 0.25s ease;
  z-index   : 1000;
}
.windisprimarycontainer.hidden {
  opacity       : 0;
  pointer-events: none;
}
.windiscontainer {
  position: relative;

  padding   : 20px;
  width     : 500px;
  max-height: 70vh;
  overflow-y: auto;

  background   : var(--dev-color2);
  background   : #000000bf;
  border       : 1px solid #333;
  border-radius: 0px;

  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.windiscontent {
  font-family: 'Work Sans', sans-serif;
  font-size  : 14px;
  color      : #ddd;

  background-color: var(--dev-color3) !important;
  margin-top      : 5px;
  white-space     : pre-wrap;
}
.windisclose {
  position: absolute;

  /* System font priority list */
  font-family: system-ui, -apple-system, "Segoe UI", "Segoe UI Symbol", Roboto, Arial, sans-serif;
  font-weight: 400;
  color      : #bbb;
  font-size  : 20px;
  line-height: 1;

  border : none;
  padding: 0;
  top    : 8px;   /* 2px less than right*/
  right  :10px;

  background: transparent;
  cursor    : pointer;
  z-index   : 2;
}
.windisclose:hover {
  color: white;
}
.divider {
  background-color: #ffffff;
  height          : 0.5px;
  margin          : 10px 0;
}



/* ──────────────────────
✦ NEWSLETTER DISPLAY 0 ✦
────────────────────── */
.display0primarycontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;   /* Allows correct inner padding */

  width       : 100%;
  aspect-ratio: auto;
  height      : auto;
  
  background: var(--dev-color1);   

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .display0primarycontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .display0primarycontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
.display0container {
  display: grid;
  
  width : 90%;     /* Gives 5% margins */
  height: 100%;

  margin-top   : 0%; /* Was 5.8% */
  margin-bottom: 5.8%;

  background: var(--dev-color2) !important;     

  grid-template-columns: auto;
  grid-template-rows   : auto;
} 
.dis0grid0 {

  grid-column: 1 / 3;
  grid-row   : 1 / 1;

  background: var(--dev-color4) !important;

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */

  grid-template-rows: auto;
}
.dis0text1 {
  text-align: justify;
}
@media (max-width: 750px) and (min-width: 0px) {
  .display1container {
    grid-template-columns: auto;
    grid-template-rows   : auto;
  }
  .dis0grid0 {
    grid-column: 1 / 1;
    grid-row   : 1 / 1;
  }
}

/* ──────────────────────
✦ NEWSLETTER DISPLAY 1 ✦
────────────────────── */
.display1primarycontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;   /* Allows correct inner padding */

  width       : 100%;
  aspect-ratio: auto;
  height      : auto;
  
  background: var(--dev-color1);   

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .display1primarycontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .display1primarycontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
.display1container {
  display: grid;
  
  width : 90%;     /* Gives 5% margins */
  height: 100%;

  margin-top   : 5.8%;
  margin-bottom: 5.8%;

  background: var(--dev-color2) !important;     

  grid-template-columns: auto 1fr;
  grid-template-rows   : auto 25px auto;
} 
.dis1grid1 {

  grid-column: 1 / 3;
  grid-row   : 1 / 1;

  background: var(--dev-color4) !important;

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */

  grid-template-rows: auto;
}
.dis1grid1-1 {

  grid-column: 1 / 3;
  grid-row   : 1 / 1;

  background: var(--dev-color4);

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */

  grid-template-rows: auto;
}
.dis1grid2 {
  grid-column: 1 / 3;
  grid-row   : 2 / 2;

  background: var(--dev-color3) !important;
  background: #000000;
}
.dis1grid3 {
  
  grid-column: 1 / 2;
  grid-row   : 3 / 3;

  padding-left: 1.8%;
  padding-bottom: 1%;

  background: var(--dev-color5) !important;
  background: #000000;

  width          : fit-content;
  align-content  : center;  /* Centers content vertically */
  justify-content: start; /* Left align content */
}
.dis1grid4 {
  grid-column: 2 / 3;
  grid-row   : 3 / 3;

  padding-right : 0%;
  padding-bottom: 0%;

  background: var(--dev-color4) !important;
  background: #000000;

  align-content: center;  /* Centers content vertically */
  justify-content: start; /* Left align content */
}
.dis1text1 {
  margin-bottom: -8px;
}
.dis1-img {
  position: relative;
  
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  z-index: 1;
}
.dis1-img-glow {
  position: relative;
  
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  filter : blur(25px) saturate(1.4);
  opacity: 0.4;           /* Was at 0.9 default */

  pointer-events: none;
  z-index: 0;
}
  .distext2 {
    margin-left: 8%;
}
@media (max-width: 750px) and (min-width: 0px) {
  .display1container {
    grid-template-columns: auto;
    grid-template-rows   : auto 2.8% auto auto;
  }
  .dis1grid1 {
    grid-column: 1 / 1;
    grid-row   : 1 / 1;
  }
  .dis1grid1-1 {
    grid-column: 1 / 1;
    grid-row   : 1 / 1;
  }
  .dis1grid2 {
    grid-column: 1 / 1;
    grid-row   : 2 / 2;
  }
  .dis1grid3 {
    grid-column: 1 / 1;
    grid-row   : 3 / 3;
  }
  .dis1grid3-1 {
    grid-column: 0 / 0;
    grid-row   : 0 / 0;
  }
  .dis1grid4 {
    grid-column: 1 / 1;
    grid-row   : 4 / 4;

    padding-left: 1.8%;
    padding-bottom: 1%;
  }
  .dis1text1 {
    margin-bottom: -8px;
  }
  .distext2 {
    margin-top: -5px;
  }
}

/* ──────────────────────
✦ NEWSLETTER DISPLAY 2 ✦
────────────────────── */
.display2primarycontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;   /* Allows correct inner padding */

  width       : 100%;
  aspect-ratio: auto;
  height      : auto;
  
  background: var(--dev-color1);   

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .display2primarycontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .display2primarycontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
.display2container {
  display: grid;
  
  width : 90%;     /* Gives 5% margins */
  height: 100%;

  margin-top   : 5.8%;
  margin-bottom: 5.8%;

  background: var(--dev-color2);     

  grid-template-columns: 74% 2.8% 23.2%;
  grid-template-rows   : auto;
} 
.dis2grid1 {

  grid-column: 1 / 1;
  grid-row   : 1 / 1;

  background: var(--dev-color4);

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */

  grid-template-rows: auto;
}
.dis2grid1-1 {  

  grid-column: 1 / 1;
  grid-row   : 1 / 1;

  background: var(--dev-color4);

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */

  grid-template-rows: auto;
}
.dis2grid2 {
  grid-column: 2 / 2;
  grid-row   : 1 / 1;

  background: var(--dev-color3) !important;
  background: #000000;
}
.dis2grid3 {
  grid-column: 3 / 3;
  grid-row   : 1 / 1;

  padding-left: 1.8%;
  padding-bottom: 1%;

  background: var(--dev-color5) !important;
  background: #000000;

  align-content: center;  /* Centers content vertically */
  justify-content: start; /* Left align content */
}
.dis2-img {
  position: relative;
  
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  z-index: 1;
}
.dis2-img-glow {
  position: relative;
  
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  filter : blur(25px) saturate(1.4);
  opacity: 0.6;           /* Was at 0.9 default */

  pointer-events: none;
  z-index: 0;
}
@media (max-width: 750px) and (min-width: 0px) {
  .display2container {
    grid-template-columns: auto;
    grid-template-rows   : auto 2.8% auto;
  }
  .dis2grid1 {
    grid-column: 1 / 1;
    grid-row   : 1 / 1;
  }
  .dis2grid1-1 {
    grid-column: 1 / 1;
    grid-row   : 1 / 1;
  }
  .dis2grid2 {
    grid-column: 1 / 1;
    grid-row   : 2 / 2;
  }
  .dis2grid3 {
    grid-column: 1 / 1;
    grid-row   : 3 / 3;
  }
}

/* ──────────────────────
✦ NEWSLETTER DISPLAY 3 ✦
────────────────────── */
.display3primarycontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;   /* Allows correct inner padding */

  width       : 100%;
  aspect-ratio: auto;
  height      : auto;
  
  background: var(--dev-color1);   

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .display3primarycontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .display3primarycontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
.display3container {
  display: grid;
  
  width : 90%;     /* Gives 5% margins */
  height: 100%;

  margin-top   : 5.8%;
  margin-bottom: 5.8%;

  background: var(--dev-color2);     

  grid-template-columns: 45% 10% 45%;
  grid-template-rows   : auto auto auto;
} 
.dis3grid1 {

  grid-column: 1 / 1;
  grid-row   : 1 / 3;

  background: var(--dev-color4);

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */

  grid-template-rows: auto;
}
.dis3grid1-1 {

  grid-column: 1 / 1;
  grid-row   : 1 / 3;

  background: var(--dev-color4);

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */

  grid-template-rows: auto;
}
.dis3grid2 {

  grid-column: 1 / 1;
  grid-row   : 3 / 3;

  background: var(--dev-color4);

  padding-top: 1.2%;
  padding-left: 4%;
  padding-bottom: 1%;
  
  grid-template-rows: auto;
}
.dis3title1 {
  /* STILL CHANGING LINE HIEGHT.. ?? IDK HOW */
  padding-bottom: 0px;
  line-height: 0px;
}
.dis3grid3 {
  grid-column: 3 / 3;
  grid-row   : 2 / 4;

  background: var(--dev-color5) !important;
  background: #000000;

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */
}
.dis3grid3-1 {
  grid-column: 3 / 3;
  grid-row   : 2 / 4;

  background: var(--dev-color5) !important;
  background: #000000;

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */
}
.dis3grid4 {
  grid-column: 3 / 3;
  grid-row   : 1 / 1;

  background: var(--dev-color5) !important;

  padding-top: 1.2%;
  padding-left: 4%;
  padding-bottom: 1%;
  
  grid-template-rows: auto;
}
.dis3text1 {
  margin-bottom: -8px;
}
.dis3-img1 {
  position: relative;
  
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  z-index: 1;
}
.dis3-img1-glow {
  position: relative;
  
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  filter : blur(25px) saturate(1.4);
  opacity: 0.6;           /* Was at 0.9 default */

  pointer-events: none;
  z-index: 0;
}
@media (max-width: 750px) and (min-width: 0px) {
  .display3container {
    display: grid;
  
    width : 90%;     /* Gives 5% margins */
    height: 100%;

    margin-top   : 5.8%;
    margin-bottom: 5.8%;

    background: var(--dev-color2);     

    grid-template-columns: 100%;
    grid-template-rows   : auto auto 25px auto auto;
  } 
  .dis3grid1 {

    grid-column: 1 / 1;
    grid-row   : 1 / 1;

    background: var(--dev-color4);

    display        : flex;     /* Makes grid cell a flex container  */
    justify-content: center;   /* Centers items inside horizontally */
    align-items    : center;   /* Centers items inside vertically   */
    position       : relative; /* Local stacking context for glow   */

    grid-template-rows: auto;
  }
  .dis3grid1-1 {

    grid-column: 1 / 1;
    grid-row   : 1 / 1;

    background: var(--dev-color4);

    display        : flex;     /* Makes grid cell a flex container  */
    justify-content: center;   /* Centers items inside horizontally */
    align-items    : center;   /* Centers items inside vertically   */
    position       : relative; /* Local stacking context for glow   */

    grid-template-rows: auto;
  }
  .dis3grid2 {

    grid-column: 1 / 1;
    grid-row   : 2 / 2;

    background: var(--dev-color4);

    padding-top: 1.2%;
    padding-left: 4%;
    padding-bottom: 1%;
  
    grid-template-rows: auto;
  }
  .dis3grid3 {
    grid-column: 1 / 1;
    grid-row   : 4 / 4;

    background: var(--dev-color5) !important;
    background: #000000;

    display        : flex;     /* Makes grid cell a flex container  */
    justify-content: center;   /* Centers items inside horizontally */
    align-items    : center;   /* Centers items inside vertically   */
    position       : relative; /* Local stacking context for glow   */
  }
  .dis3grid3-1 {
    grid-column: 1 / 1;
    grid-row   : 4 / 4;

    background: var(--dev-color5) !important;
    background: #000000;

    display        : flex;     /* Makes grid cell a flex container  */
    justify-content: center;   /* Centers items inside horizontally */
    align-items    : center;   /* Centers items inside vertically   */
    position       : relative; /* Local stacking context for glow   */
  }
  .dis3grid4 {
    grid-column: 1 / 1;
    grid-row   : 5 / 5;

    background: var(--dev-color5) !important;

    padding-top: 1.2%;
    padding-left: 4%;
    padding-bottom: 1%;
  
    grid-template-rows: auto;
  }
}


/* ──────────────────────
✦ NEWSLETTER DISPLAY 5 ✦
────────────────────── */
.display5primarycontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;   /* Allows correct inner padding */

  width       : 100%;
  aspect-ratio: auto;
  height      : auto;
  
  background: var(--dev-color1);   

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .display5primarycontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .display5primarycontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
.display5container {
  display: grid;
  
  width : 90%;     /* Gives 5% margins */
  height: 100%;

  margin-top   : 5.8%;
  margin-bottom: 5.8%;

  background: var(--dev-color2);     

  grid-template-columns: auto 5% auto 5% auto;
  grid-template-rows   : auto auto;
} 
.dis5grid1 {

  grid-column: 1 / 1;
  grid-row   : 1 / 1;

  background: var(--dev-color4);

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */

  grid-template-rows: auto;
}
.dis5grid1-1 {

  grid-column: 1 / 1;
  grid-row   : 1 / 1;

  background: var(--dev-color4);

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */

  grid-template-rows: auto;
}
.dis5grid2 {

  grid-column: 1 / 1;
  grid-row   : 3 / 3;

  background: var(--dev-color4);

  padding-top: 1.2%;
  padding-left: 4%;
  padding-bottom: 1%;
  
  grid-template-rows: auto;
}
.dis5grid3 {
  grid-column: 3 / 3;
  grid-row   : 1 / 1;

  background: var(--dev-color5) !important;
  background: #000000;

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */
}
.dis5grid3-1 {
  grid-column: 3 / 3;
  grid-row   : 1 / 1;

  background: var(--dev-color5) !important;
  background: #000000;

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */
}
.dis5grid4 {
  grid-column: 3 / 3;
  grid-row   : 3 / 3;

  background: var(--dev-color5) !important;

  padding-top: 1.2%;
  padding-left: 4%;
  padding-bottom: 1%;
  
  grid-template-rows: auto;
}
.dis5grid5 {
  grid-column: 5 / 5;
  grid-row   : 1 / 1;

  background: var(--dev-color5) !important;
  background: #000000;

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */
}
.dis5grid5-1 {
  grid-column: 5 / 5;
  grid-row   : 1 / 1;

  background: var(--dev-color5) !important;
  background: #000000;

  display        : flex;     /* Makes grid cell a flex container  */
  justify-content: center;   /* Centers items inside horizontally */
  align-items    : center;   /* Centers items inside vertically   */
  position       : relative; /* Local stacking context for glow   */
}
.dis5grid6 {
  grid-column: 5 / 5;
  grid-row   : 3 / 3;

  background: var(--dev-color5) !important;

  padding-top: 1.2%;
  padding-left: 4%;
  padding-bottom: 1%;
  
  grid-template-rows: auto;
}
.dis5text1 {
  margin-top: 7%;
  margin-bottom: -8px;
}
.dis3-img1 {
  position: relative;
  
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  z-index: 1;
}
.dis3-img1-glow {
  position: relative;
  
  width : 100%;
  
  object-fit     : contain;
  justify-content: center;
  align-items    : center;

  filter : blur(25px) saturate(1.4);
  opacity: 0.6;           /* Was at 0.9 default */

  pointer-events: none;
  z-index: 0;
}
@media (max-width: 750px) and (min-width: 0px) {
  .display3container {
    display: grid;
  
    width : 90%;     /* Gives 5% margins */
    height: 100%;

    margin-top   : 5.8%;
    margin-bottom: 5.8%;

    background: var(--dev-color2);     

    grid-template-columns: 100%;
    grid-template-rows   : auto auto 25px auto auto;
  } 
  .dis3grid1 {

    grid-column: 1 / 1;
    grid-row   : 1 / 1;

    background: var(--dev-color4);

    display        : flex;     /* Makes grid cell a flex container  */
    justify-content: center;   /* Centers items inside horizontally */
    align-items    : center;   /* Centers items inside vertically   */
    position       : relative; /* Local stacking context for glow   */

    grid-template-rows: auto;
  }
  .dis3grid1-1 {

    grid-column: 1 / 1;
    grid-row   : 1 / 1;

    background: var(--dev-color4);

    display        : flex;     /* Makes grid cell a flex container  */
    justify-content: center;   /* Centers items inside horizontally */
    align-items    : center;   /* Centers items inside vertically   */
    position       : relative; /* Local stacking context for glow   */

    grid-template-rows: auto;
  }
  .dis3grid2 {

    grid-column: 1 / 1;
    grid-row   : 2 / 2;

    background: var(--dev-color4);

    padding-top: 1.2%;
    padding-left: 4%;
    padding-bottom: 1%;
  
    grid-template-rows: auto;
  }
  .dis3grid3 {
    grid-column: 1 / 1;
    grid-row   : 4 / 4;

    background: var(--dev-color5) !important;
    background: #000000;

    display        : flex;     /* Makes grid cell a flex container  */
    justify-content: center;   /* Centers items inside horizontally */
    align-items    : center;   /* Centers items inside vertically   */
    position       : relative; /* Local stacking context for glow   */
  }
  .dis3grid3-1 {
    grid-column: 1 / 1;
    grid-row   : 4 / 4;

    background: var(--dev-color5) !important;
    background: #000000;

    display        : flex;     /* Makes grid cell a flex container  */
    justify-content: center;   /* Centers items inside horizontally */
    align-items    : center;   /* Centers items inside vertically   */
    position       : relative; /* Local stacking context for glow   */
  }
  .dis3grid4 {
    grid-column: 1 / 1;
    grid-row   : 5 / 5;

    background: var(--dev-color5) !important;

    padding-top: 1.2%;
    padding-left: 4%;
    padding-bottom: 1%;
  
    grid-template-rows: auto;
  }
}


/* ─────────
✦ UPDATES ✦
───────── */
.updatesprimarycontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;   /* Allows correct inner padding */

  width       : 100%;
  aspect-ratio: auto;
  height      : auto;
  
  background: var(--dev-color1);   

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .updatesprimarycontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .updatesprimarycontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
.updatescontainer {
  display: grid;
  
  width : 90%;     /* Gives 5% margins */
  height: 100%;

  margin-top   : 5.8%;
  margin-bottom: 5.8%;

  background: var(--dev-color2);     

  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows   : auto;
  gap: 5%;
} 
.updatesgrid1 {

  grid-column: 1 / 1;
  grid-row   : 1 / 1;

  background: var(--dev-color4) !important;
  background: #000000;

  display        : flex;    
  justify-content: left;    
  align-items    : top;     
  position       : relative;

  grid-template-rows: auto;
}
.updatesgrid2 {
  grid-column: 2 / 2;
  grid-row   : 1 / 1;

  background: var(--dev-color3) !important;
  background: #000000;

  display        : flex;    
  justify-content: left;    
  align-items    : top;     
  position       : relative;
}
.updatesgrid3 {
  grid-column: 3 / 3;
  grid-row   : 1 / 1;

  padding-left: 1.8%;
  padding-bottom: 1%;

  background: var(--dev-color5) !important;
  background: #000000;

  display        : flex;    
  justify-content: left;    
  align-items    : top;     
  position       : relative;
}




/* ────────
✦ FOOTER ✦
──────── */
.ftprimarycontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;   /* Allows correct inner padding */

  width       : 100%;
  aspect-ratio: auto;
  height      : auto;
  border-top: 1px solid #ffffff;

  
  background: var(--dev-color1);   
  background: rgba(0, 0, 0, 0.75);

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .ftprimarycontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .ftprimarycontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
.ftinnercontainer {
  display: grid;
  
  width : 98%;    
  height: 100%;

  margin: 0px;
  padding: 0px;
  margin-top   : 0%;
  margin-bottom: 0%; 

  background: var(--dev-color2);     
  /* background: black; */

  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows   : 1px auto auto;

  column-gap: 25px;

  --ftgridmargin: 1%; /* Footer menu spacing */
} 
.ftdivider {
  width: 100%;           
  height: 1px;  
  margin-top: 3%;   

  background-color: #ececec;       
}
.ftgrid0 {
  grid-column: 1 / 6;
  grid-row   : 1 / 1;

  background: var(--dev-color3);
}
.ftgrid1 {

  display    : grid;
  grid-column: 1 / 1;
  grid-row   : 2 / 2;

  /* width       : 100%; */
  margin      : 0px;
  margin-top  : var(--ftgridmargin);
  align-items : center;
  justify-self: start;

  background: var(--dev-color4);
}
.ftgrid2 {
  display    : grid;
  grid-column: 2 / 2;
  grid-row   : 2 / 2;

  width       : 100%;
  margin      : 0px;
  margin-top  : var(--ftgridmargin);
  margin-right: 20%;  /* Alignment spacing */
  align-items : center;
  justify-self: center;
  text-align  : center;

  background: var(--dev-color5);
}
.ftgrid3 {
  display    : grid;
  grid-column: 3 / 3;
  grid-row   : 2 / 2;

  width       : 100%;
  margin      : 0px;
  margin-top  : var(--ftgridmargin);
  align-items : center;
  justify-self: center;
  text-align  : center;

  background: var(--dev-color6);
}
.ftgrid4 {
  display    : grid;
  grid-column: 4 / 4;
  grid-row   : 2 / 2;

  width       : 100%;
  margin      : 0px;
  margin-top  : var(--ftgridmargin);
  margin-left: 15%;
  align-items : center;
  justify-self: center;
  text-align  : center;

  background: var(--dev-color4);
}
.ftgrid5 {
  display    : grid;
  grid-column: 5 / 5;
  grid-row   : 2 / 2;

  
  width       : 100%;
  margin      : 0px;
  margin-top  : var(--ftgridmargin);
  align-items : center;
  justify-self: end;
  text-align  : right;

  background: var(--dev-color5);
}
.ftgrid0-0 {
  grid-column: 1 / 6;
  grid-row   : 3 / 3;

  background: var(--dev-color3);
}
.ftgrid1, .ftgrid2, .ftgrid3, .ftgrid4, .ftgrid5{
  width: auto;       /* Overwidth saftey measure */
  min-width: 0;      /* Content shrinks instead of overflowing */
}
.ftcontentleft {
  grid-column : 1;

  justify-self: start;   /* Left aligns text */
  text-align  : left;
  margin      : 0px;
}
.ftcontentcenter {
  align-items: center;
  justify-self: center;  /* Center aligns text */
  text-align  : center;
}
.ftcontentright {
  grid-column : 2;
  justify-self: end;     /* Right aligns text */
  text-align  : right;
  margin      : 0px;
}
.ftatchange {
  font-family   : 'Helvetica', sans-serif;
  font-size     : 11px;
  font-weight   : 400px;
  letter-spacing: 0px;
  margin        : 0.7px;
  padding       : 0px;
}
.fttitle {
  font-size     : 16px;                 
  font-family   : 'Cormorant', sans-serif; 
  letter-spacing: 0px;
  color         : rgb(255, 255, 255);
  user-select   : text;
}
.ftmenutext {
  /* Work Sans Acents */
  font-family   : 'Work Sans', sans-serif;
  font-weight   : 400;
  font-size     : 11px; /* Was 9.8 */
  letter-spacing: 0.25px;
  line-height   : 21.5253px;
  color         : #f0f0f0;
}
a.ftmenutext,
a.ftmenutext:link,
a.ftmenutext:visited,
a.ftmenutext:hover,
a.ftmenutext:active,
a.ftmenutext:focus{
  color: #f0f0f0 !important;
  text-decoration: none !important;
}

.ftprimarybtmcontainer {
  position  : relative;
  display   : flex;
  box-sizing: border-box;   /* Allows correct inner padding */

  width       : 100%;
  aspect-ratio: auto;
  height      : auto;
  
  background: var(--dev-color1);  
  background: rgba(0, 0, 0, 0.75); 

  justify-content: center;
  align-items    : center;
}
@media (min-width: 1700px) {
  .ftprimarybtmcontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .ftprimarybtmcontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
.ftbtmcontainer {
  display: grid;
  
  width : 98%;    
  height: 100%;

  margin: 0px;
  padding: 0px;
  margin-top   : 0px;
  margin-bottom: 1.5%; 

  background: var(--dev-color2);     
  /* background: black; */

  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows   : auto;
} 
.ftbtmgrid1 {
  display    : grid;
  grid-column: 1 / 1;
  grid-row   : 1 / 1;

  width        : 100%;
  margin       : 0px;
  align-items  : center;
  justify-self : start;

  background: var(--dev-color3);
}
.ftbtmgrid2 {
  display    : grid;
  grid-column: 2 / 2;
  grid-row   : 1 / 1;

  height      : 100%;
  width       : 100%;
  margin      : 0px;
  align-items : center;
  justify-self: center;

  background: var(--dev-color4);
}
.ftbtmgrid3 {
  display    : grid;
  grid-column: 3 / 3;
  grid-row   : 1 / 1;

  width        : 100%;
  margin       : 0px;
  align-items : center;
  justify-self: end;
  text-align  : right;

  background: var(--dev-color3);
}
.socialicons{
  --icon-filter: invert(1) brightness(1.15); /* Icon color */
  --icon-gap   : 21px;
  --icon-size  : 21px;

  display    : flex;
  align-items: center;

  gap        : var(--icon-gap);
  margin     : 0;
  padding    : 0;
  line-height: 0;
}
.socialicons a{
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  text-decoration: none;

  width : var(--icon-size);
  height: var(--icon-size);
}
.socialicons img{
  display: block;

  width : var(--icon-size);
  height: var(--icon-size);

  filter    : var(--icon-filter);
  transition: filter .25s ease-in-out, opacity .25s ease-in-out;
}
.socialicons a:nth-child(1):hover img{
  filter: invert(15%) sepia(95%) saturate(6000%) hue-rotate(355deg) brightness(1.05); /* YouTube */
}
.socialicons a:nth-child(2):hover img{
  filter: invert(20%) sepia(95%) saturate(5000%) hue-rotate(290deg) brightness(1.05); /* Instagram */
}
.socialicons a:nth-child(3):hover img{
  filter: invert(35%) sepia(60%) saturate(3500%) hue-rotate(205deg) brightness(1.05); /* Discord */
}
.socialicons a:nth-child(4):hover img{
  filter: invert(34%) sepia(63%) saturate(5357%) hue-rotate(332deg) brightness(102%) contrast(102%); /* TikTok */
}
.socialicons a:nth-child(5):hover img{
  filter: invert(55%) sepia(90%) saturate(1800%) hue-rotate(80deg) brightness(1.05); /* Spotify */
}
.socialicons a:nth-child(6):hover img{
  filter: invert(35%) sepia(95%) saturate(5000%) hue-rotate(5deg) brightness(1.05); /* Reddit */
}
.ftnavigation{
  text-align: center;

  cursor                : default;
  -webkit-font-smoothing: antialiased;
  text-rendering        : optimizeLegibility;
  z-index               : 10;
}
.ftcopyright{
  text-align : center;
  line-height: 1.5em;
  margin     : 0;
  margin-top : 0px;
  padding    : 0;

  pointer-events        : none;
  -webkit-font-smoothing: antialiased;
  text-rendering        : optimizeLegibility;
  z-index               : 10;
}
.ftnavigation a{
  color     : #fff;
  cursor    : pointer;
  transition: color 160ms ease, opacity 160ms ease;
}
.ftnavigation a:visited {
  color: #fff;  /* Visited links to stay white */
}
.ftnavigation a:hover{
  color: #fff; 
}
.signature-img {
  justify-self     : end;
  width            : 100px;
  user-select      : none;
  -webkit-user-drag: none;

}
.ftinfotext {
  /* Work Sans Acents */
  font-family   : 'Work Sans', sans-serif;
  font-weight   : 400;
  font-size     : 10px; /* Was 9.8 */
  letter-spacing: 0px;
  line-height   : 15px; /* Was 21 */
  color         : #f0f0f0;
}




/* ────────────────
✦ NAVIGATION BAR ✦
──────────────── */
.navbar {
  position: relative;

  width : 100%;
  height: 90px;

  /* background: blue; */
  
  box-sizing: border-box;       /* Makes padding inside instead of outside */
}
.navcontent {
  position   : absolute;
  display    : flex;
  

  top    : 1px;
  left   : 5px;
  right  : 5px;
  bottom : 1px;   /* Used instead of margin */
  padding: 0px;   /* Pads inside content */
  margin : 0px;

  /* background-color: red; */
  /* padding-bottom: 15px; */
  /* border-bottom: 1px rgba(255, 255, 255, 0.821) solid; */
  
  box-sizing: border-box;
}
@media (min-width: 1700px) {
  .navcontent {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
.navlogo {
  position : relative;
  top      : 50%;                  /* Makes vertical center pivot point */
  transform: translateY(-50%);     /* Center aligns the content */

  height      : 100%;
  width       : auto;
  margin-left : clamp(0.24em, 10vw, 0.24em);
  margin-right: 20px;
}
@media (max-width: 800px) {
  .navlogo {
    width : 4.5em;
    height: auto;
  }
}
@media (max-width: 500px) {
  .navlogo {
    width : 4.1em;
    height: auto;
  }
}
.navtext {
  display    : flex;
  align-items: center;
  gap: 30px;  /* Was 20px */
}
.navtext a {
  color          : #fff;
  text-decoration: none;
  transition     : opacity 0.2s ease;
}
.navtext a:hover {
  opacity: 0.7;
}
.grid { 
  position       : relative;
  display        : none;     /* Hides menu until shown in @media query */
  align-items    : center;
  justify-content: center;

  border    : 0;             /* Removes default border */
  cursor    : pointer;

  height      : 100%;
  margin-left : auto;        /* Pushes menu to the far right */
  margin-right: clamp(1em, 10vw, 1em);
  padding     : 0;

  background: transparent;   /* Removes default button color */
  z-index   : 1002;
}
.grid img {
  display       : block;
  height        : auto;
  width         : 2.5em;
  pointer-events: none;
}


/* ────────────────────────
✦ NAVIGATION MOBILE MENU ✦
──────────────────────── */
@keyframes slide-in-right {
  0%   { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes slide-out-right {
  0%   { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
.mobile-menu {
  display       : flex;
  position      : fixed;
  flex-direction: column;
  transform     : translateX(100%);   /* Hides menu until open */

  top: 0px; 
  right: 0;
  height: 100vh;
  width: min(80vw, 300px);
  
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: brightness(1) blur(18px);
  -webkit-backdrop-filter: brightness(1) blur(18px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);

  gap: 12px;                /* Vertical spacing between links */
  padding: 24px;            /* Padding for links */
  
  opacity: 0;
  z-index: 1001;            /* Sits below grid */
  pointer-events: none;
}
/* This isnt the same, theres a frame before it messing up the appearance of the hover */
.mobile-menu a {
  color  : #fff;
  font   : 1rem/1.3 'Helvetica', sans-serif;
  padding: 10px 8px;

  text-decoration: none;
  /* transition     : background 0.2s ease; */
}
.mobile-menu a:hover {
  background-color: #ffffffe3;
  color: #000;
  
  box-shadow:
    0 0 18px 4px rgba(255, 246, 246, 0.267),
    0 0 48px 18px rgba(255, 0, 0, 0);
}
.mobile-menu.is-open {
  animation     : slide-in-right 300ms ease-out forwards;
  pointer-events: auto;
}
.mobile-menu:not(.is-open) {
  animation: slide-out-right 250ms ease-in forwards;
}
@media (max-width: 900px) {
  .navtext { display: none; }
  .grid { display: flex; }
}
@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
}









/* CURRENT DEVELOPMENT */
/* USE THIS TO CHANGE THE HEIGHTS OF DEFAULT EPISODE STACK AND IMAGE */
/* RUN THROUGH THE HEIGHTS AT EACH INCRIMENT */
/* STACK THE LATEST EPISODES UNDER IT & THEN SCALE THE IMAGE WITH +/- VIEWPORT */
/* SCALE THE BACKGROUND VIDEO UNDER IT SO SCALE AND ADD CROP FEATURES FOR MOBILE SECTION */
/* ALL EP. ADD MORE ADVANCED API SEARCH AND CMALP EPISODES AND SCALE TO SCREEN WIDTH */
/* BUILD OUT VAIOUS NEWLETTER TEMPS WITH AND ROOT IT TO INSERT  */
/* Desktop override: 1350px+ */
/* Remove this section below and replace OG values. Just space a bit higher. */
/* @media (min-width: 1350px) {
  .episode-stack{
    position: absolute !important;
    top: 38% !important;           
  }

  .lander-wrap{
    position: relative !important;
    top: auto !important;              
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;       


    margin-top: 28.2% !important;      
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }
} */


















/* ────────────────────────────
✦ COMMUNITY COMMENTS SECTION ✦
──────────────────────────── */

/* JUST TESTING YOUTUBE COMMUNITY HUB: */
.cmtprimarycontainer {
  position  : relative;
  display   : flex;
  width     : 100%;
  background: var(--dev-color1);
  
  justify-content: center;
}
/* Right side of cards not functions after 750px */
@media (min-width: 1700px) {
  .cmtprimarycontainer {
    width    : 1700px;               /* Sets maximum width */
    left     : 50%;                  /* Centers horizontally  */
    right    : auto;
    transform: translateX(-50%);     /* Create center pivot point */
  }
}
@media (max-width: 750px) and (min-width: 0px) {
  .cmtprimarycontainer {
    padding-left : max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    padding-right: max(0px, min(75px, calc(0.5 * (100vw - 600px))));
    /* min-marg: 600px max-marg: 750px max-size 75px scaling to 0 */

    aspect-ratio: auto;
    height      : auto;
  }
}
.cmtinnercontainer {
  display: flex;

  width  : 90%;
  padding: 20px 0;
  
  flex-direction: column;
  align-items   : center;    
  background    : var(--dev-color2);
}
.cmt-header {
  width        : 100%;
  font-size    : 2rem;
  font-weight  : 700;
  margin-bottom: 20px;
  color        : rgb(255, 0, 0);
}
.cmt-grid {
  /* Flex Wrap Layout */
  display  : flex;
  gap      : 10px;
  width    : 100%;
  flex-wrap: wrap;

  justify-content: flex-start;
}
.cmt-card {
  display   : flex;
  box-sizing: border-box;

  color        : #e3e5e8;
  background   : #1a1d2300;
  border       : 1px solid #ffffff;
  border-radius: 0px;
  padding      : 16px;
  
  flex-direction: column;
}
/* Absoulte mess rn */
.cmt-user {
  /* Comments row */
  display      : flex;
  align-items  : flex-start;
  gap          : 12px;
  /* gap          : 6px; */
  /* margin-bottom: 12px; */
  margin-bottom: 6px;
  white-space  : nowrap;
}
.cmt-right-col {
  display       : flex;
  flex-direction: column;
  align-items   : flex-start;
}
.cmt-user-pic {
  flex-shrink  : 0;
  border-radius: 50%;

  width  : 44px;
  height : 44px;
  margin : 0px;
  padding: 0;

  margin-right : 0px;
}

/* Needs moddings: CONTINUE HERE K017 Mod Test*/
.cmt-user-name {
  margin: 0;
  padding: 0;
  margin-bottom: 3.5px;            /* YT-style spacing under username */


  /* Remove this? */
  font-size: 14px;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  line-height: 20px;
  transform: scaleY(0.95);
  color: #fff;
}
/* Needs mods */
.cmt-text {
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0em;
  color: #fff;


  margin : 0px;
  padding: 0px;

  /* WRAPPING FIX — REQUIRED FOR THE ENGINE */
  white-space: normal !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
}
.cmt-meta {
  opacity    : 0.8;
  margin     : 0;
  padding    : 0;
  margin-top : -4px;
  white-space: nowrap;
}
/* Change this in above directory */
.cmt-age {
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  opacity: 0.7;
  transform: scaleY(0.95);
}
.cmt-likes {
  /* Hides likes count */
  display: none !important;
}


/* ─────────────────────────────────────────────
✦ CMT FLUENT SPOTLIGHT BORDER MODULE ✦
Windows 10 / Fluent-style hover reveal
───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
✦ CMT FLUENT SPOTLIGHT BORDER MODULE ✦
Windows/Fluent style:
- Global spotlight affects ALL cards within radius (even in gaps)
- Hovered card gets a stronger local hotspot
- Border is 1px and perfectly flush (no shifting)
───────────────────────────────────────────── */

.cmt-card {
  position: relative;
  overflow: hidden;

  /* IMPORTANT: remove real border so nothing shifts */
  border: none !important;
}

/* Global ambient spill (multi-card radius) */
.cmt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Spotlight in viewport space so it affects multiple cards */
  background:
    radial-gradient(
      circle at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
      rgba(255, 0, 0, 0.12),
      transparent 18vmin
    );
  background-attachment: fixed;

  opacity: 1;
}

/* Global border reveal (multi-card radius) */
.cmt-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
      rgba(255, 255, 255, 0.55),
      transparent 18vmin
    );
  background-attachment: fixed;

  /* Mask reveals ONLY a 1px border, flush to the edge */
  mask:
    linear-gradient(#fff 0 0) top / 100% 1px no-repeat,
    linear-gradient(#fff 0 0) bottom / 100% 1px no-repeat,
    linear-gradient(#fff 0 0) left / 1px 100% no-repeat,
    linear-gradient(#fff 0 0) right / 1px 100% no-repeat;

  opacity: 0.95;
}

/* Stronger local hotspot on the hovered card (optional but nice) */
.cmt-card:hover::before {
  background:
    radial-gradient(
      circle at calc(var(--mx, 0) * 1px) calc(var(--my, 0) * 1px),
      rgba(255, 255, 255, 0.80),
      transparent 160px
    );
  background-attachment: initial;
}
/* Card hover spotlight */
.cmt-card:hover::after {
  background:
    radial-gradient(
      circle at calc(var(--mx, 0) * 1px) calc(var(--my, 0) * 1px),
      rgba(255, 255, 255, 0.16),
      transparent 180px
    );
  background-attachment: initial;
}




/* Adaptive blur testing */
.cmt-user {
  position: relative;
}

.cmt-user::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;

  background-image: var(--avatar);
  background-size: cover;
  background-position: center;

  filter: blur(18px) saturate(160%) brightness(1.25);
  opacity: 0;
  transition: 150ms ease;
  pointer-events: none;
  z-index: 0;
}

.cmt-user:hover::before {
  opacity: 1;
  filter: blur(15px) saturate(185%) brightness(1);
}

.cmt-user-pic {
  position: relative;
  z-index: 1; /* above glow */
}




/* 
Years ago x, is vertically unaligned, sohould be down, ensure correct weighting
Needs to horitzontally takes up full container and break line to comprimize.
Fan art could be in a section under or maybe even posts?
Card spotlight hover
950x needs to be turned into single line stream of cards.
and should work with primary container dynamic marings.
Add glow to profile card
comment shoould zoom in a bit when hovering, gives premium feel
could give badges based on like count., customer ranked badges for top commenters
Build in bias to promote positive comments and  neglect negative ones, filter out bad words.
Likes by creator gets customer bat emoji on pfp?
*/


/* 
Min. Max card sizes to get an update 
Username length cut off at x amount. No username breaklength
Remove likes count
Determine hover css, shine? Or windows 10 systems menu
No read more. 
Minum, Box, X in the top right? Or transperent cards?

*/









/* Used for overwritting crappy background coding */
/* This for some reason effects all episodes card loading? */
/* body {
  background-color: #080808 !important;
  background-color: #070707 !important;
  background-color: #000000 !important;
} */