* {
  font-family: "Switzer", sans-serif;
}

a,
h1,
h3,
p {
  font-size: 1em;
}

a {
  text-decoration: underline;
  /* color: initial; */
  color: unset;
}

sup {
  text-decoration: none;
  vertical-align: super;
  font-size: 50%;
}

em {
  font-style: italic;
}

::-moz-selection {
  color: white;
  background: black;
}

::selection {
  color: white;
  background: black;
}

.name {
  position: fixed;
  top: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  color: #fff;
  mix-blend-mode: difference;
  transition: 0.3s ease;
  /* cursor: pointer; */
}

/* header:hover > .name {
  font-size: 500px;
  line-height: 0.5;
  letter-spacing: -0.5px;
  text-align: center;
} */

.gallery-container {
  height: 100vh;
  position: relative;
}

.gallery {
  height: 100%;
}

.gallery-cell {
  width: auto;
  height: 100%;
  align-content: center;
  position: relative;
}

.gallery-image {
  width: auto;
  height: 100%;
  /*max-height: 100vh;*/
  object-fit: cover;
  user-select: none;
}

/*
.gallery-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}
*/

figure {
  width: 100%;
  max-width: 100vw;
  margin: 0;
}

.gallery-cell-caption {
  position: absolute;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  margin: 0;
  bottom: 5px;
  left: 50%;
  transform: translate(-50%, 0%);
  text-align: center;
  z-index: 99;
  mix-blend-mode: difference;
}

.gallery-cell-caption {
  transition: 0.3s ease;
}

.gallery-cell-caption:hover {
  font-size: 3em;
  line-height: 1;
  text-align: center;
}

.carousel--left {
  cursor: w-resize;
}

.carousel--right {
  cursor: e-resize;
}

/*

  counter-increment: gallery-cell;

// cell number
.gallery-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}
*/


/* enable Flickity by default */
.gallery:after {
  content: 'flickity';
  display: none; /* hide :after */
}

@media screen and ( min-width: 768px ) {
  /* disable Flickity for large devices */
  .gallery:after {
    content: '';
  }
}

/*
.scroll-container {
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(3rem);
  scroll-snap-type: y mandatory;
}
*/

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory; 
  scroll-snap-points-y: repeat(3rem); 
  -ms-scroll-snap-points-y: repeat(3rem);
  -ms-scroll-snap-type: mandatory;
}

.scroll-child {
  scroll-snap-align: start;
  -ms-scroll-snap-align: start;
}

.container-about {
  height: 100vh;
  position: relative;
  margin: 1em;
  /* background-color: red; */
}

.about {
  font-size: 3em;
  line-height: 1.1;
  text-align: left;
  transition: 0.3s ease;
}

@media screen and ( max-width: 768px ) {
  .about {
    font-size: 2em;
  }
}

@media screen and ( max-width: 520px ) {
  .flickity-viewport {
    height: 100dvh !important;
  }
  .scroll-container,
  .container-about {
    height: 100svh;
  }
  /* @supports (-webkit-touch-callout: none) { */
}

.about-grid {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  column-gap: 1em;
  font-size: 1em;
}