@import "./animations.css";
@import "./font.css";

:root {
  --yellow: #d3b910;
  --cyan: #0dd2e8;
  --green: #06e00a;
  --pinkish: #d506e0;
  --red: #e8180d;
  --blue: #2036f9;

  --white-1: #ffffff;
  --white-2: #bfbfbf;
  --white-3: #5f5f5f;
  --white-4: #0f0f0f;

  --black-1: #000000;
  --black-2: #050505;
  --black-3: #111111;
  --black-4: #3a3b3c;

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

  --text-shadow: 3px 2px 8px rgba(50, 50, 50, 0.8);
  --box-shadow: rgba(20, 20, 20, 0.19) 0px 10px 20px, rgba(30, 30, 30, 0.23) 0px 6px 6px;
  --background: linear-gradient(rgba(11, 11, 11, 0.808), rgba(1, 1, 1, 0.96)), url("/banner.png");
  --profile-size: 220px;
}

* {
  padding: 0;
  margin: 0;
}

html {
  box-sizing: border-box;
}

body {
  background: var(--black-1);
  font-family: "Ubuntu", sans-serif;
  overflow-x: hidden;
  height: 100vh;
  width: 100vw;
}

::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 {
  font-weight: 900;
  color: var(--white-1);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
  text-shadow: var(--text-shadow);
}

i .nf {
  font-weight: 900;
}

ul {
  list-style: inside;
  margin: 12px 0 12px 0;
}

li + li {
  margin-top: 10px;
}

input {
  background: var(--black-3);
  border: none;
  outline: none;
  font-size: var(--size-4);
  padding: 10px;
  border: solid 1px var(--black-4);
  color: var(--white-1);
}