:root {
  --selection-color: rgb(255, 255, 255);
  --selection-bg: rgb(0, 0, 0);
  --ff-principal: "Libre Bodoni", serif;
  --ff-titles: "Bodoni Moda SC", serif;
  --ff-texts: "Merriweather Sans", sans-serif;
  --header-h: 70px;
  --color-dark: #0c0f16;
  --color-blue: #1b263b;
  --color-lightblue: #778da9;
  --color-light: #f7faff;
}

.main {
  padding-top: var(--header-h);
}
.main :where(h2, h3, h4, h5, h6) {
  font-family: var(--ff-principal);
  margin: 1rem 0;
}
.main :where(p, li, a, span) {
  font-family: var(--ff-texts);
}

.header {
  top: 0;
  left: 0;
  z-index: 500;
  height: var(--header-h);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1882352941);
  background-color: #fff;
}
.header_nav {
  height: 100%;
  justify-content: space-between;
  align-items: center;
}
.header_menu ul {
  display: flex;
  align-items: center;
}
.header_menu li {
  font-family: var(--ff-texts);
  padding-top: 5px;
}
.header_menu a {
  display: block;
  padding: 0.5rem 1rem;
  position: relative;
}
.header_menu a:hover {
  --header-nav-a-detail-scale: 1;
}
.header_menu a::before, .header_menu a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  transition: all 0.3s ease-in-out;
  scale: var(--header-nav-a-detail-scale, 0);
}
.header_menu a::before {
  top: 0;
  left: 0;
  transform-origin: left;
}
.header_menu a::after {
  bottom: 0;
  right: 0;
  transform-origin: right;
}

.footer {
  background-color: var(--color-dark);
}
.footer_content {
  padding: 5rem 1rem;
}
.footer_info {
  padding: 1rem;
  color: var(--color-light);
  font-family: var(--ff-texts);
  justify-content: space-between;
}

.custom-logo-link {
  display: block;
  height: 100%;
}

.custom-logo {
  width: auto;
  height: 100%;
}

.btn {
  width: var(--btn-w, -moz-max-content);
  width: var(--btn-w, max-content);
  display: block;
  padding: 0.625rem 1.25rem;
  border: solid 2px var(--btn-border-color);
  background-color: var(--btn-bg);
  color: var(--btn-color) !important;
  transition: all 0.3s ease;
}
.btn.primary, .btn.hover-primary:hover {
  --btn-border-color: transparent;
  --btn-bg: var(--color-dark);
  --btn-color: var(--color-light);
}
.btn.secondary, .btn.hover-secondary:hover {
  --btn-border-color: transparent;
  --btn-bg: var(--color-lightblue);
  --btn-color: var(--color-light);
}
.btn.ghost-primary, .btn.hover-ghost-primary:hover {
  --btn-border-color: var(--color-dark);
  --btn-bg: transparent;
  --btn-color: var(--color-dark);
}
.btn.ghost-secondary, .btn.hover-ghost-secondary:hover {
  --btn-border-color: var(--color-lightblue);
  --btn-bg: transparent;
  --btn-color: var(--color-lightblue);
}
.btn.ghost-tertiary, .btn.hover-ghost-tertiary:hover {
  --btn-border-color: var(--color-light);
  --btn-bg: transparent;
  --btn-color: var(--color-light);
}