/*=============*
 * Main styles *
 *=============*/

@import url("https://fonts.googleapis.com/css2?family=Overpass+Mono&display=swap");

:root {
  --black: #202020;
  --white: #efefef;
  --red: #ef6666;
  --green: #6abe6a;
  --blue: #6691ef;
  --grey: #767676;
  --cyan: #66cfef;
  --lgrey: #bbbbbb;
  --dblack: #1a1a1a;

  /* Set default styles */
  background-color: var(--black);
  font-family: "Overpass Mono", monospace;
  color: var(--white);
}

img,
.button,
.corner {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

* {
  padding: 0;
  margin: 0;
}

a,
a:visited,
a:link,
a:active {
  color: var(--cyan);
  cursor: pointer;
  text-decoration: none;
  transition: color linear 60ms;
}

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

*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background-color: var(--dblack);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--grey);
  box-shadow: inset 0 0 0 2px var(--dblack);
}

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 2ch;
  text-indent: -2ch;
}

c.red {
  color: var(--red);
}

c.blue {
  color: var(--blue);
}

::selection {
  background-color: rgba(128, 128, 128, 0.3);
}

a::selection {
  color: var(--cyan);
}

/* Older browsers do not support CSS variables */
#support {
  position: fixed;
  height: 100vh;
  width: 100vw;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  background-color: #202020;
  color: #efefef;
}