:root{
  --main-color-one: #fb4B0e;
  --main-color-two: #000;
  
  /*Rojo tomate:    #fb4B0e*/
  /*Verde fosforo:  #dcfa14*/
  /*Azure:          #008cff*/
  /*Devilish red:   #ff0066*/
  /*Lunar lilac:    #ebc4ff*/
  /*Thermal orange: #ff9900*/
  /*Goldilocks:     #ffd400*/
  /*Off white:      #fff3d6*/
  /*Purpur:         #ad48ab*/
  /*Cherry blossom  #ff9bdc*/
  
  }


@font-face {
  font-family: 'Saiba-45'; 
  src: url('/fonts/SAIBA-45.woff') format('woff');
  }
@font-face {
  font-family: 'Unsteady'; 
  src: url('/fonts/Unsteady Oversteer.otf') format('opentype');
  }
@font-face {
  font-family: 'Bitcount'; 
  src: url('/fonts/BitcountSingle.ttf') format('truetype');
  }
  
  
  
  


html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  }

body{
  font-family: "Saiba-45";
  text-transform: uppercase;
  cursor: default;
  background-color: var(--main-color-one);
  display: flex;
  flex-direction: column;
  justify-content: center;
  }

.col{
  display: flex;
  flex-direction: column;
  justify-content: center;
  }
  
.row{
  padding-top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  }
  
.dashes{
  font-family: "Unsteady";
  width: 100%;
  font-size: 2dvw;
  margin: 5dvw -0.7dvw;
  text-align: center;
  letter-spacing: -0.7dvw;
  color: var(--main-color-two);
  }

.nf-titlecard{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0.5dvw 0.5dvw;
  height: 10dvw;
  width: 65dvw;
  }
  
.nf-titleback{
  position: absolute;
  background-color: var(--main-color-two);
  height: 10dvw;
  width: 68dvw;
  clip-path: polygon(1dvw 0dvw, 
                    66dvw 0dvw, 67.7dvw 1.7dvw,
                    67.7dvw 9dvw, 66.7dvw 10dvw,
                    3dvw 10dvw, 0dvw 7dvw,
                    0dvw 1dvw);
  z-index: -1;
  }

.nf-title{
  color: var(--main-color-one);
  font-size: 11dvw;
  height: 11dvw;
  margin-left: 0.2dvw;
  margin-top: 0.4dvw;
  }
  
.nf-arroba{
  color: var(--main-color-one);
  font-size: 8.2dvw;
  height: 8.2dvw;
  margin-left: 1dvw;
  margin-top: 0.5dvw;
  }
  
.nf-403{
  font-family: "Unsteady";
  color: var(--main-color-two);
  font-size: 10dvw;
  margin-top: -4.3dvw;
  margin-bottom: -1dvw;
  margin-left: 5dvw;
  text-align: center;
  }
  
.nf-forbidden{
  font-family: "Unsteady";
  color: var(--main-color-two);
  font-size: 3dvw;
  margin-top: -1.5dvw;
  margin-bottom: -1dvw;
  margin-left: 5dvw;
  text-align: center;
  }

/* The clipping viewport */
.ticker-wrapper{
  text-transform: uppercase;
  width: 100%;
  overflow: hidden;
  background: var(--main-color-two);
  padding: 0.5dvw 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* The infinite scrolling track */
.ticker-track-one{
  display: flex;
  white-space: nowrap;
  width: max-content;
  /* Adjust '20s' to make the conveyor belt faster or slower */
  animation: scroll-left 60s linear infinite;
}

.ticker-track-two{
  display: flex;
  white-space: nowrap;
  width: max-content;
  /* Adjust '20s' to make the conveyor belt faster or slower */
  animation: scroll-left 20s linear infinite;
}

/* Individual static text items */
.ticker-item{
  font-family: "Bitcount";
  font-weight: 400;
  font-variation-settings: "slnt" 0, "CRSV" 0, "ELSH" 0, "ELXP" 0;
  font-size: 1.9dvw;
  margin-bottom: -0.2dvw;
  color: var(--main-color-one);
  white-space: pre;
  padding-left: 0dvw;
  /* Runs the text blinking animation */
  animation: terminal-blink 2s ease infinite; 
}

/* --- ANIMATION 1: Infinite Conveyor Belt --- */
@keyframes scroll-left{
  0%{
    transform: translateX(0);
  }
  100%{
    /* Shifts track by -50%, which equals the exact length of Set A */
    transform: translateX(-50%);
  }
}

/* --- ANIMATION 2: Terminal Cursor Blink --- */
@keyframes terminal-blink{
  0%, 100%{
    opacity: 1;
  }
  50%{
    opacity: 0.3;
  }
}