@import "./variables.css";
@import "./animations.css";
@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Orbitron:wght@400;700&family=Rajdhani:wght@400;600&display=swap");
/***********************
 * Idk what this does. *
 *    No touchies.	   *
 **********************/
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/********************
 *   	  Fonts 		  *
 ********************/
/* @font-face { */
/* 	font-family: 'Fira Code'; */
/* 	font-style: normal; */
/* 	font-weight: 300; */
/* 	src: */
/* 		local('Fira Code'), */
/* 		url('./FiraCode-Light.woff') format('woff'); */
/* } */
/* @font-face { */
/* 	font-family: 'Fira Code'; */
/* 	font-style: normal; */
/* 	font-weight: 500; */
/* 	src: */
/* 		local('Fira Code'), */
/* 		url('./FiraCode-Regular.woff') format('woff'); */
/* } */

/********************
 * 	   General		  *
 ********************/

html,
body,
#root {
  height: 100%;
  width: 100%;
}
body {
  font-family: var(--font-body);
  margin: 0;
  padding: 0.5rem;
  background-color: var(--bg-main);
  color: var(--text-main);
  overflow: hidden;
}
h1,
h2,
h3 {
  font-family: var(--font-heading);
}
.loop,
.glow-text {
  font-family: var(--font-accent);
}
p {
  margin: 0px;
}
a,
a:visited,
a:active {
  color: var(--text-alt);
  text-decoration: none;
}
.glow {
  color: var(--neon-pink);
  text-shadow:
    0 0 5px var(--neon-pink),
    0 0 10px var(--neon-pink),
    0 0 20px var(--neon-pink),
    0 0 40px var(--neon-blue),
    0 0 80px var(--neon-blue);

  animation: pulseGlow 2s infinite alternate;
}
/********************
 * 	   Scrollbar	*
 ********************/
::-webkit-scrollbar {
  /* width */
  width: 10px;
}

::-webkit-scrollbar-thumb {
  /* Handle */
  background: var(--default-color);
}

::-webkit-scrollbar-thumb:hover {
  /* Handle on hover */
  background: var(--default-color);
}

::-webkit-scrollbar-track-piece {
  /* not handle on */
  background: transparent;
}