:root {
  --main-dark-navy: #1a2230; /* Terno */
  --off-white: #f7f6ec; /* Camisa */
  --purple: #9C6CCF; /* Gravata */
  --dark-purple-flower: #724c85; /* Flor Roxa Escura */
  --light-lilac-flower: #c3a6b4; /* Flor Lilas Clara */
  --white-flower: #f4EEf8; /* Flor Branca */
  --green-foliage: #3c7a41; /* Folhagem Verde */
  --mustard-sun: #c9a84b;
  --marsala-denied: #a04050;
}

/*f4f1d6*/

html {
  scroll-behavior: smooth;
  background-color: var(--off-white);
}

a.navbar-item:hover {
  color: initial !important;
  background-color: initial !important;
}

a.box:active {
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, .2), 0 0 0 1px var(--main-dark-navy);
}

a.box:focus, a.box:hover {
  box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px var(--main-dark-navy);
}

body {
  background-color: var(--off-white);
  font-family: 'Vollkorn', serif;

  /*  <weight>: Use a value from 400 to 700 */
  .dancing-script-font-family {
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }

  /* <weight>: Use a value from 400 to 900 */
  .vollkorn-font-family {
    font-family: "Vollkorn", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }

  .dark-navy-color {
    color: var(--main-dark-navy) !important;
  }

  .off-white-color {
    color: var(--off-white) !important;
  }

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

  .dark-navy-background {
    background-color: var(--main-dark-navy);
  }

  .white-flower-background {
    background-color: var(--light-lilac-flower);
  }

  .small-icon {
    color: var(--main-dark-navy);
    width: 14%;
    height: 14%;

    path {
      stroke: currentColor;
      stroke-width: 8px;
      stroke-linejoin: round;
    }
  }

  @media (min-width: 1015px) {
    .multiple-bodies {
      display: flex;
      flex: 1; 
      flex-direction: row;
      align-content: center;
      justify-content: center;
    }
  }

  @media (max-width: 768px) {
    .mobile-min-height {
      min-height: 500px;
    }

    .small-icon {
      color: var(--main-dark-navy);
      width: 20%;
      height: 20%;

      path {
        stroke: currentColor;
        stroke-width: 8px;
        stroke-linejoin: round;
      }
    }
  }
}