body {
  font-family: ui-monospace, monospace;
  background-color: #171717;
  color: #b0b5bf;
  min-height: 98vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.flex {
  display: flex;
}

img {
  max-width: 100vw;
}

h1,
h2,
h3,
.text-white {
  color: #f3f4f7;
}

h1 {
  font-size: 3.75rem;
  line-height: 1;
}

.article > h1 {
  font-size: 2.5rem;
  line-height: 1;
}

ul li {
  padding: 0.5rem 0;
}

.hr {
  margin: 2rem 0;
  opacity: 10%;
}

.mt-0 {
  margin-top: 0;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-2 {
  display: block;
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mr-4 {
  margin-right: 1rem;
}

.ml-10 {
  margin-left: 1.5rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-10 {
  padding-bottom: 1.5rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.muted {
  opacity: 0.5;
}

@media (max-width: 600px) {
  .xs-py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .xs-px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

a:hover .card {
  background-color: #171717;
}

.card {
  border: 1px solid #363636;
  border-radius: 6px;
}

.card:hover {
  border: 1px solid white;
  border-radius: 6px;
  transition: all 300ms ease-in-out;
}

a {
  color: #b0b5bf;
  text-decoration-color: #444;
  transition: all 200ms ease-in-out;
}

a:visited {
  color: #b0b5bf;
}

a:has(.card) {
  text-decoration: none !important;
}

.card h3 {
  color: white;
  text-decoration: underline;
  text-decoration-color: #444;
  transition: all 300ms ease-in-out;
}

.card:hover h3 {
  text-decoration: underline;
  background-color: #444;
  color: white;
  text-decoration-color: white;
}

a:has(.card):hover {
  background-color: #171717;
  color: #b0b5bf;
  transition: all 300ms ease-in-out;
}

a:hover {
  background-color: #444;
  color: white;
  text-decoration-color: white;
}

.text-base {
  font-size: 1rem;
  line-height: calc(1.5 / 1);
}

.text-xxs {
  font-size: 0.3rem;
  line-height: calc(1 / 0.75);
}
/**/
/* .text-xs { */
/*   font-size: 0.75rem; */
/*   line-height: calc(1 / 0.75); */
/* } */
/**/
/* .text-sm { */
/*   font-size: 0.875rem; */
/*   line-height: calc(1.25 / 0.875); */
/* } */
/**/

@media (min-width: 768px) {
  .md-50 {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  .md-30 {
    width: 30%;
  }

  .md-70 {
    width: 70%;
  }

  .md-ml-10 {
    margin-left: 1.5rem;
  }
}

select#lang {
  font-size: 1rem;
  font-family: ui-monospace, monospace;
  color: #b0b5bf;
  text-decoration: underline;
  text-decoration-color: #444;
  cursor: pointer;
  border: none;
  background-color: #171717;
  transition: all 300ms ease-in-out;
}

select#lang:hover {
  color: white;
  text-decoration-color: white;
  background-color: #444;
}

/* text body color: #f3f4f7 */
/* titles: 3.75rem, font-weight: 700, line-height: 1 */

header {
  flex-direction: column;
  width: 100%;
  display: flex;
  justify-content: center;
}

header .header-menu {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

@media (min-width: 768px) {
  header {
    flex-direction: row;
    padding: 1.5rem 0 1rem 0;
  }

  header .header-menu {
    position: absolute;
    margin-left: auto;
    flex-direction: row;
  }

  header .header-dropdown {
    display: flex!;
    margin-left: auto;
    padding-right: 1rem;
  }
}

header .header-dropdown {
  display: flex!;
}

.flex-col {
  flex-direction: column;
}

@media (max-width: 600px) {
  footer {
    margin-left: 1rem;
    flex-direction: column;
  }

  .xs-flex-column {
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  footer {
    margin-right: auto;
    margin-left: auto;
  }
}

.w-fit {
  width: fit-content;
}

footer {
  bottom: 0;
  justify-self: center;
  display: flex;
  padding: 1.5rem 0 1rem 0;
  width: fit-content;
}