:root {
--neutral-darkest: #222222;
--neutral-dark: #666666;
--neutral-light: #CCCCCC;
--neutral-lightest: #EEEEEE;
--accounting-green: #449611;
--compliance-blue: #148AA5;
--security-blue: #0C61B2;
--social-purple: #A05CC1;
--social-purple-50: rgba(160, 92, 193, 0.5);
--edtech-orange: #C65E47;
}


/* MOST BASIC OBJECTS */

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

body {
  font-family: "Outfit", system-ui;
  font-size: 18px;
  font-weight: 400;
  color: var(--neutral-darkest);

  min-height: 100%;
  /* width: 100%; */
  margin: 0;
  display: flex;
  flex-direction: column;
}




/* PORTFOLIO INDEX PAGE */

article {
  flex-grow: 1;
  margin: 0 auto;
  max-width: 70rem;
  padding: 3.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}




h1.portfolio-heading {
}

.portfolio-grid {
  display: grid;
  grid-template-columns: min-content min-content min-content;
  gap: 3.75rem 2.5rem;
  justify-content: center;
  margin-bottom: 12rem;
}

.portfolio-tile {
  display: grid;
  grid-template-columns: .75rem min-content;
  gap: 0 1rem;
  border: 1px solid var(--neutral-light);
  border-radius: .375rem;
  overflow: hidden;
}

.portfolio-grid a {
  text-decoration: none;
  border-radius: .375rem;
  box-shadow: 0px 2px 1px 1px rgba(0, 0, 0, 0.3);
  transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
}

.portfolio-grid a:hover {
  transform: scale(1.05);
  box-shadow: 2px 6px 6px 0px rgba(0, 0, 0, 0.2);

}


.tile-text {
  display: flex;
  flex-direction: column;
  margin: .5rem 0;
  gap: .5rem;
}


.tile-text .title {
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--neutral-darkest);

}

.tile-text .keywords {
  font-weight: 300;
  font-size: 1rem;
  color: var(--neutral-dark);
}

.tile-img {
  grid-row: 2;
  grid-column: 1 / 3;
  width: 328px;
}




/* CASE STUDY */

article.case-study {
}

article.case-study a {
  color: var(--neutral-darkest);
  transition: color 250ms ease;
  text-decoration: underline;
}

article.case-study a:hover {
  color: var(--security-blue);
}

.case-study-top {
  display: grid;
  grid-template-columns: .75rem 18rem 1fr;
  grid-template-areas:
    "stripe overview name"
    "stripe overview intro";
  column-gap: 1rem;
  margin-bottom: 4rem;

}

.case-study-stripe {
  width: .75rem;
  grid-area: stripe;
}

.case-study-overview {
  grid-area: overview;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.case-study-overview span {
  display: block;
}

.case-study-overview-fact .fact-label {
  text-transform: uppercase;
}

.case-study-overview-fact .fact-value {
  font-weight: 200;
}

.case-study-overview .overview-label {
  font-size: 1.5rem;
}


.case-study-name {
  grid-area: name;
  margin-bottom: 2rem;
}

.case-study-name span {
  display: block;
}

.case-study-name .name-title {
  font-size: 2.5rem;
}

.case-study-name .name-keywords {
  font-weight: 300;
}

.case-study-intro {
  grid-area: intro;
  font-weight: 300;
}

.case-study-body {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  font-weight: 300;
}

.case-study-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10%;

}

.case-study-row .row-right {
  order: 2;
}

.case-study-row .row-left {
  order: 1;
}


.case-study-row .row-text {
  flex-basis: 30%;
}

.case-study-row .row-text p {
  margin: 1rem 0;
}


span.img-description-title {
  font-size: 1.5rem;
  font-weight: 400;
}


.case-study-row .row-img {
  flex-basis: 60%;
}

.case-study-row .row-img img {
  width: 100%;
  box-shadow: 0 4px 4px rgba(0,0,0,.25)
}

/* SLICK CAROUSEL */

.case-study-row .row-carousel {
  flex-basis: 60%;
  /* flex-grow: 0; */
  max-width: 60%;
  /* overflow: hidden; */
}

.slick-image img {
  width: 100%;
}

.slick-prev:before, .slick-next:before {
  color: var(--neutral-dark) !important;
}


.info-list ul {
  margin: 0;
  padding: .5em 1em;
  border: 1px solid var(--neutral-lightest);
  border-radius: 6px;
  text-align: left;
}

.info-list li {
  list-style-type: none;
  margin-bottom: 1.5em;

}

.info-list li:last-child {
  margin-bottom: 0;
}

span.info-list-category {
  font-weight: 700;
  opacity: .75;
}



.back-to-portfolio-div {
  margin: 3.75rem auto;
}

.back-to-portfolio-button {
  font-size: 1.5rem;
  font-weight: 300;

  background-color: var(--neutral-darkest);
  color: #ffffff;
  border-radius: .375rem;
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .5rem 1rem;
  border: none;

  opacity: 0;
  transform: translateY(48px);

}


.back-to-portfolio-div a.back-to-portfolio-button {
  color: #ffffff;
  text-decoration: none;
  transition:
    opacity 500ms ease-out,
    transform 750ms ease-out,
    background-color 500ms ease-out;
}

.back-to-portfolio-div a.back-to-portfolio-button:hover {
  background-color: var(--neutral-dark);
  color: #ffffff;
}



.drop-in {
  opacity: 1;
  transform: translateY(0);
}



@keyframes drop-in-animation {
  0% {
  }
  40% {
    background-color: var(--neutral-darkest);

  }

  50% {
    background-color: var(--compliance-blue);
  }
  60% {
    background-color: var(--neutral-darkest);
  }

  100% {

  }
}


/* ABOUT PAGE */

article.about {
  /* margin: 0 auto;
  padding: 3.75rem 4rem;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 3.75rem; */
}

article h1 {
  margin: 0 auto 1.5rem auto;
  font-size: 2.5rem;
  letter-spacing: .125rem;
  text-align: center;
  font-weight: 400;
  padding: 0;
}



.about-header hr {
  width: 100%;
  height: 0px;
  margin: 2px 0;
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  grid-template-rows: auto 1fr;
}

.about-layout .summary {
  grid-column: 1;
  font-size: 1.5rem;
  font-weight: 300;
}

.about-layout .summary b {
  font-weight: 500;
}

.about-layout ul {
  margin: 0;
}


.about-layout .details {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.details .one-topic {
  display: grid;
  grid-template-columns: 2rem 1fr;
}

.details .topic-label {
  text-transform: uppercase;
  grid-column: 2;
}


.details .one-topic .icon {
  color: var(--neutral-dark);
  grid-column: 1;
}

.details .one-topic a {
  font-weight: 300;
  color: var(--neutral-darkest);
  /* text-decoration: none; */
  grid-column: 2;
  transition: color 250ms ease;
}

.details .one-topic a:hover {
  color: var(--security-blue);
}

.about-layout .story {
  font-weight: 300;
  grid-column: 2;
  grid-row: 1 / 3;
}

.about-layout .story p:first-child {
    margin-top: 0;
}

.about-layout .chuk-pic {
  grid-column: 3;
  grid-row: 1 / 3;
}

.chuk-pic img {
  width: 100%;
}

.chuk-pic .caption {
  font-weight: 300;
}


/* WRITING */

article.writing {
}

.writing-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.5rem;
}

.writing-layout h2 {
  font-size: 2rem;
  font-weight: 300;
  margin: 0;
}

.writing-layout a {
  color: var(--neutral-darkest);
}

.writing-ux {
}

.writing-etc {
}

.writing-academic {
}

/* FOOTER */

footer.main-footer {
  background-color: #000000;
  display: flex;
  gap: 2.5rem;
  padding: .5rem;
  justify-content: center;
  flex-shrink: 0;
}

footer.main-footer i {
  color: var(--neutral-light);
  font-size: 1.5rem;
}


/* colors for specific industries */

.accounting-color {
  color: var(--accounting-green);
}

.accounting-color-fill {
  background-color: var(--accounting-green);
  border-color: var(--accounting-green);
}

.compliance-color {
  color: var(--compliance-blue);
}

.compliance-color-fill {
  background-color: var(--compliance-blue);
  border-color: var(--compliance-blue);
}

.security-color {
    color: var(--security-blue);
}

.security-color-fill {
  background-color: var(--security-blue);
  border-color: var(--security-blue);
}


.social-color {
  color: var(--social-purple);
}

.social-color-fill {
  background-color: var(--social-purple);
  border-color: var(--social-purple);
}



.edtech-color {
  color: var(--edtech-orange);
}

.edtech-color-fill {
  background-color: var(--edtech-orange);
  border-color: var(--edtech-orange);
}




/* MEDIA QUERIES */

@media screen and (max-width: 1200px) {

.portfolio-grid {
    grid-template-columns: min-content min-content;
    gap: 2.5rem 2.5rem;
  }
}


@media screen and (max-width: 980px) {

/* ABOUT PAGE */

  .about-layout {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .about-layout .summary {
    grid-column: 2;
    grid-row: 1;
  }

  .about-layout .details {
    grid-column: 2;
    grid-row: 2;
  }

  .about-layout .story {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .about-layout .chuk-pic {
    grid-column: 1;
    grid-row: 1 /3;
  }

  .about-layout .chuk-pic span {
    display: none;
  }
}



@media screen and (max-width: 760px) {


/* PORTFOLIO GRID */

  .portfolio-grid {
      grid-template-columns: min-content;
      gap: 2rem 2rem;
      margin-bottom: 6rem;
    }

  .tile-img {
    width: 280px;
    /* width: 100%; */
  }

/* CASE STUDY */

  .case-study-top {
    grid-template-columns: .75rem 1fr;
    grid-template-areas:
      "name name"
      "stripe overview"
      "intro intro";
      row-gap: 2rem;
  }

  .case-study-name {
    margin: 0;
  }

  .case-study-body {
    gap: 6rem;
  }

  .case-study-row {
    flex-direction: column;
    gap: .75rem;
  }

  .case-study-row .row-right {
    order: inherit;
  }

  .case-study-row .row-left {
    order: inherit;
  }

  .case-study-row .row-text {
    order: 1;
  }

  .case-study-row .row-img {
    order: 2;
  }

  .case-study-row .row-carousel {
    flex-basis: 90%;
    flex-grow: 0;
    max-width: 90%;
  }

  /* ABOUT PAGE */

  .about-layout {
    grid-template-columns: 1fr;
    gap: 3.75rem;
  }

  .about-layout .summary {
    grid-row: 1;
    grid-column: 1;
  }

  .about-layout .details {
    grid-row: 3;
    grid-column: 1;
  }

  .about-layout .story {
    grid-row: 4;
    grid-column: 1;
  }

  .about-layout .chuk-pic {
    grid-row: 2;
    grid-column: 1;
    padding: 0 2rem;
  }

  .about-layout .chuk-pic img {
    display: block;
    margin: 0 auto;

    width: 100%;
    }

  .writing-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }


}