* {
  box-sizing: border-box;
  margin: 0;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@font-face {
  font-family: against;
  src: url(Fonts/against/against\ regular.otf);
}

.nanum-myeongjo-regular {
  font-family: "Nanum Myeongjo", serif;
  font-weight: 400;
  font-style: normal;
}

.cormorant-garamond-light {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-style: normal;
}

.cormorant-garamond-regular {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: normal;
}

.cormorant-garamond-bold {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;

  /* font-style: italic; */
}

.dm-serif text-regular {
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;
}

.dm-serif text-regular-italic {
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: italic;
}

.cabin-normal {
  font-family: "Cabin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.jost-normal {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

html,
body {
  /* font-size: 0.85vmax; */
  font-size: 0.85rem;
  font-family: "Jost", sans-serif;
  font-weight: 400;


  max-width: 100vw;
  min-height: 100vh;

  opacity: 1;
  transition: opacity 400ms;

}

header {
  margin-top: 1rem;
  padding: 1rem 1.25rem 0rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h1 {
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 2.5rem;
}

.hide {
  opacity: 0;
}

h1#logo {
  font-family: "against";
  cursor:pointer;
}

h2 {
  padding-bottom: 2rem;
  font-size: 1.25rem;
}

a > h3 {

  text-underline-offset: 2px;
  text-decoration: underline;

}

p {
  font-weight: 300;
}

nav {
  display: flex;
  gap: 1rem;
}

a {
  text-decoration: none;
}

a:link,
a:visited {
  color: black;
}

a:hover {
  color: gray;
}

nav > a {
  color: currentColor;
  text-underline-offset: 2px;
  text-decoration: underline;
}

/* .line {

} */

.line img {
  width: 0.33vw;
  height: 90vh;
}

section.container {
  display: grid;
  grid-template-columns: 4fr 0.75fr 6fr;
  margin: 1.25rem;  /* defines the margin of the whole page except for header */

  max-height: 100vh;
  height: 85vh;
}

/* section.rightContainer {
  padding-bottom: 9%;

} */


section.left p.vision {
  font-size: 1.25rem;
  text-align: justify;
}

section.left {
  padding-right: 3.3rem;
}


footer {
  position: fixed;
  bottom: 1rem;
  /* width: 40vw; */
  width: 97vw;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  /* background-color: white; */
}

footer div a {
  display: grid;
}


section.rightLanding {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 4fr 6fr 3fr 2fr 0fr 0fr 0fr 0fr 0fr 0fr 0fr;
  /* gap: 1rem; /*set this to zero and style the rest to look like there is a cap*/
  cursor: e-resize;
  /* padding:  1rem 1rem; /* same here*/
  padding: 1rem 0.5rem; /*changed to fit the slide overflow system*/
  line-height: 1.2;
  height: 100%;

  transition: grid-template-columns 314ms;
}

div.projectInfoFigures {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(3, 1fr);
  /* padding: 1.34rem 0rem 1.34rem 0rem */
}

.figuresBottomPadding {
  padding-bottom: 1.34rem;
}

.figuresPadding {
  padding: 1.34rem 0rem 1.34rem 0rem;
}

section.rightProjectInfo {
  /* padding-left: 7rem; */
  /* padding-left: 13%; */
  padding-bottom: 10%;


  opacity: 1;
  transition: opacity 400ms;
}

ßrightProjectInfo .largeInitialPhoto {
  width: 100%;
}


section.rightProjectInfo .largeInitialVideoLandscape {
  max-width: 80%;
}

section.rightProjectInfo .largeFinalPhoto {
  width: 100%;
}

section.rightProjectInfo .largeFinalSquarePhotos img {
  /* aspect-ratio: 4/3;
  object-fit: cover;
  max-width: 100%; */

    max-width: 49%;
}



.largeFinalPhoto img {
  max-width: 100%;
}

.largeInitialPhoto img {
  max-width: 50%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* .largeInitialPhoto iframe {
  max-width: 50%;
  aspect-ratio: 3/4;
  object-fit: cover;
  height: 60vh;
  width: 30vw;
} */

div.projectInfoFigures img {
  max-width: 100%;
  aspect-ratio: 4/6;
  object-fit: cover;
}

section.rightLanding div {
  overflow: hidden;
  opacity: 1;
  transition: opacity 400ms;
  /* background-color: bisque; */
}

section.rightLanding img {
  /*max-width: 100%*/
  max-width: 100%;
  aspect-ratio: 4/6;
  /*     aspect-ratio: 4/5; */
  object-fit: cover;
  /*max-height: 80vh;*/
}

figure,
figcaption {
  width: 100%;

  padding: 0 0.5rem; /*changed to fit the slide overflow system*/
}

figcaption {
  max-width: 10rem;
  margin: 0.25rem 0 0 0;
}

.projectInfoHeader {
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

@media only screen and (width <= 600px) and (orientation: portrait) {
  html,
  body {
    /*font-size: 24px;*/
    font-size: 1.5vmax;
  }

  h1 {
    /*font-size: 2rem;*/
    font-size: 3vmax;
    font-weight: 300;
  }

  section.container {
    grid-template-columns: auto auto;
    height: auto;
    /* max-height: 10vh; */
    /* height: 15vh; */
    /* grid-template-rows: auto auto; */
  }

  section.left {
    padding-bottom: 4vh;
  }

  section.rightLanding {
    padding-bottom: 40vh;
  }

  /* footer a {
        display:contents;
  } */

  /* footer {
    padding-top: .5rem;
    padding-bottom: 1.5rem;
    background-color: white;

  } */

  div.websiteBy {
    text-align: right;
  }

/* 
  iframe {

    position: absolute; 
    top: 0; 
    left: 0; 
    width: 50vw; 
    height: 100%
  } */


  @media only screen and (width <= 600px) and (orientation: portrait) {
      .rightContainer {
      grid-column-start: 1;
      padding-bottom: 15%;

      


    }

    .rightProjectInfo {
      padding-bottom: 25%;
    }


    section.rightLanding {
      padding-bottom: 10vh;
    }

    iframe {

      width: 90vw!important;
    

    }

    div:has(> iframe) { 
      margin: 0%!important;
     }
/* 
    footer{

        background-color: white;


    } */

  }





  /* .line img {

    width: 0.5vw;
    height: auto;
} */
}