@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;
}

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

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

#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);
}

tr > th, tr > td {
  color: var(--color-secondary);
  padding: 0.5rem 0.75rem;
}

tr:not(:last-child) {
  border-bottom-width: 1px;
  border-color: var(--color-400);
}

thead {
  color: var(--color-100);
  background-color: var(--color-200);
}

th[scope="row"] {
  width: 100%;
  max-width: 35%;
}

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);
}

div.grid > div > a > img {
  height: auto;
  max-height: 16rem;
  min-width: 100%;
  border-radius: 0.5rem;
  object-fit: cover;
}