/* -------- Reset -------- */
html {
  height: 100%;
  width: 100%;
}

* {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;

  font-size: 18px;
}

/* -------- Colors -------- */
:root {
  --soft-red: hsl(7, 99%, 70%);
  --yellow: rgb(250, 212, 0);
  --graphic-design-text: hsl(167, 40%, 24%);
  --photography-text: hsl(198, 62%, 26%);
  --footer: hsl(168, 34%, 41%);

  --very-dark-desaturated-blue: hsl(212, 27%, 19%);
  --very-dark-grayish-blue: hsl(213, 9%, 39%);
  --dark-grayish-blue: hsl(232, 10%, 55%);
  --grayish-blue: hsl(210, 4%, 67%);
  --white: hsl(0, 0%, 100%);
}

/* -------- Styling -------- */

/* Header */

.nav-link {
  font-family: "Barlow", sans-serif;
}

.nav-contact {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 0.6rem;
}

.nav-contact:hover {
  color: var(--white) !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Collapsed Nav */
.navbar-collapse.collapsing,
.navbar-collapse.show {
  background-color: var(--white);
  text-align: center;
  margin: 0 20px 10px 20px;
  padding-bottom: 15px;

  a {
    margin: 0;
    color: var(--dark-grayish-blue) !important;
  }

  .nav-contact {
    color: var(--very-dark-desaturated-blue) !important;
    font-size: 0.7rem;
    margin: 10px 80px !important;
    padding: 0.8rem 0 !important;
    background-color: var(--yellow) !important;
  }
}

.triangle.collapsing,
.triangle.show {
  border: none;
  outline: none;
  background: linear-gradient(
    145deg,
    transparent 0%,
    transparent 93%,
    white 50%,
    white 100%
  ) !important;
  margin: 10px 20px 0 20px;
  padding: 10px 0;
}

/* Top Image */

body {
  font-family: "Fraunces", serif;
  color: var(--very-dark-desaturated-blue);
}

h1 {
  font-family: "Barlow", sans-serif;
}

h2 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: 1.5rem;
}

.main-title {
  font-family: "Fraunces";
  font-weight: 700;
  letter-spacing: 0.3rem;
  color: var(--white);
}

/* Egg, Cup */
.row > * p {
  font-family: "Barlow", sans-serif;
}

.learn-more {
  font-family: "Fraunces";
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.1rem;
}

.empty-underline {
  transform: translateY(-10px);
  width: 180px;
  height: 0.2rem;
  border: 7px solid rgba(250, 212, 0, 0.3);
  border-radius: 20px;
}

.soft-red {
  border: 7px solid rgba(254, 120, 103, 0.3);
}

.learn-more > a {
  color: var(--very-dark-desaturated-blue);
  text-decoration: none;
  z-index: 999;
}

.learn-more:hover > .empty-underline {
  cursor: pointer;
  border: 7px solid rgba(250, 212, 0, 0.8);
}

.learn-more.red:hover > .empty-underline.soft-red {
  border: 7px solid rgba(254, 120, 103, 0.8);
}

/* Cherry, Orange */
.graphic-title {
  color: rgb(37, 86, 75);
}
.graphic-text {
  color: rgb(37, 86, 75, 0.8);
}

.photography-title {
  color: rgb(25, 83, 107);
}

.photography-text {
  color: rgb(25, 83, 107, 0.8);
}

/* Testimonials */
.testimonials-title {
  letter-spacing: 0.3rem;
}

.testimonials > * h6 {
  font-weight: 900;
}

.testimonials > * p {
  font-family: "Barlow", sans-serif;
}

/* Footer */
footer {
  background-color: rgba(69, 140, 126, 0.6);
}

.footer-brand {
  filter: invert(40%) sepia(100%) saturate(5534%) hue-rotate(130deg)
    brightness(70%) contrast(30%);
}

footer > * a {
  color: var(--footer);
  font-family: "Barlow", sans-serif;
  font-weight: 600;
}

.footer-nav > a:hover {
  color: var(--white);
}

.footer-socials > a:hover {
  filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(190deg)
    brightness(200%) contrast(100%);
}

/* Utilities */
.debug {
  outline: 1px solid red;
}

.debug-blue {
  outline: 1px solid blue;
}

/* Mobile and below */
@media screen and (max-device-width: 576px) {
  /* Egg, Cup */

  .row {
    text-align: center;
  }

  .row > * h2 {
    margin: 10px 25px;
    padding-top: 20px;
  }

  .row > * p {
    padding: 13px 25px !important;
  }

  .learn-more {
    padding-bottom: 40px;
    justify-content: center;
  }

  .empty-underline {
    justify-self: center;
  }

  /* Cherry, Orange  */

  .mobile-overlay-position {
    top: 60% !important;
    margin: 0 10px !important;
  }

  .mobile-overlay-position > h2 {
    margin-bottom: 13px !important;
  }

  /* Testimonials */

  .testimonials {
    margin-top: 50px;
  }

  .testimonials-title {
    font-size: 0.9rem;
  }

  .testimonial {
    margin: 20px auto 30px auto;
  }

  .testimonial h6 {
    margin-top: 20px;
    padding: 0;
  }

  .testimonial p {
    margin: 0;
    padding: 0;
  }

  .testimonial .quote {
    margin: 0;
    padding: 15px 25px;
  }

  .testimonial img {
    padding: 35px;
  }

  /* Image Gallery */

  .image-gallery {
    margin-top: 50px;
  }

  .footer-nav > a {
    padding: 10px !important;
  }
}

/* The underline is a bit off only in Firefox mobile, so fixing it */
@media all and (min--moz-device-pixel-ratio: 0) and (max-width: 576px) {
  .empty-underline {
    transform: translateY(-13px);
    position: absolute;
    left: 25vw;
  }
}