@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu,
nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
}

html {
  font-size: 10px;
}

body {
  background-color: #1b1b1b;
  color: white;
  font-family: "Inter", Helvetica, sans-serif;
  font-optical-sizing: auto;
  width: 100%;
  overscroll-behavior-x: none;
}
body.loading {
  height: 100vh;
  overflow: hidden;
}

main {
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  max-width: 160rem;
  margin: 0 auto;
}
@media only screen and (max-width: 600px) {
  main {
    background-color: #294757;
  }
}

p {
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin-bottom: 1rem;
}
p:last-of-type {
  margin-bottom: 0;
}

a {
  color: white;
}

a#scrollDown {
  top: calc(100vh - 10rem);
  position: absolute;
  z-index: 10;
  opacity: 0;
}
a#scrollDown svg {
  width: 2.5rem;
  fill: white;
}
a#scrollDown:hover svg {
  fill: #ffd1d4;
}
@media only screen and (max-width: 600px) {
  a#scrollDown {
    display: none;
  }
}

p em,
a:hover,
.diamond:hover span,
.diamond:hover + ul {
  color: #fff2c0;
}

/* Header */
header {
  align-items: flex-end;
  justify-content: center;
  display: flex;
  max-width: 1600px;
  padding: 0 5rem;
  width: 100%;
  z-index: 4;
}
header .wrapper {
  display: grid;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 300;
  grid-template-columns: 1fr 3fr 1fr;
  letter-spacing: 0.042rem;
  justify-items: center;
  max-width: 120rem;
  padding: 5rem 0 0;
  position: relative;
  width: 100%;
  z-index: 50;
}
header .logo {
  background: url("../images/maxhoy-logo.svg") no-repeat;
  background-size: cover;
  justify-self: left;
  height: 4rem;
  width: auto;
  aspect-ratio: 46/15;
  text-indent: -9999px;
}
header .logo img {
  height: 100%;
  width: auto;
}
header .title {
  flex: 1 1 auto;
  line-height: 1.2;
  position: relative;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
}
header .title span,
header .links a svg {
  display: block;
  color: #ffd1d4;
  font-weight: 300;
  font-size: 2rem;
}
header .links a:has(svg) {
  width: 17px;
}
header .links a:has(svg) svg {
  width: 100%;
}
header .links a:has(svg):hover svg {
  color: inherit;
}
header .links {
  align-items: center;
  display: grid;
  flex: 0 0 auto;
  gap: 0.5rem;
  justify-items: right;
  justify-self: right;
  grid-template-columns: min-content min-content;
  grid-template-areas: "phone linkedin " "email instagram ";
}
header#start {
  position: fixed;
  top: 0;
  z-index: 5;
  transition: all 0.3s;
  opacity: 0;
}
header#start.fixed {
  opacity: 1 !important;
  background: #294757;
  box-shadow: 0 0 10px 0 rgba(6, 17, 21, 0.3137254902);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
header#start.fixed #topHeader {
  padding: 0;
  /* max-width: 160rem; */
  transition: all 0.3s;
  width: 100%;
  justify-items: left;
  grid-template-columns: min-content auto min-content;
}
header#start.fixed .logo {
  max-height: 3rem;
}
header#start.fixed .title {
  color: white;
  font-size: 1.2rem;
  text-align: left;
}
header#start.fixed .title span {
  font-size: 1.6rem;
}
header#start.fixed .links {
  font-size: 1.2rem;
}
header#start.fixed .logo img {
  mix-blend-mode: luminosity;
}
header#start.fixed .title span {
  color: #ff9200;
}

@media only screen and (max-width: 600px) {
  header {
    padding: 0 2.5rem;
  }
  header .wrapper {
    grid-template-columns: min-content;
  }
  header .logo,
  header .links {
    justify-self: unset;
  }
  header .links {
    grid-template-columns: min-content min-content auto auto;
    grid-template-areas: "linkedin instagram phone email";
  }
  header#start {
    background: black url(../images/parallax/header-stars.png);
    background-size: contain;
    position: relative;
    opacity: 1;
  }
  header#start .wrapper {
    grid-template-columns: 1fr;
  }
}
/* Content */
.content,
.portfolio {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.content {
  position: relative;
  padding: 10rem 5rem;
  gap: 10rem;
  z-index: 3;
}

/* Glance */
#glanceWrapper {
  height: 180vh;
}

.eyebrow {
  font-size: 2rem;
  font-weight: 200;
  color: #ff9200;
  padding: 1rem;
  border: 5px #2d4f61 solid;
}

#glance {
  position: sticky;
  top: 0;
  display: grid;
  justify-items: center;
  grid-template: "header header header header header" "ux plus1 ui plus2 dev" "ux-l na1 ui-l na2 dev-l";
  grid-template-columns: 1fr auto 1fr auto 1fr;
  grid-template-rows: auto min-content auto;
  gap: 6rem 3rem;
  height: 100vh;
}
#glance header {
  grid-area: header;
  font-weight: 200;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6rem;
  justify-content: space-evenly;
}
#glance ul li {
  font-size: 1.6rem;
  line-height: 2.1rem;
  margin-bottom: 1rem;
  text-align: center;
}
#glance ul li:after {
  color: #ebb75c;
  display: block;
  content: "⌄";
  font-size: 2rem;
}
#glance ul li:last-child:after {
  content: none;
}
#glance .ux {
  grid-area: ux;
}
#glance .ux + ul {
  grid-area: ux-l;
}
#glance .ui {
  grid-area: ui;
}
#glance .ui + ul {
  grid-area: ui-l;
}
#glance .dev {
  grid-area: dev;
}
#glance .dev + ul {
  grid-area: dev-l;
}
#glance .plus {
  color: #ff9200;
  font-size: 2rem;
  font-weight: 200;
  align-self: center;
}
#glance .diamond {
  background-color: #2d4f61;
  display: inline-block;
  rotate: 45deg;
  box-shadow: inset 0px 0px 0px 1.5rem #294757;
  border: #ff9200 0.4rem inset;
  margin: 3rem;
  width: 10vw;
  height: 10vw;
  min-width: 100px;
  min-height: 100px;
}
#glance .diamond span {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 3rem;
  color: white;
  rotate: -45deg;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 600px) {
  #glanceWrapper {
    height: auto;
    margin-top: 0;
  }
  #glance {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 3rem;
    height: auto;
    width: 100%;
  }
}
/* Info */
.info {
  display: grid;
  align-items: flex-start;
  max-width: 120rem;
  align-self: center;
  width: 60%;
  text-align: center;
}
.info ul {
  font-weight: 400;
  color: #ebb75c;
  font-size: 2rem;
}
.info .copy {
  grid-area: copy;
  align-content: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.info .copy p:first-child {
  font-weight: 600;
}

#glance h3,
.info h3 {
  color: white;
  font-size: 3.2rem;
  font-weight: 200;
  line-height: 1.2;
  mix-blend-mode: plus-lighter;
  text-align: center;
  text-transform: uppercase;
}

@media only screen and (max-width: 600px) {
  #glance h3,
  .info h3 {
    font-size: 2rem;
  }
  .info {
    gap: 2.5rem;
    grid-template-columns: 1fr;
    grid-template-areas: "header" "copy";
    width: 100%;
  }
  .info ul {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.6rem;
    gap: 0.5rem;
    margin: 2.5rem 0 0;
  }
  .info ul li {
    background: #bc9c67;
    border-radius: 5px;
    color: #294757;
    padding: 0 3px;
    white-space: nowrap;
  }
}
/* Portfolio Header*/
.portfolio header {
  padding: 4rem;
}

.realwear-info {
  background: #292041;
  background-size: 25%;
  border-radius: 2rem;
  color: white;
  display: grid;
  grid-template-columns: 1fr 2.5fr;
  margin: 0 0 7.5rem;
  max-width: 120rem;
  overflow: hidden;
  justify-content: center;
}
.realwear-info .info-content {
  padding: 2rem;
}
.realwear-info .info-content img {
  float: left;
  max-width: 38px;
  margin-right: 1rem;
}
.realwear-info p {
  font-size: 1.4rem;
  line-height: 1.2;
}
.realwear-info p:first-of-type {
  font-weight: 600;
  margin-bottom: 1rem;
}
.realwear-info .img {
  background: 63% center no-repeat url(../images/realwear-worker.jpg);
  background-size: cover;
  padding: 2rem;
}

@media only screen and (max-width: 600px) {
  .realwear-info {
    margin: 0 0 3rem;
  }
}
/* Projects */
.project-wrapper {
  scroll-margin-top: 64px;
  align-items: center;
  color: #0c1216;
  background-color: #0c1216;
  display: flex;
  flex-direction: column;
  padding: 5rem 5rem;
  width: 100%;
}

#rw-cloud,
header#start.fixed.rw-cloud {
  --accent: #ccb3f9;
  color: #1e0050;
  background: #1e0050;
}

#rw-cloud picture {
  filter: drop-shadow(0 0 0.05rem #ccb3f9);
}

#realwear-one,
header#start.fixed.realwear-one {
  color: #0c1216;
  background: #0c1216;
}

#device-UI,
header#start.fixed.device-UI {
  color: #2c395a;
  background: #2c395a;
}

#coca-cola,
header#start.fixed.coca-cola {
  color: #4a0000;
  background: #4a0000;
}

#bbc,
header#start.fixed.bbc {
  color: #243a46;
  background: #243a46;
}

#currencies-direct,
header#start.fixed.currencies-direct {
  color: #39332d;
  background: #39332d;
}

#beatone,
header#start.fixed.beatone {
  color: #024355;
  background: #024355;
}

header#start.fixed.currencies-direct.beatone {
  background: linear-gradient(to right, #39332d 50%, #024355 50%);
}

#oggs {
  color: #4d4834;
  background: #4d4834;
}

#stitch {
  color: #4e4e4e;
  background: #4e4e4e;
}

header#start.fixed.oggs.stitch {
  background: linear-gradient(to right, #4d4834 50%, #4e4e4e 50%);
}

#polecat {
  color: #19052e;
  background: #19052e;
}

#saillofts {
  color: #33656f;
  background: #33656f;
}

#mclaren,
header#start.fixed.mclaren {
  --accent: #ff8000;
  color: #111314;
  background: #111314;
}
#mclaren .project-head h3,
header#start.fixed.mclaren .project-head h3 {
  color: #ff8000;
  mix-blend-mode: unset;
  opacity: 1;
}

#ncb,
header#start.fixed.ncb {
  color: #407ba5;
  background: #407ba5;
}
#ncb .wid li,
header#start.fixed.ncb .wid li {
  color: #1b1b1b;
}

header#start.fixed.polecat.saillofts {
  background: linear-gradient(to right, #19052e 50%, #33656f 50%);
}

#aboutWrapper {
  background: #10222c;
}

/* Project */
.project,
.wrapper,
.recommendation figure {
  display: grid;
  align-items: flex-start;
  gap: 4rem 4%;
  max-width: 120rem;
  width: 100%;
}

.project {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "header header" "image1 image1";
}
.project.grid-dm {
  grid-template-columns: 25% 47.7% 19.3%;
  grid-template-areas: "header copy copy" "image1 image1 image2";
}
.project.grid2 {
  grid-template-areas: "header header" "image1 image2";
}
.project.grid3 {
  grid-template-areas: "header header" "image1 image1" "image2 image3";
}
.project.grid4 {
  grid-template-areas: "header header" "image1 image2" "image3 image4";
}
.project.grid4 .carousel-images {
  display: contents;
}
.project.grid4 .carousel-dots {
  display: none;
}
.project h3,
.project p {
  color: white;
}
.project .copy {
  grid-area: copy;
}
.project .copy:has(.situation, .task, .action, .result) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 2rem;
}
.project .copy:has(.situation, .task, .action, .result) p {
  font-size: 1.4rem;
  margin-bottom: 0;
}
.project .copy:has(.situation, .task, .action, .result) p:not([class]),
.project .copy:has(.situation, .task, .action, .result) ul.wid {
  grid-column: 1/-1;
}
.project .copy:has(.situation, .task, .action, .result) .situation::before,
.project .copy:has(.situation, .task, .action, .result) .task::before,
.project .copy:has(.situation, .task, .action, .result) .action::before,
.project .copy:has(.situation, .task, .action, .result) .result::before {
  content: "";
  display: block;
  width: 2.6rem;
  height: 1.5rem;
  margin-bottom: 0.75rem;
  background-color: var(--accent, #ff9200);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: auto 100%;
          mask-size: auto 100%;
  -webkit-mask-position: left center;
          mask-position: left center;
}
.project .copy:has(.situation, .task, .action, .result) .situation::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E");
}
.project .copy:has(.situation, .task, .action, .result) .task::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 98 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0H55L98 70L45 140H0L53 70L10 0Z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 98 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0H55L98 70L45 140H0L53 70L10 0Z' fill='black'/%3E%3C/svg%3E");
}
.project .copy:has(.situation, .task, .action, .result) .action::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 168 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0H55L98 70L45 140H0L53 70L10 0Z' fill='black'/%3E%3Cpath d='M80 0H125L168 70L115 140H70L123 70L80 0Z' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 168 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0H55L98 70L45 140H0L53 70L10 0Z' fill='black'/%3E%3Cpath d='M80 0H125L168 70L115 140H70L123 70L80 0Z' fill='black'/%3E%3C/svg%3E");
}
.project .copy:has(.situation, .task, .action, .result) .result::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 19'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 19'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}
.project p:first-child {
  font-weight: 600;
}
.project .project-head {
  display: grid;
  grid-column-start: 1;
  grid-column-end: header;
  gap: 2rem 4%;
  grid-template-columns: auto;
  grid-template-areas: "header copy" "header wid";
}
.project .project-head h3 {
  grid-area: header;
}
.project .project-head ul.wid {
  grid-area: wid;
}
.project.grid-dm .project-head {
  grid-column-end: 4;
}

.wid,
.wid-inner {
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.2rem;
  gap: 0.2rem;
  margin: 0;
}
.wid li,
.wid-inner li {
  background: white;
  padding: 5px;
  white-space: nowrap;
}
.wid li:last-child,
.wid-inner li:last-child {
  border-radius: 0 5px 5px 0;
}
.wid li:first-child,
.wid-inner li:first-child {
  border-radius: 5px 0 0 5px;
}
.wid li.ux,
.wid-inner li.ux {
  background-color: #ecff2f;
}
.wid li.ux2,
.wid-inner li.ux2 {
  background-color: #4cff90;
}
.wid li.ui,
.wid-inner li.ui {
  background-color: #00f0e6;
}
.wid li.ui2,
.wid-inner li.ui2 {
  background-color: #00d4ff;
}
.wid li.dev,
.wid-inner li.dev {
  background-color: #75b1ff;
}
@media only screen and (max-width: 600px) {
  .wid,
  .wid-inner {
    font-size: 1.4rem;
    font-weight: 500;
  }
}

.project h3,
figcaption {
  grid-area: header;
  font-weight: 500;
  font-size: 2.4rem;
  text-transform: uppercase;
  opacity: 0.5;
  mix-blend-mode: plus-lighter;
}

@media only screen and (max-width: 1024px) {
  .project .project-head {
    grid-template-areas: "header" "copy" "wid";
  }
}
@media only screen and (max-width: 600px) {
  .content,
  .project-wrapper {
    padding: 3rem;
    gap: 3rem;
  }
  .project,
  .wrapper {
    gap: 2rem 4%;
  }
  .project .project-head {
    display: flex;
    flex-direction: column;
  }
  .project.grid4 {
    display: flex;
    flex-direction: column;
  }
  .project.grid4 .carousel-images {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }
  .project.grid4 .carousel-images::-webkit-scrollbar {
    display: none;
  }
  .project.grid4 .carousel-images picture {
    min-width: 100%;
    scroll-snap-align: start;
  }
  .project.grid4 .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.5rem 0 0;
    width: 100%;
  }
  .project.grid4 .carousel-dots button {
    background: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    height: 0.8rem;
    opacity: 0.3;
    padding: 0;
    transition: opacity 0.2s;
    width: 0.8rem;
  }
  .project.grid4 .carousel-dots button.active {
    opacity: 1;
  }
  .wid,
  .wid-inner {
    gap: 0.6rem;
  }
  .wid li,
  .wid li:first-child,
  .wid li:last-child,
  .wid-inner li,
  .wid-inner li:first-child,
  .wid-inner li:last-child {
    border-radius: 100px;
    padding: 5px 12px;
  }
  .project .copy:has(.situation, .task, .action, .result) {
    grid-template-columns: 1fr;
  }
  .project .copy:has(.situation, .task, .action, .result) .situation,
  .project .copy:has(.situation, .task, .action, .result) .task,
  .project .copy:has(.situation, .task, .action, .result) .action,
  .project .copy:has(.situation, .task, .action, .result) .result {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .project .copy:has(.situation, .task, .action, .result) .situation::before,
  .project .copy:has(.situation, .task, .action, .result) .task::before,
  .project .copy:has(.situation, .task, .action, .result) .action::before,
  .project .copy:has(.situation, .task, .action, .result) .result::before {
    flex-shrink: 0;
    margin-bottom: 0;
    margin-top: 0.3rem;
  }
}
.project img,
.project picture {
  height: auto;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.project img.img1,
.project picture.img1 {
  grid-area: image1;
}
.project img.img2,
.project picture.img2 {
  grid-area: image2;
}
.project img.img3,
.project picture.img3 {
  grid-area: image3;
}
.project img.img4,
.project picture.img4 {
  grid-area: image4;
}

/* Double project */
.double {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}
.double .project-wrapper {
  align-self: stretch;
}
.double .project-wrapper:first-child {
  align-items: flex-end;
}
.double .project-wrapper:last-child {
  align-items: flex-start;
}
.double .project-wrapper .project {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  flex: 1 1 auto;
  max-width: 55rem;
  gap: 2rem;
}

@media only screen and (max-width: 600px) {
  .double {
    flex-direction: column;
  }
}
/* Recommendation */
#realtime + .recommendation {
  padding-top: 0;
}

.project-wrapper:last-child.recommendation {
  background: url(../images/footer-foreground.svg) bottom center no-repeat;
  background-size: contain;
  padding-bottom: 18rem;
}

.recommendation figure {
  background-color: #292041;
  border-radius: 2rem;
  padding: 2rem;
  color: white;
  display: grid;
  grid-column-start: 1;
  grid-column-end: 3;
  gap: 2rem;
  grid-template-columns: 23.5% auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: "image quote" "cite quote";
}

.project-wrapper:last-child.recommendation figure {
  background-color: #10222c;
}

figure picture {
  grid-area: image;
  width: 6rem;
  border-radius: 50%;
  overflow: hidden;
}
figure picture img {
  height: auto;
  width: 100%;
}

figcaption {
  font-size: 1.8rem;
  grid-area: cite;
}
figcaption span {
  display: block;
  font-weight: 300;
  line-height: 1.2;
  margin-top: 1rem;
  text-transform: initial;
}

blockquote {
  grid-area: quote;
  font-style: italic;
  quotes: initial;
}
blockquote:before,
blockquote p:first-child:before {
  content: open-quote;
  float: left;
  font-size: 10rem;
  font-style: normal;
  font-weight: 600;
  line-height: 0.85;
  margin-left: -5rem;
  max-height: 3rem;
  opacity: 0.2;
  vertical-align: top;
  width: 5rem;
}
blockquote p:first-child:before {
  content: none;
}
blockquote p:last-of-type:after {
  content: close-quote;
  display: inline;
}

@media only screen and (max-width: 600px) {
  .project-wrapper:last-child.recommendation {
    padding-bottom: 9rem;
  }
  .recommendation figure {
    grid-template-columns: min-content auto;
    grid-template-areas: "quote quote" "image cite";
  }
  figcaption {
    align-self: center;
  }
  blockquote:before {
    content: none;
  }
  blockquote p:first-child:before {
    content: open-quote;
    margin-left: 0rem;
    font-size: 6rem;
    width: 4rem;
  }
}
/* Brands */
#brands {
  padding-top: 0;
  gap: 4rem;
}
#brands .wrapper {
  border: 5px inset #ff9200;
  background-color: rgba(255, 255, 255, 0.9490196078);
  border-radius: 2rem;
  padding: 5rem;
}
#brands p {
  text-align: center;
}
#brands .logos {
  display: grid;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  align-self: stretch;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
#brands .logos img {
  width: 100%;
  height: auto;
  max-width: 10rem;
  max-height: 7rem;
  -o-object-fit: contain;
     object-fit: contain;
  align-self: center;
  justify-self: center;
}

@media only screen and (max-width: 600px) {
  #brands .wrapper {
    padding: 4rem;
  }
  #brands .logos {
    gap: 3rem;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  }
}
/* Footer */
footer {
  flex-direction: column;
  align-items: center;
  padding: 4rem 0;
  align-self: stretch;
  width: 100%;
  background-color: #10222c;
  display: flex;
  position: relative;
  flex: 0 0 auto;
}
footer .container {
  align-items: center;
  display: grid;
  max-width: 130rem;
  padding: 0 5rem;
  width: 100%;
  gap: 0.5rem 2rem;
  grid-template-columns: min-content auto minmax(6rem, 16rem);
  grid-template-rows: auto;
  grid-template-areas: "linkedin copyright empty" "instagram contacts logo";
}
footer p {
  font-weight: 600;
  letter-spacing: 0.072rem;
  line-height: 1;
  margin-bottom: 0;
}
footer p a {
  margin-right: 1rem;
}
footer .contacts {
  grid-area: contacts;
  font-weight: 300;
}
footer .logo {
  align-self: self-end;
  grid-area: logo;
  height: auto;
  justify-self: end;
  mix-blend-mode: luminosity;
  max-height: 21px;
}

.linkedin,
.instagram {
  font-size: 24px;
  color: white;
}

.linkedin {
  grid-area: linkedin;
}

.instagram {
  grid-area: instagram;
}

@media only screen and (max-width: 600px) {
  footer .container {
    grid-template-columns: auto min-content min-content;
    grid-template-areas: " copyright linkedin instagram" " contacts logo logo";
    padding: 0 3rem;
  }
}
/* Parallax */
.parallax {
  aspect-ratio: 1/0.8;
  background: linear-gradient(180deg, rgb(0, 0, 0) 49%, rgba(0, 0, 0, 0) 50%);
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  z-index: 3;
}
.parallax > img,
.parallax > picture {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.parallax > img > img,
.parallax > picture > img {
  height: auto;
  width: 100%;
}
.parallax .sky,
.parallax .stars {
  top: 0;
  bottom: unset;
  z-index: 1;
}
.parallax .sun {
  z-index: 3;
}
.parallax .mountains {
  z-index: 5;
}
.parallax .hills3 {
  z-index: 6;
}
.parallax .hills2 {
  z-index: 7;
}
.parallax .hills1 {
  z-index: 8;
}
.parallax .foreground {
  z-index: 9;
}

@media only screen and (max-width: 600px) {
  .parallax {
    aspect-ratio: 1/1;
  }
  .parallax .foreground {
    filter: unset;
  }
}
/* Loading */
#moon {
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%) rotate(5deg);
  width: 10vw;
  max-width: 120px;
  left: 50%;
  opacity: 0.75;
  top: 50vh;
  z-index: 100;
}
@media only screen and (max-width: 600px) {
  #moon {
    display: none;
  }
}

body:not(.loading) #moon {
  opacity: 0;
}

/* RW One images */
#rw1-images {
  aspect-ratio: 3.42/1;
  position: relative;
  grid-area: image1;
}
#rw1-images picture {
  height: 25vw;
  max-height: 350px;
  width: auto;
  position: absolute;
}
#rw1-images picture img {
  height: 100%;
  width: auto;
}
#rw1-images #rw1-2 {
  left: 47%;
}
#rw1-images #rw1-3 {
  left: 38%;
}
#rw1-images #rw1-4 {
  left: 56%;
}
#rw1-images #rw1-5 {
  left: 29%;
}
#rw1-images #rw1-6 {
  left: 65%;
}
#rw1-images #rw1-7 {
  left: 20%;
}
#rw1-images #rw1-8 {
  left: 74%;
}
#rw1-images #rw1-9 {
  left: 58.8%;
}

body.loading .mountains {
  filter: brightness(0);
}
body.loading .hills3,
body.loading .hills2 {
  opacity: 0;
}
body.loading .sky {
  transform: translateY(3%);
}
body.loading .sun {
  transform: translateY(2%);
}/*# sourceMappingURL=styles.css.map */