* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --background: #060608;
    --containerBG: #060608;
    --fontcolor: #FAFAFA;
    --linkcolor: #FAFAFA;
    /*--containerBG: #1b1b1b;*/
}

html,
body {
    min-width: 100%;
    min-height: 100%;
    font-family: monospace;
}

a {
    color: var(--linkcolor);
}


body {
    /*display: flex;
    justify-content: center;
    align-items: center;*/
    background: var(--background);
}

.front_n_center {
    color: var(--fontcolor);
    font-size: 12px;
    /*display: flex;*/
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    
}

.inverted-front-n-center {
    color: var(--background);
    position: relative;
    left: 7%;   
}

.body-section {
    display: flex;
    width :60%;
    position: relative;
    left :50%;
    top: 60%;
    transform: translate(-50%,-50%);
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
  }

.right {
    text-align: right;
    width: 100%;
}

.stack {
    display: grid;
    grid-template-columns: 1fr;
}

.container {
    margin: 2%;
    background: var(--containerBG);
    height: 96%;
    width: 96%;
    border-radius: 4px;
    color: var(--fontcolor);
    font-family: monospace;
    position: absolute;
}

.name_description {
    font-size: 12px;
    width:95%;
    display: inline;
    align-items: center;
}

.fake-cursor {
    width: 4%;
    display: inline-block;
    animation: blink .6s linear infinite alternate;
}

.footer {
    position: absolute;
    bottom: 4%;
    text-align: center;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 400px;
    display: flex;
    justify-content: space-between;
}

.footer-option {
    font-size: 11px;
    display: inline;
}

.footer-divider {
    font-size: 11px;
    padding: 0 8px 0 8px;
    font-weight: lighter;
    display: inline;
}

.inverted-footer {
    position: relative;
    bottom: -43%;
    text-align: center;
    left: 12%;
    transform: translate(-50%, 0%);
    width: 400px;
    display: flex;
    justify-content: space-between;
    margin-left: 4px;
    margin-right: -4px;
}

.inverted-footer-option{
    font-size: 11px;
    display: inline;
}

.inverted-footer-option a {
    color: var(--background);
}

.inverted-footer-divider {
    font-size: 11px;
    padding: 0 8px 0 8px;
    font-weight: lighter;
    display: inline;
    color: var(--background);
}

.secondary-footer {
    position: relative;
    bottom: -43%;
    text-align: center;
    left: 12%;
    transform: translate(-50%, 0%);
    width: 400px;
    display: flex;
    justify-content: space-between;
    margin-left: 4px;
    margin-right: -4px;
}

.secondary-footer-option{
    font-size: 11px;
    display: inline;
}

.secondary-footer-option a {
    color: var(--fontcolor);
}

.secondary-footer-divider {
    font-size: 11px;
    padding: 0 8px 0 8px;
    font-weight: lighter;
    display: inline;
    color: var(--fontcolor);
}

.stack span {
    font-weight: normal;
    grid-row-start: 1;
    grid-column-start: 1;
    font-size: 22px;
    --stack-height: calc(100% / var(--stacks) - 1px);
    --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
    --clip-top: calc(var(--stack-height) * var(--index));
    --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
    clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
    animation: stack 340ms cubic-bezier(.46, .29, 0, 1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
}

.stack span:nth-child(odd) {
    --glitch-translate: 8px;
}

.stack span:nth-child(even) {
    --glitch-translate: -8px;
}

@keyframes stack {
    0% {
        opacity: 0;
        transform: translateX(-50%);
        text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
    }

    ;

    60% {
        opacity: 0.5;
        transform: translateX(50%);
    }

    80% {
        transform: none;
        opacity: 1;
        text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
    }

    100% {
        text-shadow: none;
    }
}

@keyframes glitch {
    0% {
        text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
        transform: translate(var(--glitch-translate));
    }

    2% {
        text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
    }

    4%,
    100% {
        text-shadow: none;
        transform: none;
    }
}

@keyframes blink {
    0% {opacity: 1;}
    40% {opacity: 1;}
    60% {opacity: 0;}
    100% {opacity: 0;}
}


.progress {
  height: 6px;
  width: 0%;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  animation: progress 1s linear;
  z-index: 1000;
}

@keyframes progress {
    to {
      background-color: rgb(168, 167, 167);
      width: 100%;
    }
  }

  :root * {
    /* Pause the animation */
    animation-play-state: paused;
    /* Bind the animation to scroll */
    animation-delay: calc(var(--scroll) * -1s);
    /* These last 2 properites clean up overshoot weirdness */
    animation-iteration-count: 1;
    animation-fill-mode: both;
  }


  html, body, section {
    block-size: 100%;
  }
  
  html {
    scroll-snap-type: y mandatory;
  }
  
  section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  section:nth-of-type(odd) {
    color: var(--fontcolor);
    background: var(--background);
  }
  
  section:nth-of-type(even) {
    color: var(--background);
    background: var(--fontcolor);
  }

/* ===================================================================
   css_playground shutter effect -- additive only, nothing above this
   line is touched. Higher-specificity selectors here override the
   plain `section` rules above (needed since this page's inversion is
   now driven by the shutter/blend layer, not a hardcoded per-section
   color), without deleting those rules for whatever else may depend
   on them.
   =================================================================== */

.scroll-sections section {
    min-height: 100dvh;
}

.scroll-sections section:nth-of-type(odd),
.scroll-sections section:nth-of-type(even) {
    color: var(--fontcolor);
    background: var(--background);
}

/* One fixed frame reused across every section -- this is what the
   shutter crosses and inverts, instead of a footer/name-box variant
   duplicated per section. */
.frame {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
}

.frame .front_n_center,
.frame .footer {
    pointer-events: auto;
}

/* The shutter: a solid block whose height is driven directly by JS on
   scroll (see css_playground.html) so every single scroll -- one
   section to the next -- sweeps it through a full 0% to 100% of the
   viewport, rather than a fraction of the whole document's height.
   mix-blend-mode: difference means everything underneath (section
   background, text, the fixed frame) inverts automatically as the
   line passes over it -- no separate color rule needed per element. */
.shutter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--fontcolor);
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 50;
}