/* Background elements */
#preloader {
  position: fixed;
  /* display: none; */
  width: 100vw;
  height: 100vh;
  background-color: #070707;
  z-index: 20;
}
.preloaderSVG {
  position: absolute;
  width: 100%;
  height: 100%;
}
.preloaderWrap {
  position: relative;
  text-align: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 75%;
  z-index: 5;
}
.preloaderLogo {
  font-size: 90px;
  font-weight: 800;
  line-height: 0.7;
}
.preloaderTagline {
  font-size: 30px;
  font-weight: 300;
}
#backgroundImage {
  background-color: hsla(0, 0%, 3%, 1);
  background-image: radial-gradient(
      at 32% 70%,
      hsla(235, 50%, 9%, 1) 0px,
      transparent 50%
    ),
    radial-gradient(at 81% 23%, hsla(235, 50%, 9%, 1) 0px, transparent 50%),
    radial-gradient(at 90% 82%, hsla(235, 37%, 33%, 0.8) 0px, transparent 50%);
  position: fixed;
  z-index: -1;
}
#backgroundStatic {
  background-image: url("../assets/images/Homepage/static.png");
  height: 100vh;
  width: 100vw;
}

/* Fonts */

body {
  font-family: "DM Sans", sans-serif;
  color: #f2f2f2;
  line-height: normal;
  text-wrap: pretty;
}
section,
footer {
  margin: 0 20px;
}
header {
  padding-top: 20px;
}
img {
  max-width: 100%;
}
a {
  color: #f2f2f2;
  text-decoration: none;
}
.pageTitle {
  font-size: 47px;
  font-style: normal;
  font-weight: 500;
  line-height: 41.243px;
  text-wrap: nowrap;
}
.sectionTitle {
  font-size: 25px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  margin-bottom: 13px;
}
.bodyTextLarge {
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}
.bodyTextMedium {
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
}
.bodyTextSmall {
  font-size: 8px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}
.bodyTextSpecial {
  font-size: 8px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  text-transform: uppercase;
}
.sneakyLink {
  font-size: 6px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  color: #f2f2f2;
  text-decoration: none;
  display: block;
}
.mainButton {
  position: relative;
  margin-top: 20px;
  display: inline-flex;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  gap: 4.825px;
  border-radius: 100px;
  border: 1px solid #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 300;
  line-height: 24.123px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f2f2f2;
  background-color: inherit;
  transition: 0.5s;
}
.mainButton:hover path {
  fill: #070707;
}

.mainButton:hover {
  cursor: pointer;
  color: #070707;
  background-color: #f2f2f2;
}

.rectangle {
  width: 10px;
  height: 10px;
  margin-bottom: 5px;
  background-color: #f2f2f2;
}
.textAlignRight {
  text-align: right;
}
.paragraphSpacing {
  margin-bottom: 5px;
}
.sectionSpacing {
  margin-bottom: 160px;
}
.topNav {
  display: flex;
  justify-content: space-between;
  z-index: 2;
  position: fixed;
  width: 100%;
}
.topNav div:first-child {
  padding-left: 20px;
}
.topNav div:last-child,
.mobileNavButton {
  padding-right: 20px;
}
#navLogo {
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
#mobileLogoSubtitle {
  font-size: 8px;
  font-style: normal;
  font-weight: 300;
}
.navContent.visible {
  opacity: 1;
  visibility: visible;
}
.navContent {
  height: 100%;
  position: fixed;
  background-color: #070707;
  width: 100%;
  z-index: 1;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: 1s;
  visibility: hidden;
}
.navContent a {
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  padding: 30px 0;
  padding-left: 20px;
  border-top: 1px solid #f2f2f2;
}
.navAnimation {
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: 50px;
  position: relative;
}
.navAnimation svg {
  margin: auto;
}
.navStaticBG {
  position: absolute;
  z-index: 4;
  height: 100%;
  top: 0;
}
#landingPage {
  height:90vh;
  height:90dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
#landingPageIntro {
  position: relative;
}
#landingPageIntro p {
  text-indent: 30px;
  max-width: 350px;
}
#landingPageIntro svg,
#aboutMeLanding svg {
  position: absolute;
  top: -20px;
}

#landingPageFoot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  margin-top: 35vh;
}

#scrollIcon {
  display: flex;
  justify-content: center;
  height: 72px;
  width: 72px;
  font-size: 10.588px;
  font-style: normal;
  font-weight: 400;
  line-height: 14.824px;
  text-transform: uppercase;
}
#scrollIcon circle {
  stroke-dasharray: 277;
  stroke-dashoffset: 227;
}

#landingPageAboutIntro {
  max-width: 70vw;
  margin-bottom: 50px;
}

#landingPageAboutImages img {
  border-radius: 10px;
}
.flexboxRow {
  display: flex;
  margin-bottom: 20px;
}
.aboutMiniText {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
  padding: 10px 0;
}
#landingPageProjects {
  border-top: 1px solid #f2f2f2;
  padding-top: 50px;
  margin: 0;
  margin-bottom: 160px;
}
.work #landingPageProjects {
  border-top: none;
  margin-top: 70px;
}
#landingPageProjects .flickity-viewport {
  min-height: 610px !important;
}
.projectCardText {
  padding: 0 10px;
}
#landingPageProjectsIntro {
  max-width: 70vw;
  margin: 0 20px;
  margin-bottom: 45px;
}
.projectCardHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.projectCardNumber {
  font-size: 8px;
  font-style: normal;
  font-weight: 300;
  text-align: right;
}
.projectCardTitle {
  font-weight: 700;
  margin-top: 20px;
}
.projectCard {
  width: 85%;
  height: fit-content;
  margin: 0 10px;
}
.projectCard a {
  display: block;
  overflow: hidden;
  transition: 0.5s;
}
.projectCard a:hover img {
  scale: 1.2;
}
.projectCard:first-of-type {
  padding-left: 20px;
}
.projectCard:last-of-type {
  padding-right: 20px;
}
.projectCard img {
  width: 100%;
  transition: 0.5s;
}
.projectCardDescription {
  max-width: 65vw;
  margin-top: 5px;
}
.projectCardTags {
  display: flex;
  margin-top: 10px;
}
.projectCardTags div {
  min-width: 50px;
  color: #070707;
  padding: 5px 10px;
  align-items: center;
  justify-content: center;
  border-radius: 90.588px;
  background: #fff;
  display: flex;
}
.projectCardTags div:not(last-of-type) {
  margin-right: 10px;
}
.projectCardTags p {
  font-weight: 600;
  color: #070707;
  text-align: center;
}
#contactBlock {
  text-align: center;
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#contactBlock h2 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.emailButton {
  margin-top: 30px;
}
#contactBlock .sectionTitle {
  font-size: 35px;
  margin-bottom: 0;
}
.socialButton {
  height: 50px;
  width: 50px;
  padding: 12px;
  margin: 10px 7px;
}
.socialButton svg {
  height: 100%;
  width: 100%;
}

.aboutMeImages {
  position: relative;
  margin-top: 120px;
  height: 85vh;
}
.aboutMeImage_1 {
  width: 35vh;
  position: absolute;
  top: 0;
  margin: auto;
  left: 0;
  right: 0;
}
.aboutMeImage_2 {
  width: 20vh;
  position: absolute;
  top: 500px;
  margin: auto;
  left: 0;
}
.aboutMeImage_3 {
  width: 20vh;
  position: absolute;
  top: 700px;
  margin: auto;
  right: 0;
}
#aboutMeText h3 {
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 5px;
}
#aboutMeLanding {
  margin-top: 160px;
}
#aboutMeLandingIntro {
  width: fit-content;
  margin: auto;
}
#aboutMeSkills {
  margin-right: 0;
  margin-left: 0;
}
#aboutMeSkills h2 {
  margin: 0 20px;
  margin-bottom: 40px;
}
#aboutMeSkills ul {
  display: flex;
  overflow: hidden;
  margin-bottom: 10px;
}
#aboutMeSkills li {
  margin: 0 9px;
  font-size: 13.099px;
  display: inline-flex;
  justify-content: center;
  border-radius: 22.344px;
  border: 1px solid #f2f2f2;
  padding: 10px 17px;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 300;
  line-height: 21.832px;
  letter-spacing: 0.393px;
  min-width: 150px;
  transition: 0.5s;
}
#aboutMeSkills li:hover {
  background-color: #f2f2f2;
  color: #070707;
  font-weight: 600;
}
#projectIntro {
  display: flex;
  flex-direction: column;
  margin-top: 160px;
  margin-bottom: 80px;
  border-bottom: solid 1px #f2f2f2;
  padding-bottom: 60px;
}
#projectIntro img {
  margin: 30px 0;
}
#projectIntro p {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
#projectIntro em,
.projectBodyText em {
  font-weight: 700;
}
#projectIntro p:not(:last-child),
.projectBodySpace {
  margin-bottom: 20px;
}
#projectBody {
  margin-right: 0;
  margin-left: 0;
}
.projectBodyText {
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  margin-right: 20px;
  margin-left: 20px;
}

.projectIntroFlex {
  display: flex;
  margin-top: 20px;
}
.projectIntroFlex p:first-of-type {
  margin-right: 50px;
}
.projectTitle {
  font-size: 43px;
  font-style: normal;
  font-weight: 400;
  line-height: 38.2px;
  text-transform: uppercase;
}
#projectBody img {
  margin-top: 30px;
  margin-bottom: 30px;
}

.projectTopSpace {
  margin-top: 100px;
}

.projectSubheading,
#projectBody h3 {
  margin-right: 20px;
  margin-left: 20px;
}
.projectSubheading p {
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.projectImg_Bleed {
  width: 100%;
}
.projectImgRow {
  display: flex;
  margin: 0 20px;
}
.projectImgRow.projectImgGrid {
  display: grid;
  margin: 0 20px;
  gap: 10px;
  margin-top: 30px;
  grid-template-columns: 1fr 1fr;
}
.projectImgRow.projectImgGrid img {
  width: 100%;
  margin-top: 0 !important;
}
.projectImgRow img {
  width: 50%;
}
.projectImgRow img:first-of-type {
  margin-right: 8px;
}
.projectVideo {
  margin: 0 20px;

}
.projectVideo img {
  width: 100%;
}
.projectVideo video {
  width: 100%;
}
.projectInlineImg {
  margin-bottom: 50px;
}
#projectBody {
  margin-bottom: 100px;
}
#projectBody h3 {
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
#landingPageProjects.projectMoreWork {
  margin-bottom: 80px;
}
.projectPage #landingPageProjects .flexboxRow {
  padding-top: 80px;
  margin: 0 20px 30px 20px;
  border-top: 1px solid #f2f2f2;
}
.desktopProjects {
  display: none;
}
.desktopNav {
  display: none;
}
.desktopNav a {
  padding: 5px 15px;
  transition: 0.5s;
}
.desktopNav a:not(:last-of-type) {
  margin-right: 15px;
}

.desktopNav a:hover {
  background: #f2f2f2;
  color: #070707;
  border-radius: 50px;
  font-weight: 400;
}
.landingPageAboutRedirectMobile {
  display: block;
}
.landingPageAboutRedirect {
  display: none;
}
.desktopAboutBG {
  margin: 0 auto;
  display: flex;
  width: 80vw;
  height: 50vh;
  justify-content: center;
  align-items: center;
}

#desktopWork {
  display: none;
  position: relative;
  height: 455vh;
}
.desktopWorkProjects {
  position: sticky;
  width: 100%;
  max-width: 1300px;
  margin: auto;
  height: 500px;
  top: 20%;
}
.desktopWorkProjects .mainButton {
  margin: 30px auto;
  display: block;
}
.projectTracker {
  position: absolute;
  right: 0;
  margin-right: 6%;
  height: 100%;
}

.projectTrackerLines {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.trackerArrow {
  position: absolute;
  right: -15px;
  top: -10px;
}
.projectTrackerLines .lines {
  width: 16px;
  height: 1px;
  background-color: #f2f2f2;
}
.projectTrackerLines .linesSpacer {
  width: 2px;
  height: 2px;
  background-color: #f2f2f2;
}
.workProjectsContainer {
  width: 70vw;
  max-width: 900px;
  height: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
}
.projectImage {
  width: 100%;
  height: 100%;
  position: absolute;
}

.projectImage a {
  display: block;
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
}

.projectImage img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: 0.5s;
}
.projectImage a:hover img {
  scale: 1.2;
  transition: 0.5s;
}
.projectImage:nth-of-type(1) {
  z-index: 5;
}

.projectImage:nth-of-type(2) {
  z-index: 4;
}
.projectImage:nth-of-type(3) {
  z-index: 3;
}
.projectImage:nth-of-type(4) {
  z-index: 2;
}
.projectImage:nth-of-type(5) {
  z-index: 1;
}
.workProjectTextContainer {
  position: absolute;
  z-index: 10;
  height: 100%;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.projectTextWrap {
  position: relative;
  overflow: hidden;
  width: 450px;
  height: 40%;
  z-index: 6;
}
.projectText {
  position: absolute;
  width: 100%;
  height: 100%;
}
.projectText {
  transform: translate(0px, 30px);
  opacity: 0;
}
.projectText.projectMazda {
  transform: translate(0px, 0px);
  opacity: 1;
}
.workProjectTextContainer h1 {
  font-size: 14px;
  font-weight: 700;
  line-height: 25px;
  text-transform: uppercase;
}
.projectText h2 {
  font-size: 50px;
  font-weight: 500;
  line-height: 1;
  margin-top: 0;
  margin: 10px 0;
}
.projectText .projectCardDescription {
  font-size: 14px;
  font-weight: 300;
  max-width: 350px;
}
.dekstopWorkLine {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-bottom: solid 1px #f2f2f2;
}
#landingPageProjectsIntro .flexboxRow .mainButton,
.projectPage #landingPageProjects .flexboxRow .mainButton {
  display: none;
}
.projectListedReasons {
  grid-column-start: 1;
  grid-column-end: 3;
  font-size: 18px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  margin-top: 30px;

}
.projectListedReasons p{
  margin-left: 5px;
}
#funkPersonas{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}
#funkPersonas img{
  width: 100%;
}
.imgTable{
  max-width: 90%;
}
.pageTitle {
  font-size: 45px;

}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 350px) {
  section,
  footer {
    margin: 0 10px;
  }
  .mobileNavButton svg {
    width: 25px;
  }
  .topNav div:first-child {
    padding-left: 10px;
  }
  .topNav div:last-child {
    padding-right: 10px;
  }
  .pageTitle,
  .projectTitle {
    font-size: 33px;
    line-height: 30.243px;
  }
  #projectIntro p {
    font-size: 10px;
  }
  .sectionTitle {
    font-size: 24px;
  }
  .bodyTextLarge {
    font-size: 10px;
  }
  #scrollIcon svg {
    width: 65px;
    height: 65px;
  }
  #landingPageAboutIntro,
  #landingPageProjectsIntro {
    max-width: 100vw;
  }
  #landingPageProjects {
    margin-bottom: 80px;
  }
  .aboutMiniText {
    margin-left: 10px;
  }
  #contactBlock .sectionTitle {
    font-size: 32px;
  }
  #aboutMeSkills h2 {
    margin-left: 10px;
    margin-right: 10px;
  }
  .work #landingPageProjects {
    margin-top: 0px;
  }
  .projectVideo {
    margin: 0 0px;
    width: 100%;
  }
  .pageTitle {
    font-size: 45px;

  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 550px) {
  #landingPageIntro {
    margin: 0 9%;
  }
  .pageTitle {
    font-size: 55px;
  }
  .projectCard {
    width: 65%;
  }
  #landingPageProjects .flickity-viewport {
    min-height: 800px !important;
  }
  .aboutMeImages {
    margin-top: 80px;
  }

  .work #landingPageProjects {
    margin-top: 120px;
  }
  .aboutMeImage_2 {
    left: 5vw;
  }
  .aboutMeImage_3 {
    right: 5vw;
  }
  #contactBlock .sectionTitle {
    font-size: 50px;
  }
  .bodyTextMedium,
  .mainButton {
    font-size: 12px;
  }
  .pageTitle,
  .projectTitle {
    font-size: 60px;
    line-height: 55px;
  }
  .sectionTitle {
    font-size: 32px;
  }
  .bodyTextLarge,
  #navLogo {
    font-size: 14px;
    max-width: 60vw;
  }
  #projectIntro p,
  .projectBodyText {
    font-size: 14px;
  }
  #projectIntro img {
    width: 100%;
  }
  .bodyTextSmall,
  #mobileLogoSubtitle {
    font-size: 10px;
  }
  #scrollIcon {
    width: 95px;
    height: 95px;
  }
  #scrollIcon svg {
    width: 75px;
    height: 75px;
  }
  .sneakyLink {
    font-size: 8px;
  }
  .bodyTextSpecial {
    font-size: 10px;
  }
  #landingPageIntro p {
    text-indent: 43px;
    max-width: 460px;
  }
  #aboutMeLandingIntro p {
    padding-left: 45px;
  }
  #projectBody h3 {
    font-size: 14px;
  }
  .projectListedReasons {
    font-size: 20px;
    flex-direction: row;
    justify-content: space-between;
  }

  
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  section,
  footer {
    margin: 0 40px;
  }
  #landingPageProjects .flickity-viewport {
    min-height: 800px !important;
  }
  .topNav div:first-child {
    padding-left: 40px;
  }
  .topNav div:last-child {
    padding-right: 40px;
  }
  #aboutMeSkills h2 {
    margin-left: 40px;
    margin-right: 40px;
  }

  #scrollIcon svg {
    width: 85px;
    height: 85px;
  }

  .projectCard {
    width: 45%;
  }

  #aboutMeSkills li {
    min-width: 180px;
    font-size: 16px;
  }

  .projectBodyText,
  .projectSubheading,
  .projectVideo,
  #projectBody h3 {
    margin-right: 0px;
    margin-left: 0px;
  }

  .projectImgRow {
    margin: 0 40px;
  }
  #projectIntro img {
    order: 3;
  }
  #projectIntro div:first-child {
    margin-top: 30px;
  }

  .projectTwoCol,
  .projectOneCol {
    display: grid;
    margin-right: 40px;
    margin-left: 40px;
    margin-bottom: 50px;
  }
  .projectOneCol {
    grid-template-columns: 1fr 1fr;
    grid-column-end: 2;
  }
  .projectTwoCol {
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 30px;
  }
  .projectOneCol.projectVideoTitle {
    margin-bottom: 0;
  }
  .projectGridRight {
    grid-column-start: 1;
  }
  .projectSubheading,
  #projectBody h3 {
    grid-column-end: 2;
  }
  .projectFlexRight {
    grid-column-start: 2;
  }
  #projectBody h3 {
    margin-bottom: 15px;
  }
  .projectContextRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  #landingPageIntro path {
    stroke-width: 1px;
  }
  .projectCardDescription {
    max-width: 30vw;
  }
  .work #landingPageProjectsIntro {
    margin-left: 40px;
    margin-right: 40px;
  }
  .projectImgRow.projectImgGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
    justify-content: space-evenly;
    margin: 0 0;
    margin-top: 30px;
  }
  #projectBody .projectImgRow.projectImgGrid img {
    width: 100%;
    margin: 0;
  }
  .projectTwoCol img {
    grid-column-end: 3;
    grid-column-start: 1;
    margin-top: 30px;
    margin-bottom: 50px;
  }
  .projectListedReasons {
    font-size: 25px;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
  }

}

/* Large devices (laptops/desktops, 850px and up) */
@media only screen and (min-width: 850px) {
  #landingPageFoot {
    margin-top: 27vh;
  }
  #landingPageIntro {
    display: flex;
    margin: 0 auto;
    justify-content: center;
  }
  #landingPageIntro .pageTitle {
    font-size: 80px;
    line-height: 68px;
    margin-bottom: 0;
  }
  #landingPageIntro p {
    align-self: flex-end;
    margin-left: -14%;
    max-width: 312px;
    line-height: 1.12;
  }
  #landingPageIntro svg {
    top: -6px;
    left: 6%;
  }
  #landingPageAboutIntro {
    display: grid;
    grid-template-columns: 40% 25% 25%;
    grid-gap: 5%;
    max-width: 100%;
    margin-bottom: 25px;
  }
  #landingPageAboutIntro p {
    justify-self: end;
    max-width: 30vw;
  }
  #landingPageAboutIntro p:last-of-type {
    grid-row-start: 1;
    grid-column-start: 3;
  }
  #landingPageAboutImages {
    display: grid;
    grid-template-columns: 40% 25% 25%;
    grid-gap: 5%;
  }
  #landingPageAboutImages .flexboxRow:first-of-type {
    grid-template-columns: 2fr 1fr;
    display: grid;
  }
  .landingPageAboutRedirect {
    grid-row: 2/3;
    grid-column: 1/3;
    padding-top: 50px;
  }
  #landingPageAboutImages .flexboxRow:nth-child(2) {
    grid-column: 2/4;
    grid-row: 1/3;
    justify-content: flex-end;
  }
  #landingPageAboutImages .flexboxRow:nth-child(2) img {
    max-height: 100vh;
    width: 100%;
  }
  .flexboxRow img {
    object-fit: cover;
  }
  .mobileProjectCarousel {
    display: none;
  }
  #landingPageProjects {
    margin-left: 40px;
    margin-right: 40px;
  }
  .desktopProjects {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
  }
  #landingPageProjectsIntro {
    margin-left: 0;
  }
  .projectCard a {
    max-height: 250px;
  }
  .projectCard img {
    height: 250px;
    object-fit: cover;
  }
  .projectCard:first-of-type,
  .projectCard:last-of-type {
    padding: 0;
  }
  .projectCard {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .projectCardDescription {
    max-width: 30vw;
  }
  .mobileNavButton {
    display: none;
  }
  .desktopNav {
    display: block;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
  }

  .landingPageAboutRedirectMobile {
    display: none;
  }
  .landingPageAboutRedirect {
    display: block;
  }
  .aboutMeImages {
    height: 100vh;
  }
  .aboutMeImage_1 {
    width: 40vh;
  }
  .aboutMeImage_2 {
    right: 40vw;
    width: 20vw;
  }
  .aboutMeImage_3 {
    left: 40vw;
    width: 20vw;
  }
  #aboutMeText .bodyTextLarge,
  #landingPageProjectsIntro .bodyTextLarge {
    max-width: 45vw;
  }
  .landingPageProjects .flexboxRow,
  .projectPage #landingPageProjects .flexboxRow {
    margin-left: 0;
    margin-right: 0;
  }
  .desktopAboutBG {
    border-radius: 25px;
    border: 1px solid #f2f2f2;
    background: rgba(190, 174, 255, 0.05);
    backdrop-filter: blur(25px);
  }

  .contactButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
  .contactButtons button {
    margin: 0 7px;
    height: 50px;
  }
  #contactBlock {
    margin: 0;
    height: 100vh;
    overflow: hidden;
  }
  .work #landingPageProjects {
    display: none;
  }
  #desktopWork {
    display: block;
  }
  #projectIntro p {
    width: 35vw;
  }
  .projectIntroFlex {
    margin-top: 0;
  }
  #landingPageProjectsIntro {
    max-width: 100%;
  }
  #landingPageProjectsIntro .flexboxRow,
  .projectPage #landingPageProjects .flexboxRow {
    justify-content: space-between;
  }
  #landingPageProjectsIntro .flexboxRow .mainButton,
  #landingPageProjects .mainButton.desktopBtn {
    margin-top: 0;
    display: flex !important;
  }
  #landingPageProjects .bodyTextLarge {
    max-width: 35vw;
  }
  
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  section,
  footer {
    margin: 0 100px;
  }
  .topNav div:first-child {
    padding-left: 100px;
  }
  .topNav div:last-child {
    padding-right: 100px;
  }
  .projectBodyText,
  .projectSubheading p {
    font-size: 16px;
  }
  .projectSubheading .sectionTitle {
    font-size: 40px;
  }
  #aboutMeSkills h2,
  .projectBodyText,
  .projectSubheading,
  .work #landingPageProjectsIntro,
  #landingPageProjects.projectMoreWork,
  #landingPageProjects {
    margin-right: 100px;
    margin-left: 100px;
  }
  #aboutMeText {
    margin-left: 12.5%;
  }
  #aboutMeText .bodyTextLarge,
  #landingPageProjectsIntro .bodyTextLarge {
    max-width: 35vw;
  }
  .landingPageAboutRedirect {
    max-width: 85%;
  }
  .projectCard a {
    max-height: 350px;
  }
  .projectCard img {
    height: 350px;
  }

  .about .pageTitle {
    font-size: 80px;
    line-height: 68px;
  }
  .aboutMeImage_1 {
    width: 50vh;
  }
  .aboutMeImages {
    height: 140vh;
  }
  .aboutMeImages {
    margin-top: 40px;
  }
  .aboutMeImage_3 {
    width: 18vw;
  }
  .projectCardDescription {
    max-width: 20vw;
  }
  .projectTwoCol p,
  .projectTwoCol .projectSubheading,
  #projectBody h3 {
    margin-left: 0;
    margin-right: 0;
  }

  .projectTwoCol,
  .projectOneCol {
    grid-template-columns: 1fr 1fr;
    margin-left: 15vw;
    margin-right: 15vw;
    grid-gap: 0 50px;
    margin-bottom: 100px;
  }

  .projectOneCol {
    grid-template-columns: 1fr 1fr;
    margin-left: 15vw;
    margin-top: 100px;
  }
  .projectOneCol p,
  .projectOneCol .projectSubheading,
  .projectOneCol h3 {
    margin-left: 0;
    margin-right: 0;
  }
  #projectIntro p:not(:last-child) {
    margin-bottom: 0;
  }
  .projectImgRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 50px;
    justify-content: space-evenly;
    margin: 0 15vw;
  }
  .projectImgRow img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
  .projectIntroBody {
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 100px;
  }
  .projectVideo {
    margin: 0 15vw;
  }
  .projectContext {
    display: grid;
    flex-direction: column;
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
  }
  #projectIntro {
    padding-bottom: 120px;
    margin-bottom: 100px;
  }
  #projectIntro img {
    margin-top: 160px;
  }
  .projectIntroFlex,
  #projectIntro div:first-child {
    margin-top: 0;
  }
  .projectContextRow {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .projectTopSpace {
    margin-top: 200px;
  }
  #projectBody img,
  .projectInlineImg {
    margin-top: 0;
    margin-bottom: 0;
  }
  .work .landingPageProjects .flexboxRow {
    padding-top: 100px;
  }
  .projectListedReasons {
    font-size: 30px;
    margin: 0px 0;
    margin-top: 100px;
  }
  .projectListedReasons.projectBodySpace {
    margin-bottom: 20px;
  }
  .imgTable{
    max-width: 100%;
  }
}