/* Universal Desktop Borders*/
.content-projects {
  margin: 0 20% 0 20%;
}

.content-about {
  display: flex;
}

/* ------ Homepage styles ------ */

.homepage .homepage-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem 1rem 2rem 1rem;
}

.homepage-heading h1 {
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 3rem;
  padding-right: 1rem;
  color: #809eff;
  margin-top: 3rem;
}

.homepage-heading h2 {
  font-family: "DM Sans", sans-serif;
  font-weight: 100;
  font-size: 1.6rem;
  color: #809eff;
}

.homepage * {
  margin: 0;
  padding: 0;
}

.homepage .row-one {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 5% 0 5%;
}

.homepage .row-one img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

figure {
  position: relative;
}

.img-one,
.img-two,
.img-three {
  margin: 0 1rem 0 1rem;
}

figure figcaption {
  opacity: 0;
  transition: 300ms all;
  position: absolute;
  inset: 0;
  width: 100%;
  background: rgba(161, 177, 230, 0.7);
  font-family: "DM Sans", sans-serif;
  font-weight: 200;
  color: white;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
}

.row-one h1,
.row-one p {
  padding: 0 1.5rem 0 1.5rem;
}

figure figcaption:hover,
figure figcaption:active {
  opacity: 1;
}

/* ------ About page styles ------ */
.about .container {
  margin: 0 15% 0 15%;
}

.about .container h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", sans-serif;
  font-size: 3rem;
  color: #809eff;
  margin-top: 2rem;
}

.about .container .paragraph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about .container img {
  width: 17rem;
  border-radius: 10px;
  margin: 1rem 0 1rem 0;
}

.about p {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  color: #809eff;
  margin-bottom: 6rem;
}

.about a {
  color: #6679b8;
}
.about a:visited {
  color: #6679b8;
}

/* ------- Hero Content Project Pages -------
order: Centible --> Inquery --> Bubbly*/

/* --- Colored Background ---*/
.title-bg-centible {
  background-color: #6ea8cf;
  width: 100%;
}

.title-bg-inquery {
  background-color: #a98fcc;
  height: 50%;
  width: 100%;
}

.title-bg-bubbly {
  background-color: #d38cd3;
  width: 100%;
  height: 50%;
}

/* --- Mockup --- */

/*Centible*/
.items-container-centible img {
  width: 13rem;
  margin: 2rem;
}

.items-container-centible {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*Inquery*/
.items-container-inquery img {
  width: 22rem;
  margin: 2rem;
}

.items-container-inquery {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2.5rem;
}

/*Bubbly*/
.items-container-bubbly img {
  width: 19rem;
  margin: 2rem;
}

.items-container-bubbly {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Text + Button --- */
.title-bg-centible .title-button,
.title-bg-inquery .title-button,
.title-bg-bubbly .title-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 5% 0 5%;
}

.whole-title h1 {
  font-family: "DM Sans", sans-serif;
  font-size: 3rem;
  color: white;
  font-weight: 500;
}

.whole-title h2 {
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  color: white;
  font-weight: 200;
}

.whole-title .title-button button {
  border: none;
  background: white;
  padding: 22px 28px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  height: 10px;
  border-radius: 7px;
  margin-left: 1.5rem;
  font-family: "DM Sans", sans-serif;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.title-bg-centible .title-button button {
  color: #6ea8cf;
}

.title-bg-inquery .title-button button {
  color: #a98fcc;
}

.title-bg-bubbly .title-button button {
  color: #d38cd3;
}

.whole-title .title-button button:hover {
  background: #f2f2f2;
  transition: 0.3 ease;
}

.whole-title .title-button a {
  text-decoration: none;
}
.whole-title .title-button a:visited {
  text-decoration: none;
}

/* --- Description ---*/
.description {
  width: 100%;
  margin-top: 3px;
  display: flex;
  justify-content: space-around;
  padding: 1rem;
}

.description p {
  font-size: 0.9rem;
  color: white;
  font-family: "DM Sans", sans-serif;
  font-weight: 200;
}

.centible .description {
  background: #6ea8cf;
}

.inquery .description {
  background: #a98fcc;
}
.bubbly .description {
  background: #d38cd3;
}

/* Universal fonts & colors */
.meaning,
.intro,
.project-video,
.research,
.listening,
.analysis,
.personas,
.ia,
.sketches,
.wireframes,
.iterations,
.high,
.responsive,
.style,
.questions,
.insights,
.redesigned,
.success,
.client,
.testing,
.forward {
  margin-top: 1.8rem;
}

h4 {
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.centible h4,
.centible .content-projects p,
.centible .forward ul li {
  color: #6ea8cf;
}

.inquery h4,
.inquery .content-projects p {
  color: #a98fcc;
}

.bubbly h4,
.bubbly .content-projects p,
.bubbly .forward ul li {
  color: #d38cd3;
}

.content-projects p,
.forward ul li {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
}

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Buttons */
.content-projects .title-button {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.content-projects .title-button button {
  background-size: 175%;
  background-position: 0%;
  transition: background-position 0.3s ease;
  overflow: hidden;

  border: none;
  color: white;
  padding: 20px 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 7px;
  font-family: "DM Sans", sans-serif;
  font-weight: 900;
  max-height: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centible .content-projects .title-button button {
  background-image: linear-gradient(-45deg, #1e567e 20% 50%, #6ea8cf 50% 100%);
}

.inquery .content-projects .title-button button {
  background-image: linear-gradient(-45deg, #633a9a 20% 50%, #a98fcc 50% 100%);
}

.bubbly .content-projects .title-button button {
  background-image: linear-gradient(-45deg, #b927b9 20% 50%, #d38cd3 50% 100%);
}

.content-projects .title-button button:hover {
  background-position: 100%;
}

.content-projects .title-button a {
  text-decoration: none;
}

.content-projects .title-button a:visited {
  text-decoration: none;
}

.content-projects .title-button a:hover {
  text-decoration: none;
}
/* --- Challenge & Solution ---*/

.intro {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.challenge {
  background: white;
  box-shadow: 0px 4px 7px #00000029;
  padding: 3rem;
  border-radius: 7px;
  width: 22rem;
  margin-right: 3rem;
}

.solution {
  background: white;
  box-shadow: 0px 4px 7px #00000029;
  padding: 3rem;
  border-radius: 7px;
  width: 22rem;
}

/* --- Research imgs, text, & arrows --- */

.pp-one {
  display: flex;
  flex-direction: row;
  margin-bottom: 3rem;
}

.pp-one img {
  width: 35%;
}

.pp-two {
  display: flex;
  flex-direction: row;
  margin-bottom: 3rem;
}

.pp-two img {
  width: 35%;
}

.pp-two p,
.pp-four p {
  margin-right: 1rem;
}

.pp-three {
  display: flex;
  flex-direction: row;
  margin-bottom: 3rem;
}

.pp-three img {
  width: 35%;
}

.pp-four {
  display: flex;
  flex-direction: row;
  margin-bottom: 3rem;
}

.pp-four img {
  width: 35%;
}

.words-arrow {
  margin-left: 2.5rem;
}

.words-arrow img {
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5% 40% 5% 40%;
}

/*Inquery h3*/
.inquery h3 {
  font-family: "DM Sans", sans-serif;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #a98fcc;
}

.inquery .right-justified {
  text-align: right;
}

/* --- personas --- */
/*Centible & Bubbly*/
.personas-img {
  display: flex;
  flex-direction: row;
}

.personas-img img {
  width: 48%;
  box-shadow: 0px 4px 7px #00000029;
}

.first-persona-img {
  margin-right: 2.5rem;
}

/*Inquery is different*/
.personas-row-one {
  margin-bottom: 2rem;
}

.personas-row-one,
.personas-row-two {
  display: flex;
  flex-direction: row;
}

.personas-row-one img,
.personas-row-two img {
  width: 48%;
  box-shadow: 0px 4px 7px #00000029;
}

.first-persona-img {
  margin-right: 2.5rem;
}

/*Information Architecture*/
.centible .ia img {
  width: 50%;
  display: flex;
  justify-content: center;
  margin: 0 25% 0 25%;
}

.inquery .ia img {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.bubbly .ia img {
  width: 70%;
  display: flex;
  justify-content: center;
}

.bubbly .ia-imgs {
  display: flex;
  flex-direction: row;
  margin: 0 10% 0 10%;
  justify-content: center;
  margin-top: 1rem;
}

.bubbly .ia-small {
  height: 70%;
}

/* --- Iterations for Centible --- */

.iterations img {
  width: 30%;
}

.iteration-one,
.iteration-three {
  display: flex;
  flex-direction: row;
}

.iteration-one p,
.iteration-three p {
  margin-left: 1rem;
  padding-right: 5rem;
}

.iteration-two {
  display: flex;
  flex-direction: row;
  margin: 2rem 0 2rem 0;
}

.iteration-two p {
  margin-right: 1rem;
  text-align: right;
  padding-left: 5rem;
}

/* --- high --- */
.high .title-button {
  display: flex;
}

.high-one {
  display: flex;
  flex-direction: column;
}

.bubbly .high p {
  margin-bottom: 0.5rem;
}

/* --- style for inquery --- */
.style-guide img {
  width: 80%;
  margin: 1rem 10% 1rem 10%;
}

/* --- redesigned for inquery */
.redesigned-one img,
.redesigned-two img {
  width: 80%;
  margin: 0 10% 0 10%;
}

.redesigned-one {
  margin-bottom: 1.5rem;
  font-weight: bold;
}

.redesigned-two {
  font-weight: bold;
}

/* --- client for bubbly --- */

.bold-ital {
  font-weight: 600;
  font-style: italic;
  padding-left: 0.5rem;
}

.quote-one img {
  width: 2rem;
}

.quote-one {
  display: flex;
  flex-direction: row;
  margin: 1rem 0 1rem 0;
}

.quote-two img {
  width: 2rem;
}

.quote-two {
  display: flex;
  flex-direction: row;
  margin: 1rem 0 1rem 0;
}

/* --- redesigned for bubbly & inquery --- */

.bubbly .redesigned img {
  width: 80%;
  margin: 0 10% 0 10%;
}

.redesigned-one {
  margin: 1rem 0 1rem 0;
  font-weight: bold;
}

.redesigned-two {
  font-weight: bold;
}

/* --- success for bubbly + inquery --- */
.insights-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 1rem;
}

.insights-container img {
  width: 6rem;
  padding: 0.5rem 0;
  display: flex;
}

/*bubbly*/
.bubbly .insights-one,
.bubbly .insights-two,
.bubbly .insights-three,
.bubbly .insights-four {
  display: flex;
  flex-direction: column;
  width: 8rem;
  align-items: center;
}

/*inquery*/
.inquery .insights-one,
.inquery .insights-two,
.inquery .insights-three {
  display: flex;
  flex-direction: column;
  width: 12rem;
  align-items: center;
}

/* --- forward bubbly + centible --- */
.forward ul li {
  margin-bottom: 0.5rem;
}

/* Footer */
.footer {
  background-color: #809eff;
  width: 100%;
  height: 4.5rem;
  margin: 1.8rem 0 0 0;
}

.homepage .footer,
.about .footer {
  position: fixed;
  bottom: 0;
}

.footer p {
  color: white;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem 0 1.5rem 0;
}

/* Navbar becomes hamburger*/
@media screen and (max-width: 930px) {
  /* --- Navbar --- */
  body {
    overflow-x: hidden;
    position: relative;
  }

  .nav-links {
    position: absolute;
    left: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #809eff;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(-100%);
    transition: transform 0.5s ease-in;
  }

  .nav-links li {
    opacity: 0;
  }

  .burger {
    display: block;
  }

  .nav-active {
    transform: translateX(0%);
  }

  .content-projects {
    margin: 0 5% 0 5%;
  }

  /* Homepage */
  .homepage .row-one {
    flex-direction: column;
    margin: 1rem 20% 6rem 20%;
  }

  .homepage .mockup img {
    margin: 0.5rem 0 0.5rem 0;
  }

  .homepage-heading h1 {
    font-size: 2.5rem;
  }

  .homepage-heading h2 {
    font-size: 1rem;
  }

  .homepage .homepage-heading {
    margin: 0rem;
    text-align: center;
  }

  /* --- about --- */
  .about .container h1 {
    font-size: 2rem;
  }

  .about .container {
    margin: 0 5% 0 5%;
  }

  /* --- Hero content --- */
  .items-container-centible,
  .items-container-inquery,
  .items-container-bubbly {
    display: flex;
    flex-direction: column-reverse;
  }

  .centible .whole-title,
  .inquery .whole-title,
  .bubbly .whole-title {
    margin-top: 2.8rem;
  }

  .inquery .whole-title {
    margin: 1rem 2rem 0 2rem;
  }

  /* --- description --- */
  .description {
    display: flex;
    flex-direction: column;
  }

  .description p {
    padding: 0.2rem;
    font-size: 0.9rem;
  }

  /* --- challenge + solution --- */
  .intro {
    flex-direction: column;
    align-items: center;
  }

  .challenge {
    margin: 1rem 0 1rem 0;
  }

  /* --- research --- */

  .listening h3 {
    display: flex;
    justify-content: center;
  }

  .pp-one,
  .pp-three {
    flex-direction: column;
    align-items: center;
  }

  .pp-two,
  .pp-four {
    flex-direction: column-reverse;
    align-items: center;
  }

  .listening .person-img {
    margin: 0 33% 0 33%;
  }

  /* --- buttons --- */

  .content-projects .title-button {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* --- personas --- */

  /* bubbly + centible */
  .personas-img {
    display: flex;
    flex-direction: column;
    margin: 0 15% 0 15%;
  }

  .personas img {
    width: 100%;
  }

  .first-persona-img {
    margin-bottom: 1rem;
  }

  /*inquery*/
  .inquery .personas-row-one,
  .personas-row-two {
    display: flex;
    flex-direction: column;
    margin: 0 15% 0 15%;
  }

  .inquery .first-persona-img {
    margin: 1rem 0 1rem 0;
  }

  /* --- ia --- */
  .bubbly .ia-imgs {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    margin: 0 15% 0 15%;
  }

  .bubbly .ia-small {
    margin: 1rem 0 1rem 0;
  }

  .ia img {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .ia-imgs {
    flex-direction: column-reverse;
    margin: 0 10% 0 10%;
  }

  .centible .ia img {
    width: 70%;
    display: flex;
    justify-content: center;
    margin: 0 15% 0 15%;
  }

  /* --- iterations --- */

  .iteration-one,
  .iteration-three {
    display: flex;
    flex-direction: column;
  }

  .iteration-one p,
  .iteration-three p {
    margin-left: 0rem;
    padding-right: 0rem;
  }

  .iteration-two {
    display: flex;
    flex-direction: column-reverse;
    margin: 2rem 0 2rem 0;
  }

  .iteration-two p {
    margin-right: 1rem;
    text-align: left;
    padding-left: 0rem;
  }

  .iterations p {
    margin-top: 0.5rem;
  }

  .iterations img {
    width: 35%;
    margin: 0 33% 0 33%;
  }

  /* --- success --- */

  .insights-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .insights-one,
  .insights-two,
  .insights-three,
  .insights-four {
    margin: 0 1rem 0 1rem;
  }

  .insights-one,
  .insights-two {
    margin-bottom: 1rem;
  }

  .footer p {
    margin: 1rem 1rem 1rem 3rem;
  }
}