@charset "UTF-8";
html {
  font-size: 10px;
}

body {
  background-color: #1b1b1b;
  color: white;
  font-family: "Inter", Helvetica;
  width: 100%;
}
body.loading {
  height: 100vh;
  overflow: hidden;
}

article {
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  max-width: 160rem;
  margin: 0 auto;
}

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

a {
  color: white;
}

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: 100;
  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;
  height: 100%;
  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 i {
  display: block;
  color: #ffd1d4;
  font-weight: 300;
  font-size: 2rem;
}
header .links a:hover i {
  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 {
  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,
header#start.fixed .links a i {
  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;
}

#glance header h4,
#brands header h4,
#portfolio > header h4,
#aboutWrapper > header h4 {
  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;
  }
}
/* Info */
.info {
  display: grid;
  align-items: flex-start;
  max-width: 120rem;
  align-self: center;
  width: 60%;
  text-align: center;
}
.info .header {
  grid-area: header;
  font-weight: 400;
  font-size: 3.2rem;
  letter-spacing: 0;
  line-height: normal;
}
.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: #ffffff;
  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: 1024px) {
  h2#subtitle {
    margin-top: -10vh;
  }
}
@media only screen and (max-width: 600px) {
  #glance h3,
  .info h3 {
    font-size: 2rem;
  }
  h2#subtitle {
    margin-top: unset;
  }
  .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;
}
.portfolio header h2 {
  color: #191328;
  font-weight: 600;
  font-size: 8rem;
  font-size: clamp(4rem, 2.545rem + 4.545vw, 8rem);
  line-height: 0.5;
  text-transform: uppercase;
}

.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 {
  align-items: center;
  color: #0c1216;
  background-color: #0c1216;
  display: flex;
  flex-direction: column;
  padding: 5rem 5rem;
  width: 100%;
}

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

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

#app-store,
header#start.fixed.app-store {
  color: #29184d;
  background: #29184d;
}

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

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

#realtime,
#realtime + .recommendation,
header#start.fixed.realtime,
header#start.fixed.realrec {
  color: #382c5a;
  background: #382c5a;
}

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

#v-a,
header#start.fixed.v-a {
  color: #462437;
  background: #462437;
}

#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-color: #4d4834;
  background: linear-gradient(to right, #4d4834 50%, #4e4e4e 50%);
}

header#start.fixed.oggs.stitch {
  background-color: #4d4834;
}

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

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

#mclaren,
header#start.fixed.mclaren {
  color: #111314;
  background: #111314;
}

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.grid3hero {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "header header header" "image1 image1 image1" "image2 image3 image4";
}
.project h3,
.project p {
  color: white;
}
.project h3 span {
  white-space-collapse: true;
}
.project .copy {
  grid-area: copy;
}
.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;
}

.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 wid";
  }
  .project .project-head ul.wid {
    justify-self: center;
  }
}
@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 img {
  height: auto;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.project img.img1 {
  grid-area: image1;
}
.project img.img2 {
  grid-area: image2;
}
.project img.img3 {
  grid-area: image3;
}
.project img.img4 {
  grid-area: image4;
}
.project img.grid3hero img {
  transition: all 150ms linear;
}
.project img.grid3hero input {
  display: none;
}
.project img.grid3hero label:has(input[type=radio]):not(:checked) img:hover {
  cursor: zoom-in;
  filter: drop-shadow(0 0 0.25rem #ccb3f9) brightness(1.2) !important;
}
.project img.grid3hero label:has(input[type=radio]):checked {
  pointer-events: none;
  grid-area: image1;
}

/* 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 img {
  grid-area: image;
  width: 6rem;
  border-radius: 50%;
}

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 {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.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: 8;
  filter: brightness(0);
}

@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;
  }
}

/* RW One images */
#rw1-images {
  aspect-ratio: 3.42/1;
  position: relative;
  grid-area: image1;
}
#rw1-images img {
  height: 25vw;
  max-height: 350px;
  width: auto;
  position: absolute;
}
#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%;
}
#rw1-images #rw1-images + img {
  opacity: 0;
}

@media only screen and (max-width: 600px) {
  #moon {
    top: 30vh;
  }
}
body.loading .mountains {
  filter: brightness(0);
}
body.loading .hills3,
body.loading .hills2 {
  opacity: 0;
}
body.loading .parallax h1 {
  opacity: 0;
}
body.loading .sky {
  transform: translateY(3%);
}
body.loading .sun {
  transform: translateY(2%);
}/*# sourceMappingURL=styles.css.map */