body{
    background-image: url(./assets/mybg.gif);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Karma", sans-serif;
    animation: arrow 0.8s infinite;
    animation: glitch 10s infinite alternate 2s ;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.1) 50%
  ), linear-gradient(
    90deg, 
    rgba(255, 0, 0, 0.03), 
    rgba(0, 255, 0, 0.01), 
    rgba(0, 0, 255, 0.03)
  );
  background-size: 100% 3px, 3px 100%; /* Creates the horizontal line effect */
  pointer-events: none; /* So you can still click things through it */
  z-index: 9999;
  animation: arrow 0.8s infinite;
  
}

.main{
    width: fit-content;
    height: 30%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
    padding: 10px;
    border: solid black;
    box-shadow: 
    0 -4px 0 0 white,  /* Top */
    0 4px 0 0 white,   /* Bottom */
    -4px 0 0 white,    /* Left */
    4px 0 0 white;     /* Right */
}

.text{
    font-size: 500%;
    font-weight: 500;
    color: black;
}

.text::after{
    animation: dot 2s infinite;
    content: "";
}

@keyframes dot{
    0% {content: ".";}
    50% {content: "..";}
    100% {content: "...";}
}

@font-face {
    font-family: "ByteBounce";
    src: url(./fonts/ByteBounce.ttf); format: ("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Karma";
    src: url(./fonts/Karma\ Future.otf); format: ("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@keyframes arrow {
  0% { cursor: url("./assets/arrow1.png"), auto; }
  50% { cursor: url("./assets/arrow2.png"), auto; }
  100% { cursor: url("./assets/arrow1.png"), auto; }
}

@keyframes glitch {
    0%{
        background-image: url(./assets/mybg.gif);
    }
    10%{
        background-image: url(./assets/mybg.gif);
    }
    20%{
        background-image: url(./assets/mybg2.gif);
    }
    30%{
        background-image: url(./assets/mybg.gif);}
    40%{
        background-image: url(./assets/mybg.gif);
    }
    50%{
        background-image: url(./assets/mybg.gif);
    }
    60%{
        background-image: url(./assets/mybg2.gif);
    }
    70%{
        background-image: url(./assets/mybg.gif);
    }
    80%{
        background-image: url(./assets/mybg.gif);
    }
    90%{
        background-image: url(./assets/mybg.gif);
    }
    100%{
        background-image: url(./assets/mybg2.gif);
    }
}