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

:root {
  --color-primary: #DBDBDB;
  --color-secondary: #BEBEBE;
  --color-100: #BCAF9F;
  --color-200: #093773;
  --color-300: #041E40;
  --color-400: #021A39;
  --color-500: #011126;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: "Rubik", sans-serif;
}

h3.text-sm {
  color: var(--color-secondary);
  font-family: "Rubik", sans-serif;
}

#page {
  width: 75%;
  padding: 1rem 0;
  margin: auto;
  max-width: 850px;
}

#content {
  padding: 1rem;
  width: 100%;
  background-color: var(--color-300);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

a:not(.tab) {
  color: var(--color-100);
  text-decoration: underline;
}

a:not(.tab):hover {
  color: var(--color-primary);
}

li > a.tab {
  color: var(--color-100);
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 1rem 1rem 0 0;
}

li > a.tab:hover {
  background-color: var(--color-500);
}

li > a.tab.active {
  color: var(--color-primary);
  background-color: var(--color-300);
}