@import url(/css/reset.css);

:root {
  /* Color Variables */

  /* Background and Lines */
  --bg-color: #d2eae4;
  --line-1: #8cbeb2;

  /* Text */
  --prim-t-color: #1e2524;
  --sec-t-color: #72696c;
  --link-t-color: #e47712;

  /* Alerts */
  --Error: #cb2020;
  --Success: #75cb20;

  /* end Color Variables */

  /* Font Variables*/

  /* Family */
  --f-primary: "Source Sans Pro", sans-serif;

  /* Weight */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Size using rem e.g fs-16 = 16px which is 1rem*/
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-19: 1.188rem;
  --fs-23: 1.438rem;
  --fs-27: 1.688rem;
  --fs-33: 2.063rem;
  --fs-40: 2.5rem;

  /* end Font Variables */

  /* Responsive Setup */
  /* Width of the sidebar nav */
  --main-nav-width: 140px;

  /* Flex row to column */
  --responsive-direction: row;

  /* Content-wrapper */
  --responsive-cw: 111px;
  --responsive-cw-margin: calc(var(--main-nav-width) + 24px) 0;

  /* margins */
  --margin-40-20: 40px;
  --margin-80-40: 80px;
}
@media (max-width: 1280px) {
  :root {
    --responsive-cw: 80px;
    --main-nav-width: 140px;
  }
}
@media (max-width: 1024px) {
  :root {
    --responsive-cw: 16px;
    --main-nav-width: 100%;
    --responsive-cw-margin: 0;
    --margin-40-20: 20px;
    --margin-80-40: 40px;
  }
}

@media (min-width: 926px) {
  .grid-2c-wrapper {
    grid-template-areas: "left-c right-c";
    grid-template-columns: 1fr 1fr;
  }

  .grid-gallery {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(11, 80px);
    gap: 24px;
    grid-template-areas:
      "p1 p1 p1 p2 p2 p2 p3 p3 p3"
      "p1 p1 p1 p2 p2 p2 p3 p3 p3"
      "p1 p1 p1 p2 p2 p2 p3 p3 p3"
      "p1 p1 p1 p4 p4 p4 p4 p4 p4"
      "p5 p5 p5 p4 p4 p4 p4 p4 p4"
      "p5 p5 p5 p4 p4 p4 p4 p4 p4"
      "p5 p5 p5 p7 p7 p7 p7 p7 p7"
      "p6 p6 p6 p7 p7 p7 p7 p7 p7"
      "p6 p6 p6 p7 p7 p7 p7 p7 p7"
      "p6 p6 p6 p7 p7 p7 p7 p7 p7"
      "p6 p6 p6 p7 p7 p7 p7 p7 p7";
  }

  .main-container {
    border-inline: transparent solid 24px;
  }
}
/* end Responsive Setup */

/* General Styling */

/*<i>, <li>, <a>, <p> and <hx> general setup */

i {
  margin-right: 8px;
  margin-top: 4px;
}

.bullet-li {
  margin-top: 8px;
  margin-left: 16px;
  position: relative;
  letter-spacing: 0.02em;
  font-size: var(--fs-16);
}

.bullet-li:before {
  content: "•";
  font-size: 10pt;
  margin-right: 8px;
  left: -0.8em;
  position: absolute;
}

.check-li {
  margin-top: 8px;
  margin-left: 24px;
  position: relative;
  letter-spacing: 0.02em;
  font-size: var(--fs-16);
}

.check-li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--Success);
  top: 2px;
  left: -1.5em;
  position: absolute;
}

.error-li {
  margin-top: 8px;
  margin-left: 24px;
  position: relative;
  letter-spacing: 0.02em;
  font-size: var(--fs-16);
}

.error-li::before {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--Error);
  top: 2px;
  left: -22px;
  position: absolute;
}

.link {
  color: var(--sec-t-color);
}

.link:hover {
  color: var(--link-t-color);
}

li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--f-primary);
  color: var(--prim-t-color);
}
h1 {
  font-size: var(--fs-40);
}
h2 {
  font-size: var(--fs-33);
  font-weight: var(--fw-semibold);
  box-shadow: inset 0 0 0 0 var(--prim-t-color);
}
h3 {
  font-size: var(--fs-27);
  font-weight: var(--fw-semibold);
}
h4 {
  font-size: var(--fs-23);
  font-weight: var(--fw-semibold);
}
h5 {
  font-size: var(--fs-19);
  font-weight: var(--fw-semibold);
}
p {
  font-size: var(--fs-16);
  letter-spacing: 0.02em;
  margin-top: 8px;
}
a {
  font-size: var(--fs-16);
}

/* When anchor is clicked */

h2:target {
  box-shadow: inset 950px 0 0 0 var(--bg-color);
  transition: all 300ms ease-in-out 200ms;
}

.h5 {
  font-size: var(--fs-19);
  font-weight: var(--fw-semibold);
}

/* Text and symbols colors weights*/

.highlight {
  color: var(--link-t-color);
}

.sec-color {
  color: var(--sec-t-color);
}

.fa-xmark {
  color: var(--Error);
}

.fa-check {
  color: var(--Success);
}

.regular {
  font-weight: var(--fw-regular);
}

.semibold {
  font-weight: var(--fw-semibold);
}

/* end Text colors and weights */

/* Text alignment */

.text-center {
  text-align: center;
}

/* Control Utilities */

/* Desktop > Mobile - Display:none */

.mobile {
  display: none;
}

/* Flex */

.flex {
  display: flex;
  gap: 24px;
  margin-block: 24px;
}

.f-even {
  flex: 1;
}

.f-center {
  align-items: center;
  justify-content: center;
}

.f-column {
  flex-direction: column;
}

.f-responsive {
  flex-direction: var(--responsive-direction);
}

.f-wrap {
  flex-wrap: wrap;
}

.f-space-btwm {
  justify-content: space-between;
}

/* end Flex */

/* Grid for Projects */

.grid-2c-wrapper {
  display: grid;
  grid-gap: 0 24px;
  grid-template-areas:
    "left-c"
    "right-c";
}

/* end Grid for projects */

/* Smooth Link Scroll */

html {
  scroll-behavior: smooth;
}

.scroll-offset {
  scroll-margin-block-start: 32px;
  scroll-margin-block-end: 110px;
}

.scroll-offset-projects {
  scroll-margin-block: 80px;
  scroll-margin-block-end: 110px;
}

/* end Smooth Link Scroll */

/* display:block */

.block {
  display: inline-block;
}

/* Removers */

.margin-remover {
  margin: 0 !important;
}

.gap-remover {
  gap: 0 !important;
}

/* Margins */

.margin-16-top {
  margin-top: 16px;
}

.margin-40-top {
  margin-top: 40px;
}

/* end Control Utilities */

/* Background color */

body {
  background-color: var(--bg-color);
}

/* Navigation Menus */

/* Main Menu */
.main-nav {
  width: var(--main-nav-width);
  margin-top: 176px;
  padding: 20px 16px;
  position: fixed;
  border-radius: 8px;
  background: white;
}

/* adds margin to the first li and sub items */
.main-nav li:not(:last-child),
.main-nav li:not(:first-child) {
  margin-bottom: 2px;
}

.main-nav li:first-child,
.main-nav li:nth-child(3),
.main-nav li:nth-child(6) {
  margin-bottom: 8px;
}

.main-nav {
  text-align: right;
}

.main-nav a:hover,
.sub-nav a:hover {
  color: var(--link-t-color);
}

.sub-items a {
  color: var(--sec-t-color);
}

/* if aria-current:page change color */
[aria-current]:not([aria-current="false"]) {
  color: var(--link-t-color);
}

/* end Main Menu */

/* Sub Menu */
.sub-nav {
  border-radius: 8px;
  filter: drop-shadow(0px 4px 3px rgb(140, 190, 178, 0.25));
  background: white;
  padding-top: 8px;
  width: 100%;
  transition: all 200ms ease-in-out;
}

.sub-nav.sticky {
  width: calc(100% + var(--responsive-cw) * 2);
  margin-inline: calc(0px - var(--responsive-cw));
  border-radius: 0;
  position: sticky;
  top: 0;
  z-index: 3;
  transition: all 200ms ease-in-out;
}

.sub-nav li:not(:last-child) {
  margin-right: 8px;
}

.sub-nav ul {
  margin-inline: auto;
  margin-block: revert;
}

.grow-scroll {
  height: 4px;
  background-color: var(--link-t-color);
}

/* end Sub Menu */

/* end Navigation Menus lime */

/* Containers */
.main-container {
  --max-width: 1312px;
  width: min(var(--max-width), 100%);
  margin-inline: auto;
  margin-block: 32px;
}

.content-wrapper {
  padding-block: 32px 80px;
  padding-inline: var(--responsive-cw);
  margin-inline: var(--responsive-cw-margin);

  border-radius: 8px;
  background: white;
}
/* end Containers lime */

/* Card Styles */
/* General */
.card {
  min-width: 300px;
  max-width: 434px;
  border-radius: 8px;
  overflow: hidden;
  margin-inline: auto;
  flex: 1;
}

.card img {
  height: 186px;
  object-fit: cover;
  object-position: right;
  border-bottom: solid 4px var(--bg-color);
}

.card-text {
  padding-inline: 16px;
  padding-block: 8px 16px;
}

.card.homepage.soon {
  position: relative;
}

.card.homepage.soon:before {
  content: "Soon";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--prim-t-color);
  opacity: 85%;
  color: #fff;
  text-align: center;
  font-size: var(--fs-27);
  font-weight: var(--fw-semibold);
  font-family: var(--f-primary);
  z-index: 1;
}

.card.homepage.soon:hover .card-text,
.card.homepage.soon:hover img {
  z-index: -1;
}

/* end General */

/* Media queries */

@media (max-width: 1024px) {
  .mobile {
    display: inherit;
  }

  .main-container {
    margin-block: 16px;
  }

  .main-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 5;
    overflow: hidden;
    border-radius: 0;
    scroll-behavior: smooth;
    border-top: var(--link-t-color) 2px solid;
    justify-content: left;
  }

  .main-nav ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
  }

  .main-nav li {
    margin: 0 !important;
    padding: 16px;
    white-space: nowrap;
  }

  .nav-current {
    background: var(--bg-color);
    padding-inline: 24px;
    font-weight: var(--fw-semibold);
  }

  .sub-items {
    display: none;
    transform: translatex(-100vw);
  }

  .sub-items a {
    color: var(--prim-t-color);
  }

  .sub-items.tap {
    display: inherit;
    transform: translateX(0);
  }

  .category {
    cursor: pointer;
  }

  .nav-current [aria-current]:not([aria-current="false"]) {
    color: var(--prim-t-color);
  }

  /* sub-nav (projects and multiverse) */

  .sub-nav {
    overflow: hidden;
    scroll-behavior: smooth;
    padding-inline: 16px;
    padding-top: 0;
    height: 3.2rem;
  }

  .sub-nav.sticky {
    padding-inline: 0;
  }

  .sub-nav ul {
    overflow-y: scroll;
    flex-wrap: nowrap;
    margin: 0;
    gap: 0;
    padding-bottom: 1.5rem;
    overflow: hidden;
  }

  .sub-nav ul li {
    white-space: nowrap;
    padding-block: 16px;
    padding-inline: 16px;
    margin: 0;
  }

  .grow-scroll {
    position: absolute;
    bottom: 0;
  }

  .grid-2c-wrapper {
    gap: 16px 24px;
  }
}

@media (max-width: 926px) {
  :root {
    --responsive-direction: column;
  }

  .f-x-center {
    justify-content: center;
  }

  .small-screens-text-center {
    text-align: center;
  }

  .left-mobile {
    justify-content: left;
    align-items: center;
  }

  .grid-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(26, 30vw);
    gap: 16px;
    grid-template-areas:
      "p1 p1 p1"
      "p1 p1 p1"
      "p1 p1 p1"
      "p1 p1 p1"
      "p1 p1 p1"
      "p1 p1 p1"
      "p2 p2 p2"
      "p2 p2 p2"
      "p2 p2 p2"
      "p3 p3 p3"
      "p3 p3 p3"
      "p3 p3 p3"
      "p4 p4 p4"
      "p4 p4 p4"
      "p5 p5 p5"
      "p5 p5 p5"
      "p5 p5 p5"
      "p6 p6 p6"
      "p6 p6 p6"
      "p6 p6 p6"
      "p6 p6 p6"
      "p6 p6 p6"
      "p6 p6 p6"
      "p7 p7 p7"
      "p7 p7 p7"
      "p7 p7 p7";
  }

  #skillset ul {
    flex-wrap: wrap;
    justify-content: start;
    gap: 24px;
  }

  #skillset ul li {
    flex: 1;
    min-width: 100px;
    height: fit-content;
  }

  #about-me div:first-child {
    flex-direction: column;
    height: fit-content;
  }
}

/* end Media Queries lime */

/* Homepage */
.homepage {
  border: solid 4px var(--bg-color);
}
.homepage p {
  color: var(--sec-t-color);
}
/*end Homepage*/

/* Projects */

.image-article {
  border-radius: 8px;
  border: solid 4px var(--bg-color);
  padding: 16px 8px;
  overflow: hidden;
  margin-top: 24px;
}

.image-article img {
  margin-inline: auto;
  display: block;
}

.next-project {
  margin-top: var(--margin-80-40);
  padding-top: 24px;
  border-top: 4px solid var(--bg-color);
}

/* end Projects */

/* end Card Styles lime */

/* Buttons */

.close-text-btn {
  padding: 8px 16px;
  font-family: var(--f-primary);
  font-size: var(--fs-16);
  color: var(--sec-t-color);
  cursor: pointer;

  display: flex;
  align-items: center;
}

.close-text-btn i {
  margin-top: 2px;
  color: var(--sec-t-color);
}

.close-text-btn:hover,
.close-text-btn:hover i {
  color: var(--link-t-color);
}

/* end Buttons lime */

/* end General Styling lime */

/* Website Build yellow */

/* Homepage */

/* About */

.projects,
.multiverse,
.reach-me {
  margin-top: var(--margin-80-40);
}

.about,
.my-info {
  margin-block: revert;
}

.about {
  gap: 16px;
}

.about .my-info img {
  object-fit: cover;
  object-position: 50% 65%;
  width: 199px;
  height: 254px;
  border-radius: 8px;
  flex: none;
}

.my-info h1 {
  font-weight: var(--fw-semibold);
  margin-bottom: -8px;
}

.my-info h2 {
  margin-top: 0;
  padding-top: 0;
  color: var(--sec-t-color);
  font-weight: var(--fw-regular);
}
.my-info p {
  margin-top: 16px;
  font-size: var(--fs-19);
}

.tab-animation {
  box-shadow: inset 0 0 0 0 var(--prim-t-color);
  transition: box-shadow 300ms ease-in-out;
}

.tab-animation:hover {
  box-shadow: inset 300px 0 0 0 var(--bg-color);
}

.tab-animation.open {
  box-shadow: inset 300px 0 0 0 var(--bg-color);
  color: var(--prim-t-color);
}

.my-info ul {
  position: relative;
  bottom: -24px;
}

.my-info ul li {
  display: inline-block;
  cursor: pointer;
  padding: 4px 8px;
  margin-right: 16px;
  font-size: var(--fs-19);
  color: var(--sec-t-color);
}

.my-info ul li a {
  font-size: var(--fs-19);
  color: var(--sec-t-color);
}

.my-info ul li:hover,
.my-info ul li a:hover {
  color: var(--prim-t-color);
}

.my-info-tab {
  justify-content: space-between;
  width: 100%;
  display: flex;
  max-height: 0;
  overflow: hidden;
  transition: all 300ms ease-in-out;
}

.my-info-tab.line {
  border-bottom: 4px solid var(--bg-color);
}

.my-info-tab,
.my-info-tab ul {
  margin-block: revert;
  gap: 0 24px;
}

#about-me {
  margin-top: -24px;
}

#about-me h5:not(:first-child) {
  margin-top: 16px;
}

#about-me span {
  color: var(--link-t-color);
}

/* end About lime*/

/* Multiverse */

.multiverse .card-picture {
  border-radius: 8px;
}

.multiverse .card-picture {
  height: fit-content;
  overflow: hidden;
  border: solid 4px var(--bg-color);
}

.multiverse img {
  height: revert;
  max-height: 264px;
  width: 100%;
  object-fit: cover;
  border: none;
}
/* Controlling image position and crop */
.multiverse .card:nth-child(1) img {
  object-position: 50% 32%;
  transform: scale(1.1);
}
.multiverse .card:nth-child(2) img {
  object-position: 50% 30%;
  transform: scale(1.1);
}

/* end Multiverse lime*/

.reach-me p {
  font-size: var(--fs-19);
  margin-top: 24px;
}

.reach-me a {
  color: var(--link-t-color);
  font-size: var(--fs-19);
}

/* end Homepage lime */

/* Project Beback */

.intro {
  margin-top: 32px;
}

.intro img {
  margin-bottom: 24px;
}

.intro h4:not(:last-child) {
  margin-bottom: 8px;
}

.intro h4:nth-child(3) {
  margin-top: 8px;
}

.research h2 {
  margin-bottom: 40px;
}

.research .flex {
  margin-block: 24px 40px;
}

.research .card {
  box-shadow: 0px 0px 4px 3px rgba(140, 190, 178, 0.25);
  max-width: 274px;
  min-width: 220px;
}

.card-picture {
  height: 137px;
  width: 100%;
}

.research .card img {
  border-bottom: revert;
  height: 100%;
  width: 100%;
  object-position: center;
}

.research .card-title {
  text-align: center;
  margin-block: 8px 16px;
}

.research .card-title p {
  color: var(--sec-t-color);
}

.research .card-title p,
.research .card-title h5 {
  margin: 0;
}

.research .card ul:not(:last-child) {
  margin-bottom: 16px;
}

.chart-wrapper {
  justify-content: space-evenly;
  width: 100%;
}

.pie-chart {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pie-chart::after {
  width: 115px;
  height: 115px;
  border-radius: 50%;
  background: white;
  content: "";
  position: absolute;
}

.pie-chart h3 {
  position: absolute;
  z-index: 2;
  color: var(--link-t-color);
}

.pie-chart svg {
  min-width: 140px;
  max-width: 197px;
  width: 100%;
}

.chart-text p {
  text-align: center;
  margin: 0;
  max-width: 197px;
}

.chart-text p:last-child {
  font-size: var(--fs-12);
}

.persona {
  margin-top: 24px;
}

.persona .card {
  max-width: 346px;
  padding: 16px;
}

.persona-picture {
  width: 199px;
  height: 199px;
  border-radius: 8px;
  overflow: hidden;
  margin-inline: auto;
  margin-block: 16px;
}

.persona-picture img {
  object-fit: cover;
  object-position: center;
}

.bio-project-persona {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.bio-project-persona:nth-child(2) {
  margin-top: 8px;
}

.bio-project-persona p {
  margin-top: 4px;
}

.user-testing .image-article {
  height: 160px;
}

.user-testing .image-article img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.figma {
  display: block;
}

/* Swiper gallery */

.swiper {
  width: 100%;
  height: 600px;
}

.swiper-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  height: auto;
  object-fit: cover;
  object-position: center;
}

.swiper-button-prev,
.swiper-button-next {
  color: var(--line-1) !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  color: var(--link-t-color) !important;
}

.swiper-pagination-bullet {
  background-color: var(--prim-t-color) !important;
  border-radius: 0 !important;
  width: 16px !important;
}

/* end Swiper gallery */

@media (max-width: 1024px) {
  .figma {
    display: none;
  }

  .swiper {
    width: 100%;
    height: 300px;
  }

  .swiper-slide {
    align-items: start;
  }
}

/* end Project Beback */

/* Galleries */

.grid-gallery img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.p1 {
  grid-area: p1;
}

.p2 {
  grid-area: p2;
}

.p3 {
  grid-area: p3;
}

.p4 {
  grid-area: p4;
}

.p5 {
  grid-area: p5;
}

.p6 {
  grid-area: p6;
}

.p7 {
  grid-area: p7;
}