@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  --color-100: #D9C8A9;
  --color-200: #A68A68;
  --color-300: #735D49;
  --color-400: #40312C;
  --color-500: #011526;
}

body {
  background-color: var(--color-400);
}

h1, h2, h3, h4, h5, h6, span {
  color: var(--color-100);
  font-family: "Rubik", sans-serif;
}

p, a {
  color: var(--color-100);
}

#content {
  width: 80%;
  padding: 2rem 0;
  margin: 0 auto 1rem auto;
}

::placeholder {
  color: var(--color-100);
}

::-ms-input-placeholder {
  color: var(--color-100);
}

.text-100 { color: var(--color-100); }
.text-200 { color: var(--color-200); }
.text-300 { color: var(--color-300); }
.text-400 { color: var(--color-400); }
.text-500 { color: var(--color-500); }

.bg-100 { background-color: var(--color-100); }
.bg-200 { background-color: var(--color-200); }
.bg-300 { background-color: var(--color-300); }
.bg-400 { background-color: var(--color-400); }
.bg-500 { background-color: var(--color-500); }

.border-100 { border-color: var(--color-100); }
.border-200 { border-color: var(--color-200); }
.border-300 { border-color: var(--color-300); }
.border-400 { border-color: var(--color-400); }
.border-500 { border-color: var(--color-500); }

.nav-items > li:hover {
  cursor: pointer;
  background-color: var(--color-400);
}