:root {
  --light-blue: #0B2E4B;
  --blue: #00203C;
  --sky-blue: #22498e;
  --color-logo-1: #5f431e;
  --color-logo-2: #7f7d73;
  --color-logo-3: #debf91;
  --color-logo-4: #be853c;
  --color-logo-5: #fef9e6;
  --loader-size: 20vh;
  --loader-size-mobile: 20vh;
  --text-color: #CECECE;
  /* Fill data-text */
  --color-one: #00b3ff;
  --color-two: #e50072;
  --color-three: #0011ff;
  --color-four: #F27DFD;
  --scroll-color: #460041;
  --scroll-background: #120011;
  --scroll-thumb: #340120;
  --light-size: 6px;
  --light-size-mobile: 4px;
  --light-inset: 1px;
  --light-inset-mobile: 2px;
  --vice-city-pink: #F27DFD;
  --neon-text-color: #f062fc;
  --neon-border-color: #08f;
}

/*Stats */
#monitor-resources {
  position: fixed;
  bottom: 10px;
  left: 10px;
  color: #656565;
  /* Bright green text for the terminal look */
  padding: 5px;
  font-family: 'Courier New', Courier, monospace;
  /* Monospace font for the terminal style */
  font-size: 12px;
  z-index: 1000;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

#user-info-for-nerds {
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: #656565;
  /* Bright green text for the terminal look */
  padding: 5px;
  font-family: 'Courier New', Courier, monospace;
  /* Monospace font for the terminal style */
  font-size: 12px;
  z-index: 1000;
  opacity: 1;
  transition: opacity 1s ease-in-out;
  text-align: right;
}

#monitor-resources.fade-out,
#user-info-for-nerds.fade-out {
  opacity: 0;
}

/* Preloader */
.preloader {
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  ;
  overflow: hidden;
  z-index: 99;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  /* Ensure it's visible initially */
  transition: opacity 1s ease-in-out;
  /* Smooth transition for opacity */
}

.main_preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  background-color: #000;
  overflow: hidden;
  z-index: 99;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/* █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ */
.Loader {
  opacity: 0;
  position: relative;
  width: var(--loader-size, 150px);
  min-width: 110px;
  overflow: visible;
  margin: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.4), 0 0 25px rgba(255, 255, 255, 0.8);
  transition: opacity 1s ease-in-out;
}

.Loader::after {
  content: attr(data-text);
  color: #CECECE;
  color: var(--text-color, #CECECE);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(70% + 0.10vw);
  text-transform: uppercase;
  letter-spacing: 5px;
}

.Loader::before {
  content: '';
  float: left;
  padding-top: 100%;
}

.Loader__Circle {
  display: block;
  position: absolute;
  border-radius: 50%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.8;
  mix-blend-mode: screen;
  filter: brightness(120%);
  -webkit-animation-name: SpinAround;
  animation-name: SpinAround;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear
}

.Loader__Circle:nth-of-type(1) {
  box-shadow:
    inset 1px 0 0 1px #2979FF,
    3px 0 0 3px #2979FF;
  box-shadow:
    inset 1px 0 0 1px var(--color-one, #2979FF),
    var(--light-size, 4px) 0 0 var(--light-size, 4px) var(--color-one, #2979FF);
  animation-direction: reverse;
  transform-origin: 49.6% 49.8%;
}

.Loader__Circle:nth-of-type(2) {
  box-shadow:
    inset 1px 0 0 1px #FF1744,
    3px 0px 0 3px #FF1744;
  box-shadow:
    inset 1px 0 0 1px var(--color-two, #FF1744),
    var(--light-size, 4px) 0px 0 var(--light-size, 4px) var(--color-two, #FF1744);
  transform-origin: 49.5% 49.8%;
}

.Loader__Circle:nth-of-type(3) {
  box-shadow:
    inset 1px 0 0 1px #FFFF8D,
    0 3px 0 3px #FFFF8D;
  box-shadow:
    inset 1px 0 0 1px var(--color-three, #FFFF8D),
    0 var(--light-size, 4px) 0 var(--light-size, 4px) var(--color-three, #FFFF8D);
  transform-origin: 49.8% 49.8%;
}

.Loader__Circle:nth-of-type(4) {
  box-shadow:
    inset 1px 0 0 1px #B2FF59,
    0 3px 0 3px #B2FF59;
  box-shadow:
    inset 1px 0 0 1px var(--color-four, #B2FF59),
    0 var(--light-size, 4px) 0 var(--light-size, 4px) var(--color-four, #B2FF59);
  transform-origin: 49.7% 49.7%;
}

@-webkit-keyframes SpinAround {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes SpinAround {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}

blockquote {
  font-size: 4vh;
  color: #fff;
  width: 40%;
  text-align: center;
}

cite {
  display: block;
  text-align: right;
  font-family: Verdana, Arial, sans-serif;
  margin-top: 1rem;
  font-size: 2vh;
  color: #aaa;
  font-style: normal;
  will-change: opacity, filter;
  opacity: 0;
  filter: blur(4px);
}

#author-occupation {
  font-size: 2vh;
  color: #aaa;
}

#author-occupation {
  font-size: 2vh;
  color: #aaa;
}

blockquote #preloader-quote {
  font-family: Georgia, serif;
  font-style: italic;
  letter-spacing: .2vh;
}

blockquote #preloader-quote span {
  will-change: opacity, filter;
  opacity: 0.1;
  filter: blur(4px);
}

#preloader-quote {
  quotes: "“" "”" "‘" "’";
}

#preloader-quote:before {
  content: open-quote;
  margin-right: .8vh;
}

#preloader-quote:after {
  content: close-quote;
}

#preloader-quote:before,
#preloader-quote:after {
  color: #ccc;
  font-size: 4vh;
}

#load {
  position: absolute;
  width: 600px;
  height: 36px;
  left: 50%;
  bottom: 10%;
  margin-left: -300px;
  overflow: visible;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  z-index: 999;
}

#load div {
  position: absolute;
  width: 20px;
  height: 36px;
  opacity: 0;
  font-family: Helvetica, Arial, sans-serif;
  animation: move 2s linear infinite;
  -o-animation: move 2s linear infinite;
  -moz-animation: move 2s linear infinite;
  -webkit-animation: move 2s linear infinite;
  transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  color: var(--vice-city-pink);
}

#load div:nth-child(2) {
  animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}

#load div:nth-child(3) {
  animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}

#load div:nth-child(4) {
  animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}

#load div:nth-child(5) {
  animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}

#load div:nth-child(6) {
  animation-delay: 1s;
  -o-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

#load div:nth-child(7) {
  animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
}

@keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }

  35% {
    left: 41%;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  65% {
    left: 59%;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  100% {
    left: 100%;
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    opacity: 0;
  }
}

@-moz-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }

  35% {
    left: 41%;
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  65% {
    left: 59%;
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  100% {
    left: 100%;
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
    opacity: 0;
  }
}

@-webkit-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }

  35% {
    left: 41%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  65% {
    left: 59%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  100% {
    left: 100%;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    opacity: 0;
  }
}

@-o-keyframes move {
  0% {
    left: 0;
    opacity: 0;
  }

  35% {
    left: 41%;
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  65% {
    left: 59%;
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    opacity: 1;
  }

  100% {
    left: 100%;
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    opacity: 0;
  }
}




/* Media query for screens smaller than 768px (or adjust as needed) */
@media (max-width: 768px) {}





/* Media query for mobile phones in portrait mode */
@media (max-width: 768px) and (orientation: portrait) {

  /*Stats */
  #monitor-resources {
    position: fixed;
    bottom: 10px;
    left: 10px;
    color: #656565;
    /* Bright green text for the terminal look */
    padding: 5px;
    font-family: 'Courier New', Courier, monospace;
    /* Monospace font for the terminal style */
    font-size: 0.5vh;
    z-index: 1000;
    opacity: 0.1;
    transition: opacity 1s ease-in-out;
  }

  #user-info-for-nerds {
    position: fixed;
    bottom: 10px;
    right: 10px;
    color: #656565;
    /* Bright green text for the terminal look */
    padding: 5px;
    font-family: 'Courier New', Courier, monospace;
    /* Monospace font for the terminal style */
    font-size: 0.5vh;
    z-index: 1000;
    opacity: 0.1;
    transition: opacity 1s ease-in-out;
    text-align: right;
  }

  #monitor-resources.fade-out,
  #user-info-for-nerds.fade-out {
    opacity: 0;
  }

  /* Preloader */
  .preloader {
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100dvh;
    overflow: hidden;
    z-index: 99;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    /* Ensure it's visible initially */
    transition: opacity 1s ease-in-out;
    /* Smooth transition for opacity */
  }

  .main_preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100dvh;
    background-color: #000;
    overflow: hidden;
    z-index: 99;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  /* █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ */
  .Loader {
    opacity: 0;
    position: relative;
    width: var(--loader-size-mobile, 150px);
    min-width: 110px;
    overflow: visible;
    margin: 40px;
    border-radius: 50%;
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.4), 0 0 25px rgba(255, 255, 255, 0.8);
    transition: opacity 1s ease-in-out;
  }

  .Loader::after {
    content: attr(data-text);
    color: #CECECE;
    color: var(--text-color, #CECECE);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(70% + 0.10vw);
    text-transform: uppercase;
    letter-spacing: 5px;
  }

  .Loader::before {
    content: '';
    float: left;
    padding-top: 100%;
  }

  .Loader__Circle {
    display: block;
    position: absolute;
    border-radius: 50%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.8;
    mix-blend-mode: screen;
    filter: brightness(120%);
    -webkit-animation-name: SpinAround;
    animation-name: SpinAround;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
  }

  .Loader__Circle:nth-of-type(1) {
    box-shadow:
      inset var(--light-inset-mobile) 0 0 var(--light-inset-mobile) var(--color-one, #2979FF),
      var(--light-size-mobile, 4px) 0 0 var(--light-size-mobile, 4px) var(--color-one, #2979FF);
    animation-direction: reverse;
    transform-origin: 49.6% 49.8%;
  }

  .Loader__Circle:nth-of-type(2) {
    box-shadow:
      inset var(--light-inset-mobile) 0 0 var(--light-inset-mobile) var(--color-two, #FF1744),
      var(--light-size, 4px) 0px 0 var(--light-size-mobile, 4px) var(--color-two, #FF1744);
    transform-origin: 49.5% 49.8%;
  }

  .Loader__Circle:nth-of-type(3) {
    box-shadow:
      inset var(--light-inset-mobile) 0 0 var(--light-inset-mobile) var(--color-three, #FFFF8D),
      0 var(--light-size, 4px) 0 var(--light-size-mobile, 4px) var(--light-size-mobile, #FFFF8D);
    transform-origin: 49.8% 49.8%;
  }

  .Loader__Circle:nth-of-type(4) {
    box-shadow:
      inset var(--light-inset-mobile) 0 0 var(--light-inset-mobile) var(--color-four, #B2FF59),
      0 var(--light-size-mobile, 4px) 0 var(--light-size-mobile, 4px) var(--color-four, #B2FF59);
    transform-origin: 49.7% 49.7%;
  }

  @-webkit-keyframes SpinAround {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(-360deg);
    }
  }

  @keyframes SpinAround {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(-360deg);
    }
  }



  blockquote {
    font-size: 3vh;
    color: #fff;
    width: 90%;
    text-align: center;
  }
  
  cite {
    display: block;
    text-align: right;
    font-family: Verdana, Arial, sans-serif;
    margin-top: 0 !important;
    font-size: 1.2vh;
    color: #aaa;
    font-style: normal;
    will-change: opacity, filter;
    opacity: 0;
    filter: blur(4px);
  }

  #author-years-of-life {
    text-wrap: nowrap;
  }
  
  #author-occupation {
    font-size: 1.2vh;
    color: #aaa;
  }
  
  
  blockquote #preloader-quote {
    font-family: Georgia, serif;
    font-style: italic;
    letter-spacing: .1vh;
  }
  
  blockquote #preloader-quote span {
    will-change: opacity, filter;
    opacity: 0.1;
    filter: blur(4px);
  }
  
  #preloader-quote {
    quotes: "“" "”" "‘" "’";
  }
  
  #preloader-quote:before {
    content: open-quote;
    margin-right: .8vh;
  }
  
  #preloader-quote:after {
    content: close-quote;
  }
  
  #preloader-quote:before,
  #preloader-quote:after {
    color: #ccc;
    font-size: 3vh;
  }
  
  #load {
    position: absolute;
    width: 100%;
    height: 36px;
    bottom: 10%;
    margin-left: -100px;
    overflow: visible;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    z-index: 999;
    left: 20%;
  }
  
  #load div {
    position: absolute;
    width: 80px;
    height: 72px;
    opacity: 0;
    font-family: Helvetica, Arial, sans-serif;
    animation: move 2s linear infinite;
    -o-animation: move 2s linear infinite;
    -moz-animation: move 2s linear infinite;
    -webkit-animation: move 2s linear infinite;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    color: var(--vice-city-pink);
    font-size: 1.5vh;
  }
}