/* Based on encommon.webkit default.css */



/***********************************/
/* Colors used throughout the site */
/***********************************/

:root {

  --pretty: var(--color-teal-lite);
  --gritty: var(--color-teal-dark);

  --background: var(--color-teal-back);
  --foreground: var(--color-text-lite);

  --scroll: var(--color-teal-dark); }



/***********************************/
/* Colors used throughout the site */
/***********************************/

:root {


  --color-text-lite: 245, 245, 245;      /* f5f5f5 */
  --color-text-dark: 233, 233, 233;      /* e9e9e9 */

  --color-gray-lite: 233, 233, 233;      /* e9e9e9 */
  --color-gray-dark: 136, 136, 136;      /* 888888 */
  --color-gray-back: 24, 24, 24;         /* 181818 */

  --color-red-lite: 255, 102, 102;       /* ff6666 */
  --color-red-dark: 153, 0, 0;           /* 990000 */
  --color-red-back: 26, 10, 10;          /* 1a0a0a */

  --color-pink-lite: 255, 0, 204;        /* ff00cc */
  --color-pink-dark: 143, 0, 114;        /* 8f0072 */
  --color-pink-back: 32, 0, 25;          /* 200019 */

  --color-teal-lite: 102, 255, 255;      /* 66ffff */
  --color-teal-dark: 0, 153, 153;        /* 009999 */
  --color-teal-back: 10, 26, 26;         /* 0a1a1a */

  --color-blue-lite: 8, 155, 216;        /* 089bd8 */
  --color-blue-dark: 6, 92, 129;         /* 065c81 */
  --color-blue-back: 2, 24, 34;          /* 021822 */

  --color-green-lite: 102, 255, 102;     /* 66ff66 */
  --color-green-dark: 0, 153, 0;         /* 009900 */
  --color-green-back: 10, 26, 10;        /* 0a1a0a */

  --color-yellow-lite: 255, 255, 102;    /* ffff66 */
  --color-yellow-dark: 153, 153, 0;      /* 999900 */
  --color-yellow-back: 26, 26, 10; }     /* 1a1a0a */



/************************************/
/* Initial default for all elements */
/************************************/

* {
  border-collapse: collapse;
  border-spacing: 0;
  border-width: 0;
  box-sizing: border-box;
  color: rgba(var(--foreground), 1);
  font-family: 'Roboto';
  font-size: 1vw;
  font-style: normal;
  font-weight: normal;
  letter-spacing: .05rem;
  line-height: 1vw;
  list-style-type: none;
  margin: 0;
  outline: none !important;
  padding: 0;
  page-break-after: avoid;
  page-break-before: avoid;
  page-break-inside: avoid;
  scroll-behavior: smooth;
  text-align: left;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap; }


@media (max-width: 800.00px) {

  * {
    font-size: 2vw;
    letter-spacing: .1rem;
    line-height: 2vw; } }



/**********************************/
/* Elements which are very common */
/**********************************/

body {
  background-color: rgba(var(--background), 1);
  padding: 2rem 2rem 2rem 2rem; }



/**********************************/
/* Elements which are very common */
/**********************************/

a, b, i, li, p, span {
  white-space: normal; }

a, b, i, span {
  color: inherit;
  line-height: inherit;
  font-size: inherit;
  white-space: inherit; }



/**********************************/
/* Elements which are very common */
/**********************************/

a {
  color: rgba(var(--pretty), 0.75);
  cursor: pointer;
  transition: color 300ms ease-in-out; }

a:hover {
  color: rgba(var(--pretty), 1); }



/**********************************/
/* Elements which are very common */
/**********************************/

b { font-weight: bold; }
i { font-style: italic; }



/**********************************/
/* Elements which are very common */
/**********************************/

p { margin: .5rem 0 .5rem 0; }

p:first-child {
  margin-top: 0; }



/**********************************/
/* Elements which are very common */
/**********************************/

h1, h2, h3 {
  color: rgba(var(--pretty), .75);
  font-weight: bold;
  margin: .5rem 0 .5rem 0; }

h1:first-child,
 h2:first-child,
 h3:first-child {
  margin-top: 0; }

h1 {
  font-size: 3rem;
  line-height: 3rem; }

h2 {
  font-size: 2rem;
  line-height: 2rem; }

h3 {
  font-size: 1rem;
  line-height: 1rem; }


@media (max-width: 800.00px) {

  h1 {
    font-size: 4rem;
    line-height: 4rem; }

  h2 {
    font-size: 3rem;
    line-height: 3rem; }

  h3 {
    font-size: 2rem;
    line-height: 2rem; } }



/************************************/
/* Styles for scroll bar and handle */
/************************************/

::-webkit-scrollbar {
  background-color: transparent;
  height: 1rem;
  width: .9rem; }

::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: rgba(var(--scroll), .8);
  border-color: transparent;
  border-radius: .5rem;
  border-style: solid;
  border-width: .2rem; }

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--scroll), 1); }

::-webkit-scrollbar-corner {
  background-color: transparent; }