@font-face {
  font-family: Buycat;
  src: url('font/Buycat.ttf');
}

@font-face {
  font-family: TommySoft;
  src: url('font/Tommy Soft.otf');
}

@font-face {
  font-family: JetBrainsMono;
  src: url('font/JetBrainsMono.ttf');
}

.root {
  --HEADER_FONT_SIZE: 5rem;
  --TITLE_FONT_SIZE: 4rem;
  --BODY_FONT_SIZE: 1.1rem;
  --NOTE_FONT_SIZE: 0.8rem;

  --MAIN_BORDER_WIDTH: 0.7rem;
  --MAIN_BORDER_RADIUS: 2.8rem;

  --HEADER_FONT: Buycat;
  --BODY_FONT: TommySoft;

  --HEADER_TEXT_COL: white;
  --HEADER_OUTLINE_COL: rgba(79, 98, 173, 0.3);
  --BODY_TEXT_COL: rgb(55, 59, 86);
  --QUOTE_TEXT_COL: rgb(144, 126, 176);
  --CRYSTAL_BG_COL: rgba(255, 255, 255, 0.2);
  --CRYSTAL_BORDER_COL: rgba(255, 255, 255, 0.5);
  --TEXT_SHADOW_COL: rgba(60, 40, 50, 0.7);
  --LINK_COL: rgb(74, 74, 229);
  --LINK_HOVER_COL: #ff5fb2;

  --BG_IMG: url('../img/fill.png');

  background-image: var(--BG_IMG);
  background-attachment: fixed;
  background-size: cover;
  font-family: var(--HEADER_FONT), sans-serif;
  text-align: center;
  align-content: center;
  margin: 0;
}

code {
  font-family: JetBrainsMono, monospace;
  text-align: left;
}

.code-block {
  display: inline-block;
  color: white;
  margin: 0.5rem;
  padding: 1rem 3rem;
  border: 0.25rem solid var(--CRYSTAL_BORDER_COL);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3), inset 0 0 2rem rgba(120, 50, 255, 0.3);
  border-radius: 1.5rem;
  background: rgba(15, 15, 50, 0.7);
  background-clip: padding-box;
}

a:link:not(.no-style-link), a:visited:not(.no-style-link) {
  color: var(--LINK_COL);
  text-decoration: none;
}

a:hover:not(.no-style-link), a:active:not(.no-style-link) {
  color: var(--LINK_HOVER_COL);
  text-decoration: none;
}

.no-style-link {
  color: inherit;
  text-decoration: none;
}

.anim-layer {
  width: 100vw;
  height: 100vh;
  background-image: url("../img/panim-layer.png");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: repeat;
  position: fixed;
  animation: background-scroll 21s linear infinite, background-wiggle 93s ease-in-out infinite;
  filter: drop-shadow(0px 0px 25px white);
}