body {
  --color-almond: #fffaee;
  --color-charcoal: #353535;
}

/* Remove the navbar's default margin-bottom and rounded borders */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  max-width: 100%;
  margin: 0;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Non dynamic default background */
.navbar {
  margin-bottom: 0;
  border-radius: 0;
}

/* Add a gray background color and some padding to the footer */
footer {
  /* background-color: #f2f2f2; */
  padding: 25px;
}

body {
  font-family: proxima-nova, sans-serif;
  background-repeat: no-repeat;
  background-color: #fffaee;
  line-height: 1.5;
  color: #353535;
}

p {
  margin: 0;
  margin-bottom: 1.3em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: inherit;
  line-height: 1.25;
  font-weight: bold;
}

h1,
h5,
h6 {
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-size: 1rem;
}

h1 {
  font-size: 1.618rem;
  line-height: 1;
}

h2 {
  font-size: 4.236rem;
}

h3 {
  font-size: 2.618rem;
  /* font-weight: 500; */
}

h4,
button {
  font-size: 1rem;
  font-weight: 600;
  padding-top: 8px;
}

.flip-contrast * {
  color: rgb(0, 0, 0);
}

h5.on-dark {
  color: rgba(255, 255, 255, 0.2);
}

h5.on-gray {
  color: #ff6351;
}

h6 {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

h6 a {
  padding-left: 12px;
  padding-right: 12px;
}

p {
  color: rgba(255, 255, 255, 0.666);
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  /* padding-top: 8px; */
}

.right {
  /* text-align: right; */
}

.demo-img {
  z-index: 1;
  grid-row-start: 1;
  background-size: contain;
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Mobile demo styling */
.mobile-demo .demo-container,
.mobile-demo .demo-container .demo-img {
  background-size: contain;
}

.mobile-demo .demo-container,
.mobile-demo .demo-img {
  height: 90vh;
  margin-bottom: -12%;
}

.mobile-demo.phone-left .demo-img,
.mobile-demo.phone-left .demo-container {
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: span 1;
  justify-self: end;
  margin-right: -9.9vh;
}

.mobile-demo.phone-right .demo-img,
.mobile-demo.phone-right .demo-container {
  grid-column-start: 7;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: span 1;
  justify-self: start;
  margin-left: -5.9vh;
}

.mobile-demo .demo-container .demo-img {
  width: 100%;
  height: 100%;
}

/* Container styling */
/* Mobile demo chunk styling */
.mobile-demo .chunk {
  padding-top: 11.6vh;
  /* grid-column-end: span 4; */
}

.mobile-demo.phone-right .chunk {
  /* grid-column-start: 2; */
}

.mobile-demo.phone-left .chunk {
  /* grid-column-start: 8; */
}

/* Makes demo containers blend with background */
.demo-container {
  background-blend-mode: multiply;
  /* z-index: -1; */
}

.content-box {
  /* padding-top: 40px; */
  width: 100%;
  max-width: 100%;
  /* height: 100%; */
  min-height: 100%;
  display: grid;
  /* // grid row height 96  */
  /* // grid col heigh 78 */
  /* // grid gutter 24 */
  grid-template-columns: repeat(12, 78px);
  grid-gap: 24px;
  /* Make the grid be top left non stretched */
  justify-items: start;
  align-items: start;
  justify-content: center;
  align-content: start;
  overflow: hidden;
}

.content-box.pc-demo {
  padding-bottom: 6rem;
}

.content-box.dynamic-background {
  background-color: unset;
}

.content-box.content-background {
  background-size: cover;
  background-repeat: no-repeat;
}

.content-box .content-background {
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
}

.black-page-separator {
  width: 100%;
  height: 24px;
  background: black;
}

/* Chunk styling */
.rounded-bar {
  height: 0.25em;
  background: white;
  border-radius: 25px;
  width: 78px;
}

.chunk,
.chunk + .image-tag-container {
  padding-top: 32px;
}

.chunk + .image-tag-container {
  /* Offset the tag container by the height of the chunk rounded bar */
  margin-top: -0.25em;
}

.chunk {
  /* padding-top: 32px; */
  padding-bottom: 96px;
  z-index: 1;
}

.double-chunk .chunk.on-left {
  grid-column-start: 1;
  grid-column-end: 5;
}

.chunk.on-left,
.phone-right .chunk,
.pc-demo.right .chunk {
  grid-column-start: 2;
  grid-column-end: 6;
}

.double-chunk .chunk.on-right {
  grid-column-start: 9;
  grid-column-end: -1;
}

.chunk.on-right,
.phone-left .chunk,
.pc-demo.left .chunk {
  grid-column-start: 8;
  grid-column-end: -2;
}

.rounded-bar + .chunk-title,
.rounded-bar + .chunk-body,
.chunk-body + .link-out,
.rounded-bar + h2,
button + a {
  padding-top: 64px;
}

.chunk-title + .chunk-body,
a .chunk-body {
  padding-top: 12px;
}

h2 + h3 {
  padding-top: 64px;
}

h4 + h4 {
  /* When there are two link outs for a chunk */
  padding-top: 24px;
}

h3 + button {
  /* Has to be margin to not distort button */
  margin-top: 24px;
}

button + h4 {
  padding-top: 32px;
}

/* By page styles */
/* Home  */
/* Home positioning  */
#home-content-box {
  /* align-content: stretch; */
  max-height: calc(100% - 12px);
  min-height: calc(100% - 12px);
  grid-template-rows: auto auto 1fr;
  background-color: #0c0c0c;
}

#home-content-box h1,
#home-content-box .navigation-container {
  padding-top: 40px;
}

#home-content-box #guadelajara-link-container {
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row: 3;
  /* align-self: end; */
}

#home-content-box #home-header-name {
  grid-column-start: 1;
  grid-column-end: span 3;
  grid-row: 1;
}

#home-header-contact {
  grid-column-start: -4;
  grid-column-end: -1;
  grid-row: 1;
}

.navigation-container {
  grid-column-start: -5;
  grid-column-end: -1;
  grid-row: 1;
  text-align: right;
  width: 100%;
  align-self: end;
}

.navigation-container h6 {
  text-align: end;
}

.navigation-container a {
  display: inline-block;
  padding-left: 16px;
}

#home-content-box .slogan-chunk {
  grid-column-start: 2;
  grid-column-end: 10;
  grid-row: 2;
  margin-top: 64px;
  z-index: 1;
  /* padding-right: 5%; */
}

#home-content-box .slogan-chunk.bullet {
  grid-column: 1/span 1;
  grid-row: 2;
}

.portrait-container {
  grid-column-start: 5;
  grid-column-end: -1;
  width: 100%;
  position: relative;
  justify-self: left;
  grid-row: 3/span 1;
  align-self: end;
  /* padding-top: 20vh; */
}

.portrait-container .portrait {
  /* background: black; */
  display: block;
  position: absolute;
  right: 0px;
  bottom: 0px;
  /* Adjust height to achieve desired face size, then control circle with paddings */
  height: 50vh;
  /* Increase padding top to increase size of backdrop black circle, if clipping at top then need to increase padleft/right */
  /*	padding-top: 80px;*/
  /* left and right need to match to keep portrait centered */
  /* padding-left: 124px;
      padding-right: 124px; */
}

/* Code for America */
/* Visa */
.pc-demo .chunk {
  padding-top: 4.5vh;
}

.demo-container {
  justify-self: stretch;
}

.pc-demo.left .demo-container,
.pc-demo.left .demo-img {
  /* background-size: cover; */
  /* background-position: right 0; */
  grid-column-start: 1;
  grid-column-end: 7;
  /* Compensations for image filling more space than 'true content' */
  margin-bottom: -50vh;
  margin-right: -82px;
  justify-self: right;
}

.pc-demo.right .demo-container,
.pc-demo.right .demo-img {
  /* background-size: cover; */
  /* background-position: right 0; */
  grid-column-start: 7;
  grid-column-end: -1;
  /* Compensations for image filling more space than 'true content' */
  margin-bottom: -90%;
  margin-left: -90px;
  /* margin-right: -82px; */
  justify-self: left;
}

.pc-demo.left .demo-container,
.pc-demo.left .demo-img,
.pc-demo.right .demo-container,
.pc-demo.right .demo-img {
  height: 136vh;
}

.pc-demo .demo-container,
.mobile-demo .demo-container {
  mix-blend-mode: multiply;
}

#visa-box .demo-img {
  background-image: url("macbook_visa.png");
}

#code-for-america-box .demo-img {
  background-image: url("macbook_visa.png");
  /* background-image: url("screenshot_cfa.png"); */
}

#code-for-america-box .image-tag-container {
  padding-top: 10vw;
}

/* Lettuce */
/* #lettuce-box .chunk { */
/* grid-column: 3 / 7; */
/* } */
#lettuce-box .demo-img {
  background-image: url("iphone_lettuce.png");
}

#lettuce-box .demo-container {
  /* background-image: url("iphone_lettuce.png"); */
}

#grindr-box .demo-img {
  background-image: url("iphone_grindr.png");
}

#grindr-box .demo-container {
  /* background-image: url("iphone_grindr.png"); */
}

#grindr-box .chunk-body {
  color: rgba(0, 0, 0, 0.5);
}

/* Sydney */
#sydney-box {
  background-color: #ff6351;
  min-height: 50vh;
}

.content-box.half-box {
  height: 50%;
  min-height: 50%;
  justify-content: center;
  align-items: center;
  align-content: center;
  /* grid-template-rows: [margin-top] auto repeat(3, 96px) [margin-bot] auto; */
  text-align: center;
  /* grid-column: 4 / -4; */
}

.content-box.half-box .emphasized {
  color: white;
}

.content-box.half-box div {
  grid-column: 2/-2;
  justify-self: stretch;
}

.content-box.half-box .chunk {
  padding: 0;
}

/* About */
#about-box {
  /* Measured from spec: */
  /* height: 104vw;  */
  /* What seems a bit better: */
  /* height: 90vw; */
  min-height: 90vw;
  background-color: #0c0c0c;
}

#about-box * {
  z-index: 1;
}

.scrolling-content-background,
.fading-content-background {
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  z-index: 0;
}

.scrolling-content-background img,
.fading-content-background img {
  width: 100%;
  display: block;
}

#about-box .chunk {
  grid-column-start: 1;
  grid-column-end: 5;
  /* padding-top: 13vh; */
  padding-bottom: 48px;
}

@media only screen and (min-width: 600px) {
  #about-box .chunk,
  #about-box .chunk + .image-tag-container {
    /* padding-top: 68vh; */
    padding-top: 40vw;
  }
}
.magazine-container {
  /* padding-top: 44vh; */
  grid-column: 1/-1;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(12, 78px);
  grid-gap: 24px;
  padding-bottom: 96px;
}

.magazine-container p {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.333);
}

.magazine-container a {
  color: white;
}

.magazine-container a:hover {
  text-decoration: underline;
  color: white;
  opacity: 1;
}

@media only screen and (min-width: 600px) {
  .magazine-container .magazine-column-container:nth-child(1) {
    /* padding-right: 146px; */
    grid-column-start: 1;
    grid-column-end: span 5;
  }
  .magazine-container .magazine-column-container:nth-child(2) {
    grid-column-start: 7;
    grid-column-end: span 5;
  }
}
.magazine-link-out {
  grid-column-start: 7;
  grid-column-end: span 5;
}

.magazine-container .magazine-column-container:last-child {
  padding-right: 0px;
}

#about-box .image-tag-container p {
  text-align: right;
}

.image-tag-container {
  grid-column: -7/-2;
  width: 100%;
  /* padding-top: 9vw; */
}

.image-tag-container p {
  /* text-align: right; */
}

.image-tag-container.on-bright {
  color: rgba(0, 0, 0, 0.3333);
}

/* Writing */
#writing-box.content-background {
  /* background-image: url("background_writing.png");
      background-size: contain;
      background-position: center top;
      min-height: 58vw; */
  /* height: 100%; */
}

#writing-box .chunk {
  padding-top: 36vw;
  padding-bottom: 96px;
}

/* Talks */
#talks-box.content-background {
  background-image: url("background_talks.png");
  background-size: contain;
  background-position: center top;
  min-height: 68vw;
}

#talks-box #writing-chunk {
  margin-top: -24px;
}

#talks-box .chunk {
  padding-top: 52vw;
}

button {
  background: none;
  border-radius: 40px;
  /* border: none; */
  border: 2px solid black;
  /* height: 5em; */
  /* width: 18em; */
  color: white;
  padding: 0 2em;
  text-align: center;
  line-height: 4;
  /* text-decoration: none; */
  /* margin: 4px 2px; */
  cursor: pointer;
  outline: none;
}

.pc-demo,
.mobile-demo {
  grid-auto-flow: dense;
  align-content: center;
}

/* World  */
/* transition control */
a {
  /* display: block; */
  -webkit-transition: opacity 200ms ease-in-out;
  -moz-transition: opacity 200ms ease-in-out;
  -o-transition: opacity 200ms ease-in-out;
  -ms-transition: opacity 200ms ease-in-out;
  transition: opacity 200ms ease-in-out;
}

a > * {
  opacity: inherit;
}

a .animated-arrow {
  padding-left: 0.5em;
  position: absolute;
}

a:hover .animated-arrow {
  padding-left: 1.5em;
}

.animated-arrow {
  -webkit-transition: padding-left 200ms ease-in-out;
  -moz-transition: padding-left 200ms ease-in-out;
  -o-transition: padding-left 200ms ease-in-out;
  -ms-transition: padding-left 200ms ease-in-out;
  transition: padding-left 200ms ease-in-out;
}

.dynamicBackground.been-loaded {
  -webkit-transition: background-color 100ms linear;
  -moz-transition: background-color 100ms linear;
  -o-transition: background-color 100ms linear;
  -ms-transition: background-color 100ms linear;
  transition: background-color 100ms linear;
}

.contact-me,
[href] {
  cursor: pointer;
}

.grid-gap {
  width: 100%;
  height: 100%;
}

.horizontal-grid-gap {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-end: span 1;
}

#about-box .horizontal-grid-gap {
  height: 9vh;
}

/* Grid is described as
grid-template-columns: repeat(12, 78px);
grid-gap: 24px;
Therefore we have 4 dimensions to use:
1/3 -  4*78 +  3*24 = 384
2/3 -  8*78 +  7*24 = 792
1/2 -  6*78 +  5*24 = 588
1/1 - 12*78	+ 11*24 = 1200 (only horizontal)

Lowest common denominator is 1/6th, so to find a row height
(width_of_grid) * (1/6) * (5/7) = 142.857142857


*/
::selection {
  background: #fbff7c;
  color: inherit;
}

body {
  font-family: proxima-nova, sans-serif;
  background-repeat: no-repeat;
  background-color: #fffaee;
  line-height: 1.5;
  color: #353535;
}

h2,
h3,
h4 {
  font-family: "Baskervville", serif;
  font-weight: normal;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3rem;
}

h1,
h5 {
  font-size: 1rem;
  letter-spacing: 2px;
}

h1 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

h5 {
  font-variant: all-small-caps;
  font-weight: 500;
}

p {
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0px;
  line-height: 1;
}

.photo-content-box {
  grid-auto-flow: row dense;
  grid-template-rows: auto;
  /* grid-auto-rows: 142.857142857px; */
}

.photo-container {
  width: 100%;
  height: 100%;
  line-height: 0;
}

.photo-container img {
  width: 100%;
}

/* Region intro styling */
.intro-content-box {
  /* min-height: 50%; */
  align-content: start;
  justify-content: center;
  row-gap: 0;
  padding-top: 4rem;
  padding-bottom: 10rem;
}

.header-name {
  grid-column-start: 1;
  grid-column-end: span 3;
  /* justify-self: center;
    text-align: center; */
}

.slogan {
  grid-column-start: 2;
  grid-column-end: -2;
  justify-self: center;
  text-align: center;
  padding-top: 10rem;
}

.photography-navigation {
  grid-column-start: 4;
  grid-column-end: span 6;
  justify-content: center;
  display: flex;
  width: 100%;
}

.photography-navigation a {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.contact {
  justify-self: end;
  grid-column-start: -4;
  grid-column-end: -1;
  display: flex;
}

/* End region intro styling */
.section-separator {
  min-height: 50%;
  align-items: center;
  align-content: center;
  justify-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 10rem;
  margin-bottom: 10rem;
  row-gap: 0;
}

.section-separator div {
  grid-column-start: 3;
  grid-column-end: -3;
}

.section-contact {
  padding-top: 1.25rem;
}

.content-box {
  min-height: 0%;
}

button img {
  height: 1.5rem;
}

button {
  background: #000000;
  border-radius: 40px;
  border: none;
  height: 3em;
  width: 3em;
  color: white;
  padding: 0;
  text-align: center;
  line-height: 0;
  /* text-decoration: none; */
  /* margin: 4px 2px; */
  cursor: pointer;
  outline: none;
}

.contact-box a ~ a {
  padding-left: 1.5rem;
}

/* Made so material icons size correctly within other text blocks */
span.material-icons,
.contact-icon {
  font-size: 1rem;
  height: 1rem;
  vertical-align: middle;
}

.section {
  grid-auto-flow: dense;
  grid-row-gap: 0;
}

.section .photo img {
  width: 100%;
}

.section div {
  width: 100%;
  height: 100%;
}

.text-right {
  text-align: right;
}

.bracket-box {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  /* background-color: #ffaaaa99; */
  z-index: -1;
}

.bracket-box .top-right {
  position: absolute;
  top: 2.5%;
  right: calc(50% - 672px);
}

.bracket-box .bot-right {
  position: absolute;
  bottom: 2.5%;
  /* right: 10%; */
  right: calc(50% - 672px);
}

.bracket-box .bot-left {
  position: absolute;
  bottom: 2.5%;
  left: calc(50% - 672px);
}

.bracket-box .top-left {
  position: absolute;
  top: 2.5%;
  left: calc(50% - 672px);
}

.bracket-box h1 {
  font-size: 4rem;
  font-family: "Baskervville", serif;
  /* text-shadow: -2px 0 #fffaee, 0 2px #fffaee, 2px 0 #fffaee, 0 -2px #fffaee; */
  -webkit-text-stroke: 3px #fffaeb;
}

a h5 {
  /* text-decoration: underline; */
}

.photo-group {
  display: grid;
  grid-template-columns: repeat(12, 78px);
}

.photo-group {
  grid-column: 1/span 12;
  width: 100%;
  max-width: 100%;
  /* height: 100%; */
  min-height: 100%;
  display: grid;
  /* // grid row height 96  */
  /* // grid col heigh 78 */
  /* // grid gutter 24 */
  grid-template-columns: repeat(12, 78px);
  grid-gap: 24px;
}
.photo-group.three-diagonal-photos > :nth-child(2) {
  margin-top: 8rem;
}
.photo-group.three-diagonal-photos > :nth-child(3) {
  margin-top: 16rem;
}
.photo-group + .photo-group {
  margin-top: 6rem;
}

/* 274.275 */
.photo-container-horiz-1_3 {
  grid-column-end: span 4;
  grid-row-end: span 2;
}

/* 565.713 */
.photo-container-horiz-2_3 {
  grid-column-end: span 8;
  grid-row-end: span 4;
}

.photo-container-horiz-1_2 {
  grid-column-end: span 6;
  grid-row-end: span 3;
}

.photo-container-horiz-1_1 {
  grid-column-end: span 12;
  grid-row-end: span 6;
}

.photo-container-vert-1_2 {
  grid-column-end: span 6;
  grid-row-end: span 6;
}

/* Apply custom cursor globally */
body,
[href] {
  cursor: none;
}
body.regular-cursors,
[href].regular-cursors {
  cursor: auto;
}

.inner-cursor,
.outer-cursor {
  position: fixed;
  border-radius: 50%; /* Make it a circle */
  pointer-events: none;
  transform: translate(-50%, -50%); /* Center the cursor */
  z-index: 1;
}
.inner-cursor.hide,
.outer-cursor.hide {
  visibility: hidden;
}

.inner-cursor {
  width: 1rem;
  height: 1rem;
  background-color: var(--color-almond);
  mix-blend-mode: difference;
  transition: width 0.5s ease, height 0.5s ease;
}
.inner-cursor .cursor-text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the text */
  color: var(--color-almond);
  opacity: 0; /* Start invisible */
}
.inner-cursor.hovering-clickable {
  background-color: var(--color-almond);
  width: 8rem;
  height: 8rem;
  mix-blend-mode: difference;
}
body:not(.takeover-active) .inner-cursor.hovering-takeover-clickable {
  background-color: #353535;
  width: 8rem;
  height: 8rem;
  mix-blend-mode: normal;
}
body:not(.takeover-active) .inner-cursor.hovering-takeover-clickable .cursor-text-container {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 0.1s;
  /* Keyframes for fade-in animation */
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.outer-cursor {
  width: 5rem;
  height: 5rem;
  transition: width 0.5s ease, height 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;
}
.outer-cursor.hovering-img {
  opacity: 0;
}
.outer-cursor.hovering-clickable {
  opacity: 0;
}

.outer-cursor {
  display: none;
  top: 50%;
  left: 50%;
  pointer-events: none;
}

.outer-cursor::before,
.outer-cursor::after {
  content: "";
  position: absolute;
  background-color: #353535; /* You can change the color here */
}

.outer-cursor::before {
  /* Vertical line */
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.outer-cursor::after {
  /* Horizontal line */
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.animated-underline {
  --underline-color: $charcoal;
  background: linear-gradient(#353535, #353535);
  background-position: 0 85%;
  background-repeat: no-repeat;
  background-size: 100% 0.07em;
  display: inline-block;
}
.animated-underline > * {
  display: inline-block;
}

.animated-underline:hover {
  animation: animated_underline_keyframes 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes animated_underline_keyframes {
  0% {
    background-position-x: 100%;
    background-size: 100% 0.07em;
  }
  50% {
    background-position-x: 100%;
    background-size: 0 0.07em;
  }
  51% {
    background-position-x: 0;
    background-size: 0 0.07em;
  }
  to {
    background-position-x: 0;
    background-size: 100% 0.07em;
  }
}
.vertical-accessibility {
  position: relative;
}
.vertical-accessibility::before {
  content: "";
  position: absolute;
  top: 50%; /* Start from the middle of the element */
  left: 0;
  transform: translateY(-50%); /* Center vertically */
  width: 100%; /* Full width of the parent <a> */
  min-height: 48px; /* Ensure a minimum height of 48px */
  height: 100%;
  background-color: transparent; /* Keep it invisible */
}

.photography-navigation a.animated-underline {
  background-position-y: 98%;
}

.moment-content-box {
  margin-top: 6rem;
  margin-bottom: 6rem;
  justify-items: center;
  align-items: center;
  --text-container-horizontal-mobile-margin: 1.5rem;
}
.moment-content-box > div {
  grid-row: 1/span 1;
}
.moment-content-box .video-container {
  grid-column: 2/-2;
}
.moment-content-box .video-container video {
  mix-blend-mode: multiply;
}
.moment-content-box .text-container-2,
.moment-content-box .text-container-3 {
  margin-top: 9rem;
}
.moment-content-box .text-container-1 {
  grid-column: 2/span 4;
  justify-self: start;
}
@media only screen and (max-width: 600px) {
  .moment-content-box .text-container-1 {
    grid-column: 1/span 8;
    margin-left: var(--text-container-horizontal-mobile-margin);
  }
}
.moment-content-box .text-container-2 {
  grid-column: 5/span 3;
  justify-self: start;
}
@media only screen and (max-width: 600px) {
  .moment-content-box .text-container-2 {
    grid-column: 3/-3;
    justify-self: center;
  }
}
.moment-content-box .text-container-3 {
  grid-column: 8/13;
  justify-self: end;
}
@media only screen and (max-width: 600px) {
  .moment-content-box .text-container-3 {
    grid-column: 3/13;
    margin-top: 16rem;
    margin-right: var(--text-container-horizontal-mobile-margin);
  }
}
.moment-content-box .clickable-map {
  grid-column: 2/-2;
  z-index: 1;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 600px) {
  .moment-content-box .clickable-map {
    grid-column: 1/-1;
  }
}
.moment-content-box h3 {
  font-style: italic;
  text-transform: uppercase;
}
@media only screen and (max-width: 600px) {
  .moment-content-box h2,
  .moment-content-box h3 {
    text-decoration: underline;
  }
}

body.takeover-active {
  overflow: hidden;
}
body.takeover-active .form-takeover-on-click {
  pointer-events: none;
}
body,
[href] {
  --takeover-size-transition-duration: 2.5s;
  --takeover-translation-transition-duration: var(
    --takeover-size-transition-duration
  );
  --takeover-transition-style: cubic-bezier(0.5, 0, 0, 1);
}

.overlay-content {
  z-index: 1;
}
.overlay-content.takeover-active {
  color: white;
  /* Keyframes for fade-in animation */
}

#animated-takeover {
  will-change: clip-path;
  position: fixed;
  grid-template-columns: 1fr repeat(12, 78px) 1fr;
  grid-template-rows: auto 1fr;
  row-gap: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  background-color: #353535;
  transition: clip-path var(--takeover-translation-transition-duration) var(--takeover-transition-style);
}
#animated-takeover h1,
#animated-takeover h2,
#animated-takeover h3,
#animated-takeover h4,
#animated-takeover h5 {
  color: var(--color-almond);
}
#animated-takeover .animated-underline {
  background-image: linear-gradient(#fffaee, #fffaee);
}
#animated-takeover .animated-takeover-header {
  grid-column: 1/span 4;
  justify-self: left;
  padding-top: 4rem;
  padding-left: 4rem;
  padding-bottom: 4rem;
}
#animated-takeover .animated-takeover-header h5 {
  color: #fffaee;
}
#animated-takeover #typeform-wrapper {
  grid-column: 1/-1;
  width: 100%;
  height: 100% !important;
  opacity: 0;
}
#animated-takeover #animated-takeover-background {
  --full-size: calc(max(100vw, 100vh) * 1.414);
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #353535;
  opacity: 1;
}
#animated-takeover.hide #animated-takeover-background {
  transition: none; /* Make the transition back to regular size instant */
}
#animated-takeover > * {
  opacity: 0;
}
#animated-takeover.show {
  visibility: unset;
}
#animated-takeover.show > * {
  animation: fadeIn 2s ease forwards;
  animation-delay: 0.2s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#animated-takeover #exit-button {
  grid-column: -2/span 1;
  align-self: center;
  justify-self: end;
  margin-right: 4rem;
}

@media only screen and (max-width: 600px) {
  /* For mobile phones: */
  html,
  body {
    font-size: 16px;
  }
  p {
    line-height: 1.618;
  }
  h1 {
    font-size: 1rem;
  }
  h2 {
    font-size: 2.618rem;
  }
  h3 {
    font-size: 2.618rem;
  }
  h4,
  h5,
  h6 {
    font-size: 1rem;
  }
  .hide-on-mobile {
    display: none;
  }
  /* General Content Box */
  .content-box,
  #animated-takeover {
    grid-gap: 0px;
    grid-template-columns: repeat(12, 8.33%);
    min-height: 0;
  }
  #home-content-box {
    max-height: unset;
  }
  #home-content-box .portrait-container {
    grid-row: 3/span 1;
    margin-top: -15vh;
  }
  #home-content-box .portrait-container .portrait {
    width: 70vw;
    height: unset;
    /* margin-right: -36vw;
      clip-path: circle(31% at 54% 60%); */
  }
  .navigation-container h6 {
    padding-bottom: 1em;
    font-size: 0.75rem;
  }
  .chunk {
    padding-bottom: 12em;
  }
  .rounded-bar {
    width: 20%;
  }
  .rounded-bar + .chunk-title,
  .rounded-bar + .chunk-body,
  .chunk-body + .link-out,
  .chunk-title + .chunk-body,
  button + a,
  a .chunk-body {
    padding-top: 2rem;
  }
  .pc-demo.right .demo-container,
  .pc-demo.right .demo-img {
    /* Content height of macbook is 0.57777777777 of its width */
    width: 114%;
    height: auto;
    /* Compensations for image filling more space than 'true content' */
    margin-bottom: -42.2%;
    margin-left: 0px;
    margin-right: -22.7%;
    /* margin-right: -4%; */
    justify-self: right;
    grid-column-start: 1;
    grid-column-end: -2;
    margin-top: 20px;
  }
  .pc-demo.left .demo-container,
  .pc-demo.left .demo-img {
    /* Content height of macbook is 0.57777777777 of its width */
    width: 114%;
    height: auto;
    /* Compensations for image filling more space than 'true content' */
    margin-bottom: -42.2%;
    margin-left: 0px;
    margin-right: -22.7%;
    /* margin-right: -4%; */
    justify-self: right;
    grid-column-start: 1;
    grid-column-end: -2;
    margin-right: -23%;
  }
  .mobile-demo.phone-right .demo-img,
  .mobile-demo.phone-left .demo-img {
    margin-left: 0px;
    margin-right: 0px;
    justify-self: center;
  }
  #home-content-box .slogan-chunk.bullet {
    margin-top: calc(6vh - 4em);
    grid-column: 2/span 2;
  }
  #home-header-navigation {
    grid-column-start: -5;
    grid-column-end: -2;
  }
  h2 + h3 {
    padding-top: 2.618rem;
    font-size: 1.618rem;
  }
  #home-content-box #home-header-name {
    grid-column-start: 2;
    grid-column-end: span 3;
  }
  #home-header-contact {
    grid-column-start: -6;
    grid-column-end: -2;
    grid-row: 1;
    justify-self: end;
  }
  #home-content-box .slogan-chunk {
    grid-column-start: 2;
    grid-column-end: -2;
    grid-row: 2;
    margin-top: 6vh;
  }
  .mobile-demo.phone-left .demo-img,
  .mobile-demo.phone-left .demo-container {
    grid-column-start: 3;
    grid-column-end: -2;
    grid-row-start: 1;
    grid-row-end: span 1;
  }
  .mobile-demo.phone-right .demo-img,
  .mobile-demo.phone-right .demo-container {
    grid-column-start: 3;
    grid-column-end: -2;
    grid-row-start: 1;
    grid-row-end: span 1;
  }
  .chunk.on-left,
  .phone-right .chunk,
  .pc-demo.right .chunk {
    grid-column-start: 2;
    grid-column-end: -2;
  }
  .chunk.on-right,
  .phone-left .chunk,
  .pc-demo.left .chunk {
    grid-column-start: 2;
    grid-column-end: -2;
  }
  #about-box .chunk {
    grid-column-start: 2;
    grid-column-end: -2;
  }
  .magazine-container {
    grid-template-columns: repeat(12, 8.33%);
    grid-gap: 0px;
    padding-top: 2vh;
  }
  .double-chunk .chunk.on-left,
  .double-chunk .chunk.on-right {
    grid-column-start: 2;
    grid-column-end: -2;
  }
  .magazine-link-out {
    grid-column-start: 2;
    grid-column-end: span 5;
  }
  .magazine-container .magazine-column-container {
    grid-column-start: 2;
    grid-column-end: -2;
  }
  .image-tag-container {
    grid-column: 2/-2;
    display: none;
  }
  #writing-box .chunk {
    padding-top: 0;
    padding-bottom: 96px;
  }
  .scrolling-content-background,
  .fading-content-background {
    position: relative;
    grid-column: 1/-1;
  }
}
@media only screen and (max-width: 600px) {
  .photo-container-horiz-1_3 {
    grid-column-end: span 12;
  }
  /* 565.713 */
  .photo-container-horiz-2_3 {
    grid-column-end: span 12;
  }
  .photo-container-horiz-1_2 {
    grid-column-end: span 12;
  }
  .photo-container-horiz-1_1 {
    grid-column-end: span 12;
  }
  .photo-container-vert-1_2 {
    grid-column-end: span 12;
  }
  .photo-container {
    grid-column-start: 1 !important;
    grid-column-end: span 12 !important;
  }
  .header-name {
    grid-column: 2/8;
  }
  .photography-navigation {
    grid-column: 2/-2;
    margin-top: 3rem;
    justify-content: space-between;
  }
  .photography-navigation a {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  .photography-navigation a:first-child {
    margin-left: 0rem;
  }
  .photography-navigation a:last-child {
    margin-right: 0rem;
  }
  .contact {
    grid-column: -5/-2;
    grid-row-start: 1;
    /* margin-top: 3rem; */
  }
  .slogan {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  /* From pairing session */
  .section-separator div {
    grid-column-start: 2;
    grid-column-end: -2;
  }
  .intro-content-box {
    padding-bottom: 0;
  }
  #portrait > .photo {
    grid-column: 1/-1 !important;
    margin-top: 0rem !important;
    line-height: 0 !important;
  }
  #portrait > *:not(.photo) {
    grid-column: 2/-2 !important;
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
    line-height: 0 !important;
  }
  .photo-group {
    grid-template-columns: repeat(12, 8.33%);
    grid-gap: 0px;
    margin-top: 0 !important;
  }
  .photo-group > .photo-container {
    margin-top: 0 !important;
  }
}

/*# sourceMappingURL=index.css.map */