/* 
                   _                 _                         _                    
                  | |               | |                       | |                   
  ___ __ _ _ __ __| | ___ __ _ _ __ | |_ ___  _ __   ___  __ _| | ___   _ _ __ __ _ 
 / __/ _` | '__/ _` |/ __/ _` | '_ \| __/ _ \| '__| / __|/ _` | |/ / | | | '__/ _` |
| (_| (_| | | | (_| | (_| (_| | |_) | || (_) | |    \__ \ (_| |   <| |_| | | | (_| |
 \___\__,_|_|  \__,_|\___\__,_| .__/ \__\___/|_|    |___/\__,_|_|\_\\__,_|_|  \__,_|
                              | |                                                   
                              |_|                                                   

hi! thanks for downloading my code. this is the css! it should work out of the box, but if you run into any
issues, let me know! i've commented this to make it (hopefully) easy to understand and navigate. a bit of 
tomfoolery was used to get some things working, so don't mind that...

this code is free to use! please credit me if you're asked where the code comes from, but otherwise go
wild o7

thanks for checking it out!
made with love by angel

---------- contact ----------
email: angel at angelnetcast dot com
main site: https://angelnetcast.com/
layout site: https://layouts.angelnetcast.com/

*/
<!---------------------------------------------remove-right-click------------------------------------------->
@media screen and (min-width:901px) {
img {
    pointer-events: none;
  -webkit-touch-callout: none;
}
}
<!---------------------------------------------filter-crt-lines------------------------------------------->

@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.1), -0.4389924193300864px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.1), -2.7928974010788217px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.1), -0.02956275843481219px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.1), -0.40218538552878136px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.1), -3.4794037899852017px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.1), -1.6125630401149584px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.1), -0.7015590085143956px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.1), -3.896914047650351px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.1), -3.870905614848819px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.1), -2.231056963361899px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.1), -0.08084290417898504px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.1), -2.3758461067427543px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.1), -2.202193051050636px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.1), -2.8638780614874975px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.1), -0.48874025155497314px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.1), -1.8948491305757957px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.1), -0.0833037308038857px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.1), -0.09769827255241735px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.1), -3.443339761481782px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.1), -2.1841838852799786px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.1), -2.6208764473832513px 0 1px rgba(255,0,80,0.06), 0 0 2px;
  }
}

.crt::after {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(18, 16, 16, 0.02);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.25s infinite;
}

.crt::before {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  background:
    linear-gradient(
      rgba(18,16,16,0) 50%,
      rgba(0,0,0,0.06) 50%
    ),
    linear-gradient(
      90deg,
      rgba(255,0,0,0.0125),
      rgba(0,255,0,0.005),
      rgba(0,0,255,0.0125)
    );
  background-size: 100% 2px, 3px 100%;
  z-index: 2;
  pointer-events: none;
}

.crt {
  animation: textShadow 1.6s infinite;
}
/* ------------------------ COLOR VARIABLES AND FONTS ------------------------ */
:root {
  
  --black: black;
  --white: white;
  --skyblue: rgb(223, 247, 255);
  --lightpink: rgb(255, 229, 252);
  --red: red;
  --yellow: yellow;
  --purplelogo: #941f9b;
  --pinklogo: #ff7cb5;
}

@font-face {
  font-family: magazine;
  src: url(assets/Magazine.ttf);
}

@font-face {
  font-family: abalonesmile;
  src: url(assets/AbaloneSmile.otf);
}

/* ------------------------ HTML AND BODY DESIGN ------------------------ */

html {
   background: repeating-conic-gradient(from 45deg, rgba(199, 170, 209, 0.12) 0% 25%, #fcf5ff 0% 50%);
   background-size: 96px 96px;
   background-color: #fcf5ff;
   flex: 0 0 5em;
   overflow-x: auto;
   animation: carouselX 200s infinite linear, carouselY 200s infinite linear;

   cursor: url("assets/cursor.png"), auto;
}

body {
  
  overflow-x: hidden; /* Hide horizontal scrollbar */
  width: 1500px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  font-family: abalonesmile;
     cursor: url("assets/cursor.png"), auto;
}

/* --- link color attributes --- */
a:link {
  color: var(--pinklogo);
     cursor: url("assets/cursor.png"), auto;
}

a:visited {
  color: var(--purplelogo);
     cursor: url("assets/cursor.png"), auto;
}

a:hover {
  color: var(--red);
   cursor: url("assets/cursor.png"), auto;
}

/* --- bullet point --- */
ul {
  list-style-image: url("assets/bullet.gif");
}

/* --- emphasis --- */
mark {
  color: var(--black);
  background-color: var(--yellow);
}

b {
  color: var(--purplelogo);
}

i {
  color: var(--pinklogo);
}

/* ------------------------ GRID LAYOUT ------------------------ */
.grid-container {
  display: grid;
  grid-template-areas:
    "title title title title"
    "topdeco topdeco topdeco topdeco"
    "main main main nav"
    "footer footer footer footer";
       cursor: url("assets/cursor.png"), auto;
}
.grid {
  background-color: var(--white);
  border: 5px dashed var(--pinklogo);
  padding: 20px;
     cursor: url("assets/cursor.png"), auto;
}

/* --- G1 // cardcaptor logo --- */
.g1 {
  grid-area: title;
  text-align: center;
  margin-bottom: 300px;
  margin-top: 20px;
     cursor: url("assets/cursor.png"), auto;
}

/* --- G2 // cloud divider --- */
.g2 {
  grid-area: topdeco;
  text-align: center;
  position: relative;
  display: block;
  font-size: 0px; /*note: this is here to remove the weird gaps in the clouds*/
     cursor: url("assets/cursor.png"), auto;
}

/* --- G3 // nav bar --- */
.g3 {
  grid-area: nav;
  margin-left: 15px;
  margin-right: 200px;
     cursor: url("assets/cursor.png"), auto;
}

/* --- G4 // main content --- */
.g4 {
  grid-area: main;
  position: relative;
  display: block;
  margin-left: 200px;
     cursor: url("assets/cursor.png"), auto;
}

/* --- G5 // footer --- */
.g5 {
  grid-area: footer;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 15px;
     cursor: url("assets/cursor.png"), auto;
}

/* ------------------------ GRAPHIC DECORATIONS  ------------------------ */
/* --- heading text --- */
.header {
  font-family: magazine;
  font-size: 50px;
  color: var(--red);
  text-shadow: var(--yellow) 2px 0px;
}

/* --- horizontal bar --- */
.bar {
  background-color: var(--red);
  box-shadow: var(--yellow) 2px 2px;
  border-radius: 5px;
  width: 500px;
  height: 10px;
}

/* --- body decorations --- */
#disc {
  z-index: -1;
  position: absolute;
  right: -490px;
  animation: 10s spin linear infinite;
}

#flower {
  z-index: 1;
  position: absolute;
  bottom: -70px;
  left: 700px;
}

#sakura {
  z-index: 1;
  position: absolute;
  top: -100px;
  left: -170px;
}

/* --- spin animation --- */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* --- carosel animation x --- */
@keyframes carouselX {
  from {background-position-x: 0;}
  to {background-position-x: 100%;}
}
/* --- carosel animation y --- */
@keyframes carouselY {
  from {background-position-y: 0;}
  to {background-position-y: 100%;}
}