@import url("https://use.typekit.net/dga8jak.css");

:root {
  --charcoal: #494c59;
  --picton-blue: #4aa5de;
  --vermilion: #dc453b;
  --cambridge-blue: #81beb0;
}

html,
body {
  font-family: "essonnes-text", system-ui, serif !important;
  color: #494c59;
}

.bg-charcoal {
  background-color: var(--charcoal);
}

.bg-picton-blue {
  background-color: var(--picton-blue);
}

.bg-cambridge-blue {
  background-color: var(--cambridge-blue);
}

/* === Button Style === */

.btn.btn-primary {
  background-color: var(--picton-blue);
  border-radius: 0;
  padding: 16px 32px;
  border-color: var(--picton-blue);
}

.btn.btn-primary:active,
.btn.btn-primary:hover {
  background-color: #4090c1;
  border-color: #4090c1;
}

.btn.btn-success {
  background-color: var(--cambridge-blue);
  border-color: var(--cambridge-blue);
  color: var(--charcoal);
}

.btn.btn-success:active,
.btn.btn-success:hover {
  background-color: #75ada0;
  border-color: #75ada0;
  color: var(--charcoal);
}

.btn.btn-dark {
  background-color: var(--charcoal);
  border-color: var(--charcoal);
}

.btn.btn-dark:active,
.btn.btn-dark:hover {
  background-color: #444753;
}

/* === End of Button Style === */

/* === Title Style === */

.main-title {
  font-family: "jeanne-moderno", serif;
  font-size: 36px;
  font-weight: 600;
}

/* === End of Title Style === */

/* === Utilities === */

.-translate-y-2 {
  transform: translateY(-0.5rem);
}

.translate-y-2 {
  transform: translateY(0.5rem);
}

.translate-y-0 {
  transform: translateY(0px);
}

.rotate-45 {
  transform: rotate(45deg);
}

.-rotate-45 {
  transform: rotate(-45deg);
}

.space-x-2 {
  margin-left: 0.5rem;
}

.translate-x-3 {
  transform: translateX(0.75rem);
}

.transition {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* === End of Utilities === */
.navbar-link {
  color: #fff;
  text-decoration: none;
  padding: 0 16px;
}

.navbar-link:hover {
  color: var(--picton-blue);
}

.btn.btn-menu:active {
  border-color: transparent;
}

.hamburger-menu {
  width: 24px;
}

.hamburger-menu-top,
.hamburger-menu-center,
.hamburger-menu-bottom {
  height: 1px;
  transition: all 0.2s ease-in-out;
}

.footer-social-link {
  color: #fff;
}

.footer-social-link:hover {
  color: var(--picton-blue);
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: var(--picton-blue) !important;
  color: #fff;
  font-size: 1em;
}

@media (min-width: 1024px) {
  .main-title {
    font-size: 48px;
  }
}