/* 
@font-face {
  font-family: 'S-CoreDream-9Black';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
} */

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");


body {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100vh;
  position: relative;
}


a {
  position: absolute;
  color: rgba(0, 0, 0, 0.795);
  /* -webkit-text-decoration: #2224 wavy underline;
            text-decoration: #2224 wavy underline; */
  text-decoration: none;
  transition: all 0.5s;
  font-weight: 700;
  font-size: 5vh;
  letter-spacing: -0.5vh;
  font-family: 'Oswald', sans-serif;
  z-index: 99;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 1px rgb(32, 32, 32), 0 0 5px rgb(97, 97, 97), 
  0 0 10px rgb(194, 194, 194), 0 0 20px #ffffff, 0 0 40px #ffffff,
  0 0 80px #b6b6b6, 0 0 120px #707070;
}

a:hover {
  color: rgb(255, 255, 255);
  text-shadow: 0 0 100px rgb(255, 255, 255, 0.2);
  font-size: 50vh;
  text-shadow: 0 0 1px rgb(255, 255, 255), 0 0 5px rgb(255, 255, 255), 
  0 0 10px rgb(255, 255, 255), 0 0 20px #d8d8d8, 0 0 40px #d4d4d4,
  0 0 80px #a3a3a3;

}

canvas {
  position: fixed;
  z-index: -1;
}

.bg {
  background: linear-gradient(-45deg, #ee7752, #6b60fd, #23a6d5, #23d5ab);
  opacity: 0.3;
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 19;
}


/* ani */

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}