:root {
  --primary-text-color: #000;
  --secondary-text-color: rgba(39, 33, 66, 0.7);
  --accent-color: #6c63ff;
  --bg-color: #f9f7fe;
  --body-font: "Poppins", sans-serif;
  --title-font: "Playfair Display", serif;
  --transition-duration-and-function: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.body-font {
  font-family: var(--body-font);
}
body {
  font-family: var(--body-font);
  color: var(--secondary-text-color);
}
.home-header,
.work-inquiry {
  background-color: var(--bg-color);
}
h1,
h2,
h3,
h4,
.h4,
.navbar-brand {
  font-family: var(--title-font);
  color: var(--primary-text-color);
}

.home-header .h4,
.about-header .h5 {
  color: #272142 !important;
  font-family: var(--body-font);
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--accent-color);
}
.navbar-toggler {
  border: none;
}
.navbar-toggler-icon {
  background-image: none;
  width: auto;
  height: auto;
}

.navbar-toggler:hover,
.navbar-toggler:active,
.navbar-toggler:focus {
  box-shadow: none;
  color: var(--accent-color);
  fill: var(--accent-color);
}

.btn-fill {
  background-color: var(--accent-color) !important;
  transform: scale(1);
  transition: transform 250ms ease-in-out;
}

.btn-border {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
  transform: scale(1);
  transition: transform 250ms ease-in-out;
}

.btn-fill:hover,
.btn-border:hover {
  transform: scale(0.9);
}

.email-link {
  color: var(--primary-text-color) !important;
  transition: color var(--transition-duration-and-function);
}
.email-link:hover {
  color: var(--accent-color) !important;
}

.social-links a {
  color: var(--accent-color);
  fill: inherit;
  background-color: var(--bg-color);
  width: 40px;
  height: 40px;
  transition: color var(--transition-duration-and-function),
    background-color var(--transition-duration-and-function);
}
.social-links a:hover {
  color: var(--bg-color);
  background-color: var(--accent-color);
}

@media screen and (min-width: 768px) {
  .home-header .display-1 {
    font-size: 96px !important;
  }
  .home-header.pe-lg-5 {
    padding-bottom: 180px !important;
  }
  .home-main h3 {
    font-size: 64px !important;
  }
  .work-inquiry h3 {
    font-size: 48px !important;
  }
}

@media (max-width: 575px) {
  footer a.h3 {
    font-size: 18px !important;
  }
}

@media screen and (max-width: 1200px) {
}