/* global CSS file, imported in every page, defines commonly used color, effects
 * etc. also defines styles for commonly used elements */

:root {
  /* randomly selected colors */
  --yellow: #d3b910;
  --cyan: #0dd2e8;
  --green: #06e00a;
  --pinkish: #d506e0;
  --red: #e8180d;
  --blue: #3768fc;

  /* white tones */
  --white-1: #ffffff;
  --white-2: #bfbfbf;
  --white-3: #5f5f5f;

  /* black tones */
  --black-1: #000000;
  --black-2: #111;
  --black-3: #3a3b3c;

  /* different sizes */
  --size-1: 8px;
  --size-2: 16px;
  --size-3: 18px;
  --size-4: 20px;
  --size-5: 24px;
  --size-6: 30px;

  /* shadows */
  --box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  --text-shadow: 0 1px 5px rgba(255, 255, 255, 0.15);

  /* backgrounds */
  --transparent: linear-gradient(rgba(11, 11, 11, 0.808), rgba(1, 1, 1, 0.96));
  --glass: rgba(1, 1, 1, 0.93);

  /* fonts */
  --monospace:
    ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono,
    monospace;
  --sans-serif:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* cursor blink animation */
@keyframes blink {
  0% {
    opacity: 0;
  }
}

/* typing animation */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

* {
  padding: 0;
  margin: 0;
}

html {
  box-sizing: border-box;
}

body {
  font-family: var(--sans-serif);
  background-image: url("/assets/banner.png");
  overflow-x: hidden;
  height: 100vh;
  width: 100vw;

  line-height: 1.5;
  font-size: var(--size-3);
}

::selection {
  background: rgba(100, 100, 100, 0.5);
}

::-webkit-scrollbar {
  border-radius: 5px;
  width: 1px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background: var(--black-1);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--black-2);
}

a {
  color: var(--white-2);
  font-weight: 600;
  cursor: pointer;

  text-decoration: underline;
  text-decoration-color: var(--white-2);
}

a:hover {
  color: var(--white-1);
  text-shadow: var(--text-shadow);
}

ul {
  list-style: inside;
}

br {
  display: block;
  margin: 5px 0;
}