@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  @font-face {
    font-family: 'Qlassy';
    src: url(attachments/fnt/Qlassy.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Soligant';
    src: url(attachments/fnt/Soligant.otf) format('opentype');
  }
  @font-face {
    font-family: 'August';
    src: url(attachments/fnt/August.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Nostalgia';
    src: url(attachments/fnt/Nostalgia.otf) format('opentype');
  }
  @font-face {
    font-family: 'Amsterdam Signature';
    src: url(attachments/fnt/Amsterdam\ Signature.otf) format('opentype');
  }
  @font-face {
    font-family: 'Smooth Fantasy';
    src: url(attachments/fnt/Smooth\ Fantasy.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Autography';
    src: url(attachments/fnt/Autography.otf) format('opentype');
  }
  @font-face {
    font-family: 'Sterling Heights';
    src: url(attachments/fnt/Sterling\ heights.ttf) format('truetype');
  }

  html {
    scroll-behavior: smooth;
  }




  .preloader {
    background: white;
    object-fit: cover;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    position: fixed;
    transition: opacity 0.75s, visibility 0.75s;
    pointer-events: none;
    z-index: 10;
  }
  .preload_text {
    font-family: 'Noto Serif JP', serif;
    font-weight: bold;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 3.5vmin;
    color: gray;
    left: 80%;
    top: 90%;
    transform: translate(-50%, -50%);
    letter-spacing: 3px;
    pointer-events: none;
    z-index: 11;
  }
  .preload_logo {
    display: flex;
    position: absolute;
    user-select: none;
    gap: 5vmin;
    height: 36vmin;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 11;
    filter: invert(50%);
  }
  .preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
  }






  #blur-around {
    position: fixed;
    z-index: 9;
    pointer-events: none;
    /* twice the viewport size so it always covers fully */
    width: 200vw;
    height: 200vh;
    /* negative offset by half so we are sure we cover the full viewport */
    left: -100vw;
    top: -100vh;
    /* we'll use transform translate to move it */
    transform-origin: center;  
    mask: linear-gradient(black, black, transparent);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-mask-image: radial-gradient(850px at 50% 50%, transparent 5%, black 100%);
    mask-image: radial-gradient(850px at 50% 50% , transparent 5%, black 100%)
  }
  
  /* falback for browsers that don't have backdrop-filter */
  @supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
    #blur-around {
      background-color: rgba(255,255,255,.8);
    }
  }




  body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: black;
  }

  .background {
    object-fit: cover;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.65;
    animation: reverse_animate_background 25s ease;
    filter: hue-rotate(0);
  }
  @keyframes reverse_animate_background
  {
    0% { filter: hue-rotate(0); }
    31% { filter: hue-rotate(0); }
    34% { filter: hue-rotate(180deg); }
    35% { filter: hue-rotate(180deg); }
    38% { filter: hue-rotate(0); }
  }

  ::-webkit-scrollbar {
    width: 0px;
  }


.lightleakloop {
  object-fit: cover;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  mix-blend-mode: lighten;
  pointer-events: none;
  animation: lightleakloop 100s ease;
  opacity: 1;
}
@keyframes lightleakloop
{
  0%
  {
    opacity: 0;
  }
  0.1%
  {
    opacity: 0;
  }
  0.7%
  {
    opacity: 1;
  }
}






  .text0left {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 4vmin;
    color: white;
    left: 24%;
    top: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 5px;
    animation: animatetext0left 25s ease;
    opacity: 0;
    pointer-events: none;
  }
  @keyframes animatetext0left
  {
    3.8%
    {
      opacity: 0;
      left: 50%;
    }
    4.2%
    {
      opacity: 0;
      left: 50%;
    }
    4.4%
    {
      opacity: 1;
      left: 50%;
    }
    4.8%
    {
      opacity: 0;
      left: 50%;
    }
    5%
    {
      opacity: 0;
      left: 50%;
    }
    5.4%
    {
      opacity: 0;
      left: 50%;
    }
    5.6%
    {
      opacity: 1;
      left: 50%;
    }
    6%
    {
      opacity: 0;
      left: 50%;
    }
    6.2%
    {
      opacity: 0;
      left: 50%;
    }
    6.6%
    {
      opacity: 0;
      left: 50%;
    }
    6.8%
    {
      opacity: 1;
      left: 50%;
    }






    8%
    {
      opacity: 1;
      left: 50%;
    }
    14%
    {
      opacity: 1;
      left: 24%;
    }
    52.5%
    {
      opacity: 1;
      left: 24%;
    }
    55%
    {
      opacity: 1;
      left: 24%;
    }
    61%
    {
      opacity: 1;
      left: 50%;
    }
    62%
    {
      opacity: 1;
      left: 50%;
    }
    64%
    {
      opacity: 0;
      left: 50%;
    }
  }
  .text0leftsmall {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 2vmin;
    color: white;
    left: 24%;
    top: 51.45%;
    transform: translate(-50%, -50%);
    letter-spacing: 5px;
    animation: animatetext0leftsmall 25s ease;
    opacity: 0;
    pointer-events: none;
  }
  @keyframes animatetext0leftsmall
  {
    8%
    {
      opacity: 0;
      left: 50%;
    }
    8.4%
    {
      opacity: 1;
      left: 50%;
    }
    14.4%
    {
      opacity: 1;
      left: 28%;
    }
    52.5%
    {
      opacity: 1;
      left: 28%;
    }
    55%
    {
      opacity: 1;
      left: 28%;
    }
    61%
    {
      opacity: 0;
      left: 50%;
    }
    62%
    {
      opacity: 0;
      left: 50%;
    }
  }
  .text0right {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 4vmin;
    color: white;
    left: 76%;
    top: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 5px;
    animation: animatetext0right 25s ease;
    opacity: 0;
    pointer-events: none;
  }
  @keyframes animatetext0right
  {
    3.8%
    {
      opacity: 0;
      left: 50%;
    }
    4.2%
    {
      opacity: 0;
      left: 50%;
    }
    4.4%
    {
      opacity: 1;
      left: 50%;
    }
    4.8%
    {
      opacity: 0;
      left: 50%;
    }
    5%
    {
      opacity: 0;
      left: 50%;
    }
    5.4%
    {
      opacity: 0;
      left: 50%;
    }
    5.6%
    {
      opacity: 1;
      left: 50%;
    }
    6%
    {
      opacity: 0;
      left: 50%;
    }
    6.2%
    {
      opacity: 0;
      left: 50%;
    }
    6.6%
    {
      opacity: 0;
      left: 50%;
    }
    6.8%
    {
      opacity: 1;
      left: 50%;
    }






    8%
    {
      opacity: 1;
      left: 50%;
    }
    14%
    {
      opacity: 1;
      left: 76%;
    }
    52.5%
    {
      opacity: 1;
      left: 76%;
    }
    55%
    {
      opacity: 1;
      left: 76%;
    }
    61%
    {
      opacity: 1;
      left: 50%;
    }
    62%
    {
      opacity: 0;
      left: 50%;
    }
  }
  .text0rightsmall {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 2vmin;
    color: white;
    left: 76%;
    top: 51.45%;
    transform: translate(-50%, -50%);
    letter-spacing: 5px;
    animation: animatetext0rightsmall 25s ease;
    opacity: 0;
    pointer-events: none;
  }
  @keyframes animatetext0rightsmall
  {
    8%
    {
      opacity: 0;
      left: 50%;
    }
    8.4%
    {
      opacity: 1;
      left: 50%;
    }
    14.4%
    {
      opacity: 1;
      left: 72%;
    }
    52.5%
    {
      opacity: 1;
      left: 72%;
    }
    55%
    {
      opacity: 1;
      left: 72%;
    }
    61%
    {
      opacity: 0;
      left: 50%;
    }
    62%
    {
      opacity: 0;
      left: 50%;
    }
  }






  .now_playing_text1 {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 2vmin;
    color: white;
    left: 50%;
    top: 95%;
    transform: translate(-50%, -50%);
    letter-spacing: 3px;
    animation: now_playing_text1 100s ease;
    opacity: 0;
    pointer-events: none;
  }
  @keyframes now_playing_text1
  {
    0.7%
    {
      opacity: 0;
      top: 95%;
    }
    1.5%
    {
      opacity: 1;
      top: 85%;
    }
    3.2%
    {
      opacity: 1;
      top: 85%;
    }
    4%
    {
      opacity: 0;
      top: 95%;
    }
  }

  .now_playing_text2 {
    font-family: 'Qlassy', serif;
    font-weight: 1000;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 2.4vmin;
    color: white;
    left: 50%;
    top: 98%;
    transform: translate(-50%, -50%);
    letter-spacing: 2px;
    animation: now_playing_text2 100s ease;
    opacity: 0;
    pointer-events: none;
  }
  @keyframes now_playing_text2
  {
    0.7%
    {
      opacity: 0;
      top: 98%;
    }
    1.5%
    {
      opacity: 1;
      top: 88%;
    }
    3.2%
    {
      opacity: 1;
      top: 88%;
    }
    4%
    {
      opacity: 0;
      top: 98%;
    }
  }






  .text1 {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 4vmin;
    color: white;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    letter-spacing: 5px;
    animation: animate1 25s ease;
    opacity: 0;
    pointer-events: none;
  }
  @keyframes animate1
  {
    17%
    {
      opacity: 0;
    }
    20.5%
    {
      opacity: 1;
    }
    52.5%
    {
      opacity: 1;
    }
    55%
    {
      opacity: 0;
    }
  }

  .text2 {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 4vmin;
    color: white;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    letter-spacing: 5px;
    animation: animate2 25s ease;
    opacity: 0;
    pointer-events: none;
  }
  @keyframes animate2
  {
    22%
    {
      opacity: 0;
    }
    25.5%
    {
      opacity: 1;
    }
    52.5%
    {
      opacity: 1;
    }
    55%
    {
      opacity: 0;
    }
  }

  .text3 {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 4vmin;
    color: white;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    letter-spacing: 5px;
    animation: animate3 25s ease;
    opacity: 0;
    pointer-events: none;
  }
  @keyframes animate3
  {
    25%
    {
      opacity: 0;
    }
    28.5%
    {
      opacity: 1;
    }
    52.5%
    {
      opacity: 1;
    }
    55%
    {
      opacity: 0;
    }
  }

  .text4 {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 4vmin;
    color: white;
    left: 50%;
    top: 57%;
    transform: translate(-50%, -50%);
    letter-spacing: 5px;
    animation: animate4 25s ease;
    opacity: 0;
    pointer-events: none;
  }
  @keyframes animate4
  {
    28%
    {
      opacity: 0;
    }
    31.5%
    {
      opacity: 1;
    }
    52.5%
    {
      opacity: 1;
    }
    55%
    {
      opacity: 0;
    }
  }

  .textlast {
    display: flex;
    position: absolute;
    user-select: none;
    gap: 5vmin;
    height: 30vmin;
    left: 50%;
    top: 90%;
    transform: translate(-50%, -50%);
    animation: animate5 25s ease;
  }
  @keyframes animate5
  {
    0%
    {
      opacity: 0;
      top: 84%;
      height: 42vmin;
    }
    36%
    {
      opacity: 0;
      top: 84%;
      height: 42vmin;
    }
    42%
    {
      opacity: 1;
      top: 84%;
      height: 42vmin;
    }
    54.9%
    {
      opacity: 1;
      top: 84%;
      height: 42vmin;
    }
    55%
    {
      opacity: 1;
      top: 84%;
      height: 42vmin;
    }
    59%
    {
      opacity: 1;
      top: 90%;
      height: 30vmin;
    }
  }

  .reverse_colour {
    background: white;
    object-fit: cover;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
    position: fixed;
    transition: opacity 0.75s, visibility 0.75s;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: difference;
    backdrop-filter: invert(100%);
    animation: reverse_animate 25s ease;
  }
  @keyframes reverse_animate
  {
    0% { backdrop-filter: invert(100%); }
    31% { backdrop-filter: invert(100%); }
    34% { backdrop-filter: invert(0%); }
    35% { backdrop-filter: invert(0%); }
    38% { backdrop-filter: invert(100%); }
  }

  .train {
    display: flex;
    position: absolute;
    user-select: none;
    gap: 5vmin;
    height: 40vmin;
    left: 350%;
    top: 87%;
    transform: translate(-50%, -50%);
    animation: animate6 25s linear;
    opacity: 0;
    pointer-events: none;
  }
  @keyframes animate6
  {
    0%
    {
      opacity: 0;
    }
    28%
    {
      opacity: 0;
      left: -400%;
    }
    28.01%
    {
      opacity: 1;
      left: -400%;
    }
    37.0%
    {
      opacity: 1;
      left: 350%;
    }
    37.01%
    {
      opacity: 0;
      left: 350%;
    }
  }








  /* LEFT CLICKABLE BAR */
  .left1 {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 3vmin;
    color: white;
    left: 38%;
    top: 90%;
    transform: translate(-50%, -50%);
    animation: leftanimate1 25s ease;
    pointer-events: none;
  }
  @keyframes leftanimate1
  {
    0%
    {
      opacity: 0;
      top: 93%;
    }
    56%
    {
      opacity: 0;
      top: 93%;
    }
    60%
    {
      opacity: 1;
      top: 90%;
    }
  }

  .left2 {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 7vmin;
    color: white;
    left: 30%;
    top: 90%;
    transform: translate(-50%, -50%);
    animation: leftanimate2 25s ease;
    pointer-events: none;
  }
  @keyframes leftanimate2
  {
    0%
    {
      opacity: 0;
      top: 93%;
      font-size: 2vmin;
    }
    57%
    {
      opacity: 0;
      top: 93%;
      font-size: 2vmin;
    }
    61%
    {
      opacity: 1;
      top: 90%;
      font-size: 7vmin;
    }
  }


  /* RIGHT CLICKABLE BAR */
  .right1 {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 3vmin;
    color: white;
    left: 62%;
    top: 90%;
    transform: translate(-50%, -50%);
    animation: rightanimate1 25s ease;
    pointer-events: none;
  }
  @keyframes rightanimate1
  {
    0%
    {
      opacity: 0;
      top: 93%;
    }
    56%
    {
      opacity: 0;
      top: 93%;
    }
    60%
    {
      opacity: 1;
      top: 90%;
    }
  }

  .right2 {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 5vmin;
    color: white;
    left: 70%;
    top: 90%;
    transform: translate(-50%, -50%);
    animation: rightanimate2 25s ease;
  }
  @keyframes rightanimate2
  {
    0%
    {
      opacity: 0;
      top: 93%;
      font-size: 2vmin;
    }
    57%
    {
      opacity: 0;
      top: 93%;
      font-size: 2vmin;
    }
    61%
    {
      opacity: 1;
      top: 90%;
      font-size: 5vmin;
    }
  }

  #main {
    font-family: 'Nostalgia', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 0.1vmin;
    color: white;
    left: 50%;
    top: -10%;
    transform: translate(-50%, -50%);
  }
  .discord_name {
    font-family: 'Nostalgia', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 2vmin;
    color: white;
    left: 50%;
    top: 11.5%;
    transform: translate(-50%, -50%);
    animation: discord_name_animate 25s ease;
    pointer-events: none;
  }
  @keyframes discord_name_animate
  {
    0%
    {
      opacity: 0;
      top: 8.5%;
    }
    56.5%
    {
      opacity: 0;
      top: 8.5%;
    }
    60%
    {
      opacity: 1;
      top: 11.5%;
    }
  }


  .username {
    font-family: 'Sterling Heights';
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 5vmin;
    letter-spacing: 1px;
    color: white;
    left: 50%;
    top: 15%;
    transform: translate(-50%, -50%);
    animation: username_animate 25s ease;
    pointer-events: none;
  }
  @keyframes username_animate
  {
    0%
    {
      opacity: 0;
      top: 12%;
    }
    56%
    {
      opacity: 0;
      top: 12%;
    }
    59.5%
    {
      opacity: 1;
      top: 15%;
    }
  }

  .username_bracket_left {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 7vmin;
    color: white;
    left: 40%;
    top: 15%;
    transform: translate(-50%, -50%);
    animation: username_bracket_left_animate 25s ease;
    pointer-events: none;
  }
  @keyframes username_bracket_left_animate
  {
    0%
    {
      opacity: 0;
      top: 12%;
    }
    57%
    {
      opacity: 0;
      top: 12%;
    }
    60.5%
    {
      opacity: 1;
      top: 15%;
    }
  }
  .username_bracket_right {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 7vmin;
    color: white;
    left: 60%;
    top: 15%;
    transform: translate(-50%, -50%);
    animation: username_bracket_right_animate 25s ease;
    pointer-events: none;
  }
  @keyframes username_bracket_right_animate
  {
    0%
    {
      opacity: 0;
      top: 12%;
    }
    57%
    {
      opacity: 0;
      top: 12%;
    }
    60.5%
    {
      opacity: 1;
      top: 15%;
    }
  }

  .socials {
    display: flex;
    position: absolute;
    padding: 5px;
    left: 50%;
    top: 26%;
    transform: translate(-50%, -50%);
    animation: socials_animate 25s ease;
    opacity: 1;
  }
  @keyframes socials_animate
  {
    0%
    {
      opacity: 0;
      top: -50%;
    }
    58.49%
    {
      opacity: 0;
      top: -50%;
    }
    58.5%
    {
      opacity: 0;
      top: 24%;
    }
    62%
    {
      opacity: 1;
      top: 26%;
    }
  }

  .icon_space {
    user-select: none;
    gap: 5vmin;
    height: 4.5vmin;
    pointer-events: none;
  }

  .icons {
    user-select: none;
    gap: 5vmin;
    height: 4.5vmin;
  }

  .copy_text {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 2.5vmin;
    letter-spacing: 1.5px;
    color: white;
    left: 50%;
    top: 30.7%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
  }

  .copy_text_animate {
    animation: copied_to_clipboard_animation 3s ease;
  }
  @keyframes copied_to_clipboard_animation
  {
    0%
    {
      opacity: 0;
      top: 30.7%;
    }
    25%
    {
      opacity: 1;
      top: 33.2%;
    }
    75%
    {
      opacity: 1;
      top: 33.2%;
    }
    0%
    {
      opacity: 0;
      top: 30.7%;
    }
  }











  #about {
    font-family: 'Nostalgia';
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 0.1vmin;
    color: white;
    left: 50%;
    top: 190%;
    transform: translate(-50%, -50%);
  }
  .about_me {
    font-family: 'Nostalgia';
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 7vmin;
    color: white;
    left: 50%;
    top: 200%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .about_bracket_left {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 7vmin;
    color: white;
    left: 25%;
    top: 200%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .about_bracket_right {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 7vmin;
    color: white;
    left: 75%;
    top: 200%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .pfp {
    display: flex;
    position: absolute;
    user-select: none;
    gap: 5vmin;
    height: 20vmin;
    left: 40%;
    top: 217%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .pfp_name {
    font-family: 'Sterling Heights', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 4vmin;
    color: white;
    left: 60%;
    top: 218%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .pfp_border {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 5vmin;
    color: white;
    left: 50%;
    top: 217%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .current_status {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 3vmin;
    color: white;
    left: 50%;
    top: 237%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .gender {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 3.6vmin;
    color: white;
    left: 50%;
    top: 248%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .end_status {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 3.2vmin;
    color: white;
    left: 50%;
    top: 254%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .end_border {
    font-family: 'Nostalgia';
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 0.1vmin;
    color: white;
    left: 50%;
    top: 700%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  /* LEFT CLICKABLE BAR */
  .left1_about {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 3vmin;
    color: white;
    left: 38%;
    top: 280%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .left2_about {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 5vmin;
    color: white;
    left: 30%;
    top: 280%;
    transform: translate(-50%, -50%);
  }
  /* RIGHT CLICKABLE BAR */
  .right1_about {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 3vmin;
    color: white;
    left: 62%;
    top: 280%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .right2_about {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 5vmin;
    color: white;
    left: 70%;
    top: 280%;
    transform: translate(-50%, -50%);
  }
  .white_space_about {
    display: flex;
    position: absolute;
    user-select: none;
    gap: 5vmin;
    height: 30vmin;
    left: 50%;
    top: 280%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }










  #projects {
    font-family: 'Nostalgia';
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 0.1vmin;
    color: white;
    left: 50%;
    top: 390%;
    transform: translate(-50%, -50%);
  }

  .my_projects {
    font-family: 'Nostalgia';
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 7vmin;
    color: white;
    left: 50%;
    top: 400%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .projects_bracket_left {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 7vmin;
    color: white;
    left: 25%;
    top: 400%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .projects_bracket_right {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 7vmin;
    color: white;
    left: 75%;
    top: 400%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }







  .lynx_mains_string {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 3.5vmin;
    color: white;
    left: 35%;
    top: 428%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .lynx_mains_icon {
    display: flex;
    position: absolute;
    user-select: none;
    gap: 5vmin;
    height: 12vmin;
    left: 35%;
    top: 445.8%;
    transform: translate(-50%, -50%);
  }
  .lynx_mains_title {
    font-family: 'Qlassy', serif;
    font-weight: 1000;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 3.4vmin;
    letter-spacing: 2px;
    color: white;
    left: 35%;
    top: 455%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .lynx_mains_roles {
    font-family: 'Qlassy', serif;
    font-weight: 1000;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 2vmin;
    letter-spacing: 2.2px;
    color: white;
    left: 35%;
    top: 458.5%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }


  .home_bots_string {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 3.5vmin;
    color: white;
    left: 65%;
    top: 428%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .home_bots_icon {
    display: flex;
    position: absolute;
    user-select: none;
    gap: 5vmin;
    height: 12vmin;
    left: 65%;
    top: 445.8%;
    transform: translate(-50%, -50%);
  }
  .home_bots_title {
    font-family: 'Qlassy', serif;
    font-weight: 1000;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 3.4vmin;
    letter-spacing: 2px;
    color: white;
    left: 65%;
    top: 455%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .home_bots_roles {
    font-family: 'Qlassy', serif;
    font-weight: 1000;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 2vmin;
    letter-spacing: 2.2px;
    color: white;
    left: 65%;
    top: 458.5%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .projects_diamond {
    font-family: 'Qlassy', serif;
    display: flex;
    position: absolute;
    text-align: center;
    font-size: 5vmin;
    color: white;
    left: 50%;
    top: 440%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }











    /* LEFT CLICKABLE BAR */
    .left1_projects {
      font-family: 'Qlassy', serif;
      display: flex;
      position: absolute;
      text-align: center;
      font-size: 3vmin;
      color: white;
      left: 38%;
      top: 480%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
    .left2_projects {
      font-family: 'Qlassy', serif;
      display: flex;
      position: absolute;
      text-align: center;
      font-size: 5vmin;
      color: white;
      left: 30%;
      top: 480%;
      transform: translate(-50%, -50%);
    }
    /* RIGHT CLICKABLE BAR */
    .right1_projects {
      font-family: 'Qlassy', serif;
      display: flex;
      position: absolute;
      text-align: center;
      font-size: 3vmin;
      color: white;
      left: 62%;
      top: 480%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
    .right2_projects {
      font-family: 'Qlassy', serif;
      display: flex;
      position: absolute;
      text-align: center;
      font-size: 5vmin;
      color: white;
      left: 70%;
      top: 480%;
      transform: translate(-50%, -50%);
    }
    .white_space_projects {
      display: flex;
      position: absolute;
      user-select: none;
      gap: 5vmin;
      height: 30vmin;
      left: 50%;
      top: 480%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }











  #starting_animation {
    animation-play-state: paused;
  }