@import url(../fonts/loader.css);

:root {
  --text: #f2f1e9;
  --background: #080c12;
  --primary: #3895ff;
  --secondary: #005dc7;
  --accent: #4f83bf;
  --text-50: hsl(212, 28%, 5%);
  --text-100: hsl(212, 25%, 10%);
  --text-200: hsl(212, 25%, 20%);
  --text-300: hsl(212, 25%, 30%);
  --text-400: hsl(212, 26%, 40%);
  --text-500: hsl(212, 26%, 50%);
  --text-600: hsl(212, 26%, 60%);
  --text-700: hsl(212, 25%, 70%);
  --text-800: hsl(212, 25%, 80%);
  --text-900: hsl(212, 25%, 90%);
  --text-950: hsl(212, 28%, 95%);
  --background-50: #080c12;
  --background-100: #101823;
  --background-200: #202f46;
  --background-300: #2f476a;
  --background-400: #3f5e8d;
  --background-500: #4f76b0;
  --background-600: #7291c0;
  --background-700: #95add0;
  --background-800: #b9c8df;
  --background-900: #dce4ef;
  --background-950: #edf1f7;
  --primary-50: #000c1a;
  --primary-100: #001833;
  --primary-200: #003066;
  --primary-300: #004799;
  --primary-400: #005fcc;
  --primary-500: #0077ff;
  --primary-600: #3392ff;
  --primary-700: #66adff;
  --primary-800: #99c9ff;
  --primary-900: #cce4ff;
  --primary-950: #e5f1ff;
  --secondary-50: #000c1a;
  --secondary-100: #001833;
  --secondary-200: #003066;
  --secondary-300: #004799;
  --secondary-400: #005fcc;
  --secondary-500: #0077ff;
  --secondary-600: #3392ff;
  --secondary-700: #66adff;
  --secondary-800: #99c9ff;
  --secondary-900: #cce4ff;
  --secondary-950: #e5f1ff;
  --accent-50: #070c13;
}

* {
  margin: 0px;
  user-select: none;
  -webkit-user-drag: none;
}

body {
  background-color: var(--background);
  color: var(--text);
  font-family: Comfortaa;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Sora;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--primary-700);
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

img {
  width: 200px;
}

h1 {
  font-size: 4em;
  margin-bottom: 0.5em;
  line-height: 1em;
}

.links {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}