/* || general css */
:root {
  --light-teal: #e8fafc;
  --medium-teal: #9bc3da;
  --grey: #5e6b81;
  --cool-black: #1e1e1e;
}

/* #region || colors */
.white-bg {
  background-color: white;
}
.light-teal {
  color: var(--light-teal);
}
.light-teal-bg {
  background-color: var(--light-teal);
}
.medium-teal {
  color: var(--medium-teal);
}
.medium-teal-bg {
  background-color: var(--medium-teal);
}
.dark-teal {
  color: var(--teal-text);
}
.dark-teal-bg {
  background-color: var(--teal-text);
}
/* #endregion */
/* #region || general text rules */
h1,
h2,
.faux-h {
  font-family: Marmelad, sans-serif;
  text-align: center;
  font-size: 2em;
}
h3 {
  font-size: 1.3em;
}
h3.semibold {
  font-size: 1.2em;
}

.sub-heading {
  font-family: Glory, sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: #5e6b81;
}
/* #endregion */

/* #region ||main body rules */
main {
  background-color: #fff;
  color: var(--cool-black);
}

/* || teal transition stripe */
.light-teal-stripe {
  background-color: var(--light-teal);
  padding: 1vh 0 1.5vh;
}
.light-teal-stripe h3 {
  font-size: 1.5rem;
  margin: 1% 0;
}
/* #endregion */

/* #region || Introduction section */

.vela-intro-container {
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 2fr;
}

.intro-img {
  grid-area: 2/2/3/3;
  align-self: center;
}
.project-details {
  grid-area: 1/1/3/3;
}
.project-details div:nth-child(1) {
  grid-area: 1/1/2/4;
}
.project-details div:nth-child(2) {
  grid-area: 2/1/3/2;
  width: 120px;
}
.project-details div:nth-child(3) {
  grid-area: 3/1/4/2;
  width: 120px;
}

.project-details h3 {
  width: 100px;
  margin-bottom: 0;
}
.software-icons {
  display: inline-flex;
  grid-area: 3/1/4/3;
  margin-top: 2vh;
}

#introduction .software-icons > h3 {
  font-size: 1.2rem;
}
#introduction .software-icons picture {
  margin-top: 1rem;
}
.bottom-border {
  border-bottom: 2px solid var(--cool-black);
  padding-top: 0.5vh;
}

#introduction h1 {
  margin-bottom: 0.25em;
  padding-top: 2vh;
}
#introduction ul {
  padding: 0;
  padding-left: 1rem;
}
#introduction.grid div {
  padding-left: 2vw;
}

.software-icons img {
  padding-left: 2vw;
  max-width: 75%;
}

/* attach aria label to interactive element */
img[src*="arrow-transition"] {
  box-sizing: content-box;
  width: 45px;
  height: 25px;
}
.thinking-process {
  flex-direction: column;
  align-items: center;
}
.thinking-process p {
  width: 130px;
  font-size: 1.3em;
  font-weight: bold;
  margin-block: 1em;
}
.ellipse {
  height: 60px;
  width: 60px;
  margin-top: 5px;
  margin-right: 20px;
  background: var(--light-teal);
  border-radius: 50%;
  position: relative;
}
.ellipse > img {
  height: 35px;
  position: absolute;
  opacity: 0.7;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* #endregion */

/* #region || competitive research */

/* icon sizing */
img[src*="windy-app-icon"] {
  width: 6rem;
  height: 6rem;
}
img[src*="accuweather-icon"] {
  width: 8rem;
  height: 6.5rem;
}
/* specific colors */
.windy-teal {
  background-color: #add5e8;
}
.windy-teal-dark {
  background-color: #82b9e8;
}
.light-orange {
  background-color: #ffd399;
}
.mid-orange {
  background-color: #ff8d4f;
}

/*main elements */
.weather-container {
  gap: 3vw;
  justify-content: center;
  margin-bottom: 5vh;
}
.weather-container ul {
  margin: 0;
  padding: 0;
}
.weather-container p {
  padding: 0 1.5vw;
  margin: 0;
}

.weather-grid {
  grid-template-columns: subgrid;
  grid-template-rows: 50px 100px 10vh 180px 150px;
  padding: 2vh 2vw 4vh;
  gap: 10px;
}

.weather-grid h4,
.weather-grid img {
  justify-self: center;
}

.weather-grid div ul {
  padding: 15px 20px 15px 30px;
  text-align: left;
}

.weather-container div:nth-child(2) img {
  align-self: center;
}
.weather-container div:first-child {
  grid-area: 1/1/2/2;
}
.weather-container div:nth-child(2) {
  grid-area: 2/1/3/2;
}
/* #endregion */

/* #region || user interviews */
/* #region research goal section */
.research-goals {
  margin-top: 5vh;
}
#user-interviews .research-goals ul {
  gap: 4vh 2vh;
  grid-template-columns: 1fr 12fr;
}
#user-interviews .research-goals ul div {
  border-radius: 50%;
  width: 5.5vw;
  height: 5.5vw;
  grid-area: 1/1/2/2;
}

#user-interviews .research-goals li {
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-flow: column;
  grid-column: 1/3;
  align-items: center;
  list-style-type: none;
}
#user-interviews .research-goals ul li:nth-of-type(1) div {
  background-color: #dfe7ed;
}
#user-interviews .research-goals ul li:nth-of-type(2) div {
  background-color: #c3d7e0;
}
#user-interviews .research-goals ul li:nth-of-type(3) div {
  background-color: #a2bfd0;
}
#user-interviews .research-goals ul li:nth-of-type(4) div {
  background-color: #89aec3;
}
/* #endregion */

/* #region || participants */
.participants {
  row-gap: 3vh;
  margin-top: 4vw;
  justify-content: center;
}
.interview-participant {
  width: 90vw;
  padding: 10px;
  justify-content: space-between;
}
.interview-participant span {
  font-family: Glory, sans-serif;
  font-size: x-large;
}
.interview-participant p {
  margin: 5px 0 10px;
}
.interview-participant > p {
  width: 150px;
}
.activity-icon-box {
  font-size: 14px;
  font-weight: 500;
  height: 140px;
  width: 80px;
  margin-top: -20px;
  padding-top: 20px;
  background-color: #f9fbfb;
}

.activity-icon-box img {
  height: 4vw;
  width: 4vw;
}
#user-interviews .interview-participant:first-of-type {
  grid-area: 1/1/2/2;
  background-image: linear-gradient(
    90deg,
    rgba(223, 231, 237, 0.58) 0%,
    rgba(223, 231, 237, 0) 100%
  );
}
#user-interviews .interview-participant:nth-of-type(2) {
  grid-area: 2/1/3/2;
  background-image: linear-gradient(
    90deg,
    rgba(195, 215, 224, 0.58) 0%,
    rgba(195, 215, 224, 0) 100%
  );
}
#user-interviews .interview-participant:nth-of-type(3) {
  grid-area: 3/1/4/2;
  background-image: linear-gradient(
    90deg,
    rgba(162, 191, 208, 0.58) 0%,
    rgba(162, 191, 208, 0) 100%
  );
}
#user-interviews .interview-participant:nth-of-type(4) {
  grid-area: 4/1/5/2;
  background-image: linear-gradient(
    90deg,
    rgba(137, 174, 195, 0.58) 0%,
    rgba(137, 174, 195, 0) 100%
  );
}
/* #endregion */

/* #endregion */

/* keep image, basic details and quote - put the rest under an 'about' btn */
/*#region ||user personas */

.persona-block {
  position: relative;
  margin-bottom: 8vh;
}
.persona-container {
  width: auto;
  position: relative;
  z-index: 1;
  grid-template-rows: auto minmax(20vh, 30vh);
  gap: 2vh;
}
.persona-container > h4 {
  grid-area: 1/1/2/3;
  font-size: x-large;
  font-family: Marmelad, sans-serif;
  margin: 0;
  padding: 15px 20px;
  border-radius: 25px 25px 0 0;
  background-color: #dfe7ed;
  color: var(--dark-med-blue);
}

.clip-circle {
  grid-area: 2/1/3/3;
  clip-path: circle(23vw at 50% 50%);
}
.center-persona-img {
  position: relative;
  top: 2vh;
  left: 6.5vh;
  width: 80vw;
}

.persona-personal-details {
  grid-area: 3/1/4/3;
  justify-content: space-evenly;
  padding: 0 3vw;
}
.persona-personal-details > div {
  width: 116px;
}
.persona-personal-details > div p:first-child {
  background-color: #c3d7e0;
  margin-top: 2vh;
  margin-bottom: 0;
  padding: 5px;
}
.persona-personal-details > div p:nth-child(2) {
  margin-top: 1vh;
}

.persona-quote {
  border: 2px solid var(--medium-teal);
  grid-area: 4/1/5/3;
  margin: 17px 20px;
  margin-top: 0;
  padding: 17px 25px;
  padding-top: 0;
}
.persona-quote h4 {
  margin-top: 3vh;
}

.expand-info-btn {
  display: flex;
  grid-column: 1/3;
  align-items: center;
  justify-content: space-around;
  background-color: #c3d7e0;
  color: var(--dark-med-blue);
  border: none;
  border-radius: 0 0 25px 25px;
  font-weight: 500;
}
.expand-info-btn.open{
    background-color: #89aec3;
}
 .expand-info-btn.open:hover{
    background-color: #c3d7e0;
  }
.expand-info-btn i {
    transform: rotate(90deg);
  }
.expand-info-btn.open i{
  transform: rotate(270deg);
}
.expand-info-btn:hover {
  background-color: #89aec3;
}

.persona-about {
  /* background-color: #f3f5f8; */
  display: none;
  position: relative;
  align-items: initial;
  margin-top: -20px;
  padding: 30px 30px;
  border: 2px solid #89aec3;
  gap: 3vh;
}
  .persona-block.shrink .persona-about{
    display: flex;
  }
.persona-about p {
  margin: 0;
}
.persona-about h4:first-of-type {
  margin-top: 10px;
}
.persona-textbox {
  background-color: #c3d7e0;
  padding: 15px;
}
.persona-textbox ul {
  padding-left: 5vw;
}


/* #endregion */

/* #region || wireframes */
#wireframes {
  padding-bottom: 3vh;
}
.wireframes-stripe {
  position: relative;
  padding-top: 12vh;
}
.in-front {
  position: relative;
  z-index: 1;
  max-width: 85%;
  margin: auto;
}
.wireframe-img-block {
  position: relative;
  gap: 2vh;
}

.wireframe-img-block h4 {
  margin-top: 5vh;
  margin-bottom: 2vh;
}
.wireframe-img-block h4:nth-of-type(1) {
  grid-area: 1/1/2/2;
}
.wireframe-img-block h4:nth-of-type(2) {
  grid-area: 3/1/4/2;
}
.wireframe-img-block h4:nth-of-type(3) {
  grid-area: 5/1/6/2;
}

.wireframe-img-block .wireframes-stripe:nth-of-type(1),
.wireframe-img-block picture:nth-of-type(1) {
  grid-area: 2/1/3/2;
}
.wireframe-img-block .wireframes-stripe:nth-of-type(2),
.wireframe-img-block picture:nth-of-type(2) {
  grid-area: 4/1/5/2;
}
.wireframe-img-block .wireframes-stripe:nth-of-type(3),
.wireframe-img-block picture:nth-of-type(3) {
  grid-area: 6/1/7/2;
}

/* #endregion */

/*#region || usability testing WIP */
.testing-participants {
  justify-content: space-between;
}
.testing-participants p {
  font-size: large;
  font-weight: 600;
  margin: 0;
}

#usability-testing ul {
  padding: 0 1vw 0 2vw;
}
#usability-testing h2 {
  padding-top: 4vh;
}
.usability-background {
  background-color: var(--light-teal);
  padding-bottom: 3vw;
}
/* #region participant colors */
.p1 {
  background-color: #f8b3b3;
  border-radius: 50% 50% 0 0;
}
.p2 {
  background-color: #ffceab;
  border-radius: 0 50%;
}
.p3 {
  background-color: #fff3b6;
  border-radius: 50% 0;
}
.p4 {
  background-color: #d5ffbb;
  border-radius: 0 50% 50% 0;
}
.p5 {
  background-color: #c3ffed;
  border-radius: 50% 0 0 50%;
}
.p6 {
  background-color: #ced6ff;
  border-radius: 0 0 50% 50%;
}
/* #endregion */
.participant-box {
  padding: 2.5vw 3.5vw;
}


.participant-marker {
  justify-content: space-around;
  gap: 1.5vw;
}
.participant-marker div {
  padding: 10px;
}
.usability-quotes {
  justify-content: space-around;
}
.usability-task {
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 2vh 1vw;
  gap: 2vh;
  width: 90vw;
  background-color: white;
}
/* flex basis 0 and flex grow 1 make items fit into a container.  not sure why tho */
.test-feedback {
  margin-top: -10px;
  margin-bottom: 25px;
  padding: 20px 0;
  width: 80%;
  gap: 3vh;
  opacity: 0.9;
}
.test-feedback > p:first-child {
  width:100%;
  margin-bottom: 0;
  padding: 10px 0;
  text-align: center;
  background-color: #ffd399;
}
.results-box {
  width: 70%;
}
.error-box {
  padding: 2vh 0;
}
/* #endregion */

/* #region || wireframe iterations */

.wireframe-box {
  flex-shrink: 0;
  width: 25%;
  margin: 15px;
}

.version-num {
  align-self: flex-start;
  margin-right: 1vw;
}
.iterate {
  flex-direction: column;
  padding-bottom: 3vh;
}
.frame-iterate {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 0;
  flex-grow: 1;
  align-items: center;
  margin-top: 3vh;
}
.frame-iterate > p:first-child {
  width: 100%;
  text-align: center;
  margin-bottom: 0;
  margin-top: 3vh;
}
.frame-iterate > p:nth-of-type(2) {
  width: 65%;
}

.frame-iterate:nth-of-type(1) {
  background-image: linear-gradient(
    180deg,
    rgba(167, 185, 188, 0) 0%,
    rgba(167, 185, 188, 0.33) 100%
  );
}
.frame-iterate:nth-of-type(2) {
  background-image: linear-gradient(
    180deg,
    rgba(146, 185, 193, 0) 0%,
    rgba(146, 185, 193, 0.33) 100%
  );
}
.frame-iterate:nth-of-type(3) {
  background-image: linear-gradient(
    180deg,
    rgba(79, 130, 140, 0) 0%,
    rgba(79, 130, 140, 0.33) 100%
  );
}
/* #endregion */

/* #region mini screen size */
@media screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 320px) and (max-width: 450px) {
  /* #region overview */
  #introduction h1 {
    padding-top: 0;
  }
  .vela-intro-container {
    grid-template-rows: 175px 3fr;
  }
  .intro-img {
    grid-area: 2/1/3/3;
    align-self: normal;
  }
  .project-details {
    grid-area: 1/1/3/3;
    grid-template-rows: 180px 73vw 40vw;
  }
  .project-details h3 {
    margin-top: 0;
  }
  .project-details div:nth-child(1) {
    grid-area: 1/1/2/8;
  }
  .project-details div:nth-child(2) {
    grid-area: 3/2/4/4;
  }
  .project-details div:nth-child(3) {
    grid-area: 3/5/4/7;
  }
  .software-icons {
    margin-top: 0;
  }

  /* #endregion */

  /* #region competitive research */
  .weather-container {
    gap: 6vw;
  }
  .weather-grid {
    grid-template-rows: 40px 100px 14vh 200px 170px;
  }
  /* #endregion */

  /* #region user interviews */
  #user-interviews .research-goals ul div {
    border-radius: 50%;
    width: 7vw;
    height: 7vw;
    grid-area: 1/1/2/2;
  }
  .activity-icon-box img {
    height: 6vw;
    width: 6vw;
  }
  /* #endregion */

  /* #region user personas */
  .persona-container {
    grid-template-columns: minmax(140px, 160px) minmax(50vw, 60vw);
    grid-template-rows: auto minmax(25vh, 35vh);
    gap: 0;
  }
  .persona-container .center-persona-img:first-of-type {
    top: 4vh;
    right: 13vw;
    left: auto;
    width: 90vw;
  }
  .clip-circle {
    grid-area: 2/2/3/3;
    clip-path: ellipse(24vw 34vw at 50% 50%);
    margin-left: -10px;
  }
  .persona-personal-details {
    flex-direction: column;
    grid-area: 2/1/3/2;
    justify-content: initial;
    padding-top: 1vh;
    padding-left: 3vw;
  }
  .persona-personal-details > div p:first-child {
    margin-top: 1vh;
  }
  .persona-quote {
    border: 2px solid var(--medium-teal);
    grid-area: 3/1/4/3;
    margin: 17px 20px;
    padding: 17px 25px;
    padding-top: 0;
  }

  /* wireframe iterations */
  .wireframes-stripe {
    padding-top: 10vh;
  }
  .in-front {
    max-width: 90%;
  }
  /* #endregion */

  /* usability testing */
  .testing-participants{
    flex-wrap: wrap;
    margin: auto;
    margin-bottom: 15px;
    width:200px;
    gap:15px 20px;
  }
.participant-marker{
  gap:3vw;
}
  /* #region wireframe iterations */
  .frame-iterate {
    justify-content: center;
  }
  .wireframe-box {
    margin-bottom: 0;
  }
  .frame-iterate > p:nth-of-type(2) {
    width: 90%;
  }
  .frame-iterate > p:first-child {
    text-align: initial;
    margin-left: 3vw;
  }
  /* #endregion */
}

/* #endregion */

/* #region || small screen size */
@media screen and (-webkit-min-device-pixel-ratio: 1) and (max-width: 639px) {
  .weather-grid {
    padding-left: 5vw;
    padding-right: 5vw;
  }


  /* #region || design thinking small */

  img[src*="arrow-transition"] {
    transform: rotate(90deg);
    padding-bottom: 0;
  }
  .thinking-process p {
    text-align: left;
  }
  .thinking-process a > div {
    margin-bottom: 2vh;
    flex-direction: row;
    align-items: initial;
  }
  /* #endregion */

  /* user interview section */
  .activity-icon-box {
    margin-right: 20vw;
  }
}
/* #endregion */

/* #region medium width size */
@media screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 639px) and (max-width: 1023px) {
  /* #region introduction medium */
  /* #region overview */
  .vela-intro-container {
    grid-template-columns: auto;
    grid-template-rows: auto;
  }
  .intro-img {
    grid-area: 1/3/3/12;
    margin-top: 8vh;
  }
  .project-details {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }
  .project-details div:nth-child(1) {
    grid-area: 1/1/2/3;
  }

  .project-details div:nth-child(3) {
    grid-area: 2/2/3/3;
  }
  .project-details div:nth-child(3) p {
    width: 120px;
  }

  .software-icons {
    grid-area: 3/1/4/7;
  }
  /* #endregion */
  /* #region || design thinking medium */
  .ellipse {
    height: 88px;
    width: 88px;
    margin-right: 0;
  }
  .ellipse > img {
    height: 44px;
  }
  .thinking-process {
    flex-direction: row;
    justify-content: space-around;
    margin-top: 5vh;
    margin-bottom: 6vw;
  }
  .flex-med {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  img[src*="arrow-transition"] {
    height: 35px;
    padding-bottom: 7vh;
  }

  /* #endregion */
  /* #endregion */

  /* #region competitive research */

  .weather-grid {
    grid-template-columns: subgrid;
    grid-template-rows: 50px 100px 16vh 200px 170px;
    gap: 11px;
  }
  .weather-container div:nth-child(2) {
    grid-area: 1/2/2/3;
  }
  /* #endregion */

  /* #region || user interviews medium */
  #user-interviews .research-goals ul div {
    border-radius: 50%;
    width: 4vw;
    height: 4vw;
    grid-area: 1/1/2/2;
  }

  .participants {
    justify-content: initial;
  }
  .interview-participant {
    width: auto;
    justify-content: initial;
  }
  .activity-icon-box {
    height: 160px;
    margin-left: 7vw;
  }
  .activity-icon-box img {
    height: 3vw;
    width: 3vw;
  }
  #user-interviews .interview-participant:nth-of-type(2) {
    grid-area: 1/2/2/3;
  }
  #user-interviews .interview-participant:nth-of-type(3) {
    grid-area: 2/1/3/2;
  }
  #user-interviews .interview-participant:nth-of-type(4) {
    grid-area: 2/2/3/3;
  }

  /* #endregion */

  /* #region user personas */
  .persona-block {
    display: flex;
    gap: 3vw;
  }
  .persona-container {
    grid-template-columns: 50vw minmax(30vw, 50vw);
    grid-template-rows: minmax(6vh, 9vh) 50vw;
    gap: 2vh 0;
  }
  .persona-container > h4 {
    grid-area: 1/1/2/3;
  }
  .clip-circle {
    justify-self: center;
    grid-area: 2/1/3/2;
    clip-path: circle(23vw at 50% 50%);
  }
  .center-persona-img {
    width: 65vw;
    top: 6vh;
  }
  #user-persona .persona-block:first-of-type .center-persona-img {
    left: 3vw;
  }
  .persona-personal-details {
    grid-area: 2/2/3/3;
    flex-direction: column;
    justify-content: space-around;
    padding: 25vw 3vw 2vw;
  }
  .persona-personal-details > div {
    display: flex;
    width: auto;
    justify-content: space-between;
    align-items: center;
  }
  .persona-personal-details > div p:first-child {
    margin-top: 0;
    margin-bottom: 0;
    padding: 5px;
  }
  .persona-personal-details > div p:nth-child(2) {
    margin-top: 0;
    margin-bottom: 0;
    text-align: right;
  }
  .persona-quote {
    grid-area: 3/1/4/3;
  }

  .expand-info-btn {
    grid-area: 1/1/2/3;
    justify-content: center;
    justify-self: flex-end;
    width: 20vw;
    border-radius: 25px 25px 0 0;
    border: 2px solid #89aec3;
    color: var(--dark-med-blue);
  }
  .expand-info-btn i{
    transform: initial;
  }
  .expand-info-btn.open i{
    transform: rotate(180deg);
  }
 
  .expand-info-btn [class*="fa-chevron"]:first-of-type {
    display: none;
  }

  .persona-about {
    /* background-color: #f3f5f8; */
    display: none;
    margin-top: 0;
    padding: 0 0 0 10px;
    border: none;
  }
  .persona-textbox ul {
    margin-top: 10px;
    margin-bottom: 0;
    padding-left: 3vw;
  }

  /* shrink */
  .persona-block.shrink .persona-container {
    grid-template-columns: minmax(40vw, 40vw);
    grid-template-rows: minmax(6vh, 9vh) 38vw;
    gap: 2vh;
  }
  .persona-block.shrink h4:first-of-type {
    grid-area: 1/1/2/2;
  }
  .persona-block.shrink .clip-circle {
    grid-area: 2/1/3/2;
    clip-path: circle(18vw at 50% 50%);
    align-self: center;
  }
  .persona-block.shrink .center-persona-img {
    top: 13vw;
    left: 6.5vh;
    right: 10vw;
    width: 70vw;
  }
  .persona-block.shrink .persona-personal-details {
    grid-area: 3/1/4/2;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0 3vw;
  }
  .persona-block.shrink .persona-quote {
    border: 2px solid var(--medium-teal);
    grid-area: 4/1/5/2;
  }
  .persona-block.shrink .expand-info-btn {
    grid-area: 1/1/2/2;
    justify-self: flex-end;
    width: 120px;
    border-radius: 25px 25px 0 0;
    border: 2px solid #89aec3;
  }

  /* expand */

  /* #endregion */

  /* ||wireframes medium */
  .wireframes-stripe {
    padding-top: 14vh;
  }
  .in-front {
    max-width: 76%;
  }

  /* || usability testing medium */

  .usability-task {
    width: 44vw;
  }
  .usability-quotes{
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap:3vw;
  }

  /* #region || wireframe iterations medium */
  .wireframe-box {
    width: auto;
    order: -1;
    flex-shrink: 1;
  }
  .iterate {
    flex-direction: row;
    align-items: flex-start;
    gap: 2vw;
    justify-content: center;
  }
  .frame-iterate {
    flex-direction: column;
    margin-top: 0;
    padding: 20px;
  }
  .frame-iterate > p:first-child {
    width: auto;
    margin: 0;
  }
  .frame-iterate > p:nth-of-type(2) {
    width: auto;
  }

  /* #endregion */
}
/* #endregion */

/* #region || large screen size */
@media screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 1024px) {
  /* #region introduction large */
  /* #region overview */
  .sub-heading {
    max-width: 80%;
  }
  #introduction {
    margin-top: 8vh;
  }
  .intro-img {
    grid-area: 1/3/3/12;
    align-self: center;
  }
  .project-details {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-column: 1/3;
    grid-row: 1/3;
  }
  .vela-intro-container {
    grid-template-columns: auto;
    grid-template-rows: auto;
  }
  .project-details div:nth-child(1) {
    grid-area: 1/1/2/3;
  }
  .project-details div:nth-child(2) {
    grid-area: 2/1/3/2;
  }
  .project-details div:nth-child(3) {
    grid-area: 2/2/3/3;
  }
  .project-details div:nth-child(3) p {
    width: 120px;
  }

  .software-icons {
    display: inline-flex;
    grid-area: 3/1/4/7;
    margin-top: 2vh;
  }
  /* #endregion */
  /* #region ||design thinking large */
  .ellipse > img {
    height: 44px;
  }

  .ellipse {
    height: 88px;
    width: 88px;
    margin-right: 0;
  }

  .thinking-process {
    flex-direction: row;
    justify-content: space-around;
    margin-top: 5vh;
    margin-bottom: 6vw;
  }
  .flex-med {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  img[src*="arrow-transition"] {
    height: 35px;
    padding-bottom: 7vh;
  }

  /* #endregion */

  /* #endregion */

  /* #region competitive research */
  .weather-grid {
    grid-template-columns: subgrid;
    grid-template-rows: 50px 100px 16vh 180px 150px;
    gap: 11px;
  }
  .weather-container div:nth-child(2) {
    grid-area: 1/2/2/3;
  }
  /* #endregion */

  /* #region || user interviews large */

  #user-interviews .research-goals ul div {
    border-radius: 50%;
    width: 3vw;
    height: 3vw;
    grid-area: 1/1/2/2;
  }
  .participants {
    justify-content: initial;
  }
  .interview-participant {
    width: auto;
    justify-content: initial;
  }
  .activity-icon-box {
    height: 180px;
    margin-left: 7vw;
  }
  .activity-icon-box img {
    height: 3vw;
    width: 3vw;
  }
  #user-interviews .interview-participant:nth-of-type(2) {
    grid-area: 1/2/2/3;
  }
  #user-interviews .interview-participant:nth-of-type(3) {
    grid-area: 2/1/3/2;
  }
  #user-interviews .interview-participant:nth-of-type(4) {
    grid-area: 2/2/3/3;
  }
  /* #endregion */

  /* #region || user persona large */
.persona-block {
    display: flex;
    gap: 3vw;
  }
  .persona-container {
    grid-template-columns: 50vw minmax(30vw, 40vw);
    grid-template-rows: minmax(6vh, 9vh) 40vw;
    gap: 2vh 0;
  }
  .persona-container > h4 {
    grid-area: 1/1/2/3;
  }
  .clip-circle {
    justify-self: center;
    grid-area: 2/1/3/2;
    clip-path: circle(18vw at 50% 50%);
  }
  .center-persona-img {
    width: 45vw;
    top: 6vh;
  }
  #user-persona .persona-block:first-of-type .center-persona-img {
    left: 3vw;
  }
  .persona-personal-details {
    grid-area: 2/2/3/3;
    flex-direction: column;
    justify-content: space-around;
    padding: 25vw 3vw 2vw;
  }
  .persona-personal-details > div {
    display: flex;
    width: auto;
    justify-content: space-between;
    align-items: center;
  }
  .persona-personal-details > div p:first-child {
    margin-top: 0;
    margin-bottom: 0;
    padding: 5px;
  }
  .persona-personal-details > div p:nth-child(2) {
    margin-top: 0;
    margin-bottom: 0;
    text-align: right;
  }
  .persona-quote {
    grid-area: 3/1/4/3;
  }

  .expand-info-btn {
    grid-area: 1/1/2/3;
    justify-content: center;
    justify-self: flex-end;
    width: 20vw;
    border-radius: 25px 25px 0 0;
    border: 2px solid #89aec3;
    color: var(--dark-med-blue);
  }
  .expand-info-btn i{
    transform: initial;
  }
  .expand-info-btn.open i{
    transform: rotate(180deg);
  }
 
  .expand-info-btn [class*="fa-chevron"]:first-of-type {
    display: none;
  }

  .persona-about {
    /* background-color: #f3f5f8; */
    display: none;
    margin-top: 0;
    padding: 0 0 0 10px;
    border: none;
  }
  .persona-textbox ul {
    margin-top: 10px;
    margin-bottom: 0;
    padding-left: 3vw;
  }

  /* shrink */
  .persona-block.shrink .persona-container {
    grid-template-columns: minmax(40vw, 40vw);
    grid-template-rows: minmax(6vh, 9vh) 38vw;
    gap: 2vh;
  }
  .persona-block.shrink h4:first-of-type {
    grid-area: 1/1/2/2;
  }
  .persona-block.shrink .clip-circle {
    grid-area: 2/1/3/2;
    clip-path: circle(18vw at 50% 50%);
    align-self: center;
  }
  .persona-block.shrink .center-persona-img {
    top: 5vw;
    left: 6.5vh;
    right: 10vw;
    width: 50vw;
  }
  .persona-block.shrink .persona-personal-details {
    grid-area: 3/1/4/2;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0 3vw;
  }
  .persona-block.shrink .persona-quote {
    border: 2px solid var(--medium-teal);
    grid-area: 4/1/5/2;
  }
  .persona-block.shrink .expand-info-btn {
    grid-area: 1/1/2/2;
    justify-self: flex-end;
    width: 120px;
    border-radius: 25px 25px 0 0;
    border: 2px solid #89aec3;
  }

  /* ||wireframes large */

  .wireframes-stripe {
    padding-top: 16vh;
  }
  .in-front {
    max-width: 70%;
  }
  /* #endregion */

  /* || usability testing large */
  .usability-task {
    width: 40vw;
  }
  .usability-quotes{
    flex-direction: row;
    align-items: flex-start;
    gap:3vw;
  }
  /* #region || wireframe iterations large */

  .wireframe-box {
    width: auto;
    order: -1;
    flex-shrink: 1;
  }
  .iterate {
    flex-direction: row;
    align-items: flex-start;
    gap: 2vw;
    justify-content: center;
  }
  .frame-iterate {
    flex-direction: column;
    margin-top: 0;
    padding: 20px;
  }
  .frame-iterate > p:first-child {
    width: auto;
    margin: 0;
  }
  .frame-iterate > p:nth-of-type(2) {
    width: auto;
  }
  /* #endregion */
}
/* #endregion */