:root {
  --base-color-white: #fdf7ff;
  --primary-color-purple: #6405bf;
  --base-color-black: #201925;
  --base-color-grey: #9f88b1;
  --gradient-color: linear-gradient(
    180deg,
    #6405bf 0%,
    #9a05bf 50%,
    #d6086b 100%
  );
  --primary-purple-50: #f0e6f9;
  --primary-purple-200: #b88ce2;
  --primary-purple-700: #470488;
  --primary-purple-900: #2a0250;
}

h1 {
  font-family: "Montserrat", sans-serif;
  color: var(--base-color-black);
  font-weight: 600;
  font-size: 47px;
  line-height: 65px;
  letter-spacing: 0.02em;
}

em {
  color: var(--primary-color-purple);
}

h2 {
  font-family: "Montserrat", sans-serif;
  color: var(--primary-color-purple) !important;
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: 0.05em;
}

h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: 0.05em;
  color: var(--base-color-white);
}

p {
  font-family: "Hind", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.05em;
  color: var(--base-color-black);
}

footer {
  background: var(--primary-purple-50);
}

.hero {
  background: var(--base-color-white);
}

.about-me {
  background: var(--primary-purple-900);
}

.about-me .menu {
  color: var(--base-color-white);
}

.projects-page {
  background: var(--base-color-white);
}

.projects-page .card {
  background: var(--primary-purple-200);
}

.projects-page .card-img-top {
  border: 2rem solid var(--primary-purple-200);
}

.menu {
  font-family: "Hind", sans-serif;
  font-weight: 300;
  font-size: 24px;
  line-height: 20px;
  letter-spacing: 0.05em;
  padding-top: 30px;
  color: var(--base-color-grey);
}

.menu:focus,
.menu:hover {
  color: var(--base-color-black);
  transition: all 200ms ease-in-out;
}

.about-me .navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
  color: var(--base-color-white);
}

.about-me .nav-link:hover {
  color: var(--base-color-grey);
}

/* .logo {
  max-width: 80px;
  max-height: 80px;
  } */

.navbar-toggler,
.navbar-toggler-icon {
  color: var(--base-color-grey);
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(253, 247, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: var(--base-color-white);
}

.button-style {
  font-family: "Montserrat", sans-serif;
  text-decoration: none;
  font-weight: 400;
  font-size: 24px;
  line-height: 20px;
  border: none;
  color: var(--base-color-white);
  /* background: var(--gradient-color); */
  margin: 0 auto;
  padding: 18px 33px;
  border-radius: 10px;
  letter-spacing: 0.185em;
}

.cta-button {
  background: var(--gradient-color);
}

.secondary-button {
  background: var(--primary-color-purple);
}

/* .secondary-button:visited {
  background-color: var(--primary-purple-900);
} */

.cta-button:hover {
  outline: 0.3em ridge var(--primary-color-purple);
  transition: all 300ms ease-in;
}

.secondary-button:hover {
  background: var(--primary-purple-700);
  outline: none;
}

.main-page-projects {
  background: var(--primary-color-purple);
}

.card {
  background: var(--base-color-white);
  border: 20px solid var(--base-color-black);
  border-radius: 30px;
  box-shadow: -16px -16px 4px rgba(0, 0, 0, 0.25);
}

.card-img-top {
  border: 2rem solid var(--base-color-white);
}

.card-text {
  font-family: "Hind", sans-serif;
  color: var(--base-color-black);
  font-weight: 400;
  font-size: 20px;
  line-height: 31px;
  letter-spacing: 0.05em;
}

.about-text {
  font-family: "Hind", sans-serif;
  color: var(--base-color-white);
  font-weight: 400;
  font-size: 24px;
  line-height: 33px;
  letter-spacing: 0.05em;
}

.first-pic {
  max-width: 100%;
  height: auto;
}
.second-pic {
  max-width: 50%;
  height: auto;
}
.third-pic {
  max-width: 80%;
  height: auto;
  padding-top: 90px;
}
.fourth-pic {
  max-width: 60%;
  height: auto;
  padding-top: 50px;
}

.contact-card {
  max-width: 90%;
  background: var(--primary-color-purple);
  border: 20px solid var(--base-color-grey);
  border-radius: 95px;
  box-shadow: -16px -16px 4px rgba(0, 0, 0, 0.25);
}

.contact-card .contact-text {
  color: var(--base-color-white);
}

.socials-contact {
  font-size: 69px;
}

.socials {
  font-size: 69px;
  color: var(--base-color-black);
}

.socials:hover {
  color: var(--primary-color-purple);
  transition: all 200ms ease-in-out;
}

.lilfoot {
  color: var(--base-color-grey);
}

@media (max-width: 991.98px) {
  h1 {
    font-size: 26px;
    line-height: 40px;
    padding-left: 2em;
    padding-right: 2em;
  }

  .col-sm-8 {
    flex-grow: 3;
  }

  .col-sm-4 {
    display: none;
  }

  .button-style {
    font-size: 20px;
    padding: 14px 24px;
  }
}