@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@900&display=swap');

header {
  height: 200vh;
}

.container {
  clip: rect(0, auto, auto, 0);
  overflow: hidden;
  position: absolute;
  height: 100vh;
  left: 0;
  width: 100%;
  -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%);
}

.container_solid {
  background: white;
  top: 0;
}

.title_wrapper {
  position: fixed;
  display: block;  
  margin: auto;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.title_wrapper h1 {
  text-align: center;
  font-size: 100px;
  text-transform: uppercase;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-weight: 900;
}

.container_solid .title_wrapper h1 {
  background: url(starrynight.jpg);
  background-size: 100vw auto;
  background-position: center;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  color: black;
}

.container_image {
  background-image: url(starrynight.jpg);
  background-size:100vw auto;
  background-position: center;
  background-attachment: fixed;
  top: 100vh;
}

.container_image .title_wrapper h1 {
  color: white;
}

section {
  min-height: 100vh;
  padding: 2em;
  margin: auto;
  max-width: 800px;
}

section h2 {
  font-family: 'Fraunces', serif;
}

section p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

.introbody {
  text-align: center;
}

.quote {
  font-style: italic;
}

:root {
  --card-height: 40vw;
  --card-margin: 4vw;
  --card-top-offset: 1em;
  --numcards: 4;
  --outline-width: 0px;
}

#cards {
  padding-bottom: calc(var(--numcards) * var(--card-top-offset));
  margin-bottom: var(--card-margin);
}

#card_1 {
  --index: 1;
}

#card_2 {
  --index: 2;
}

#card_3 {
  --index: 3;
}

.card {
  position: sticky;
  top: 0;
  padding-top: calc(var(--index) * var(--card-top-offset));
}

@supports (animation-timeline: works) {

  @scroll-timeline cards-element-scrolls-in-body {
    source: selector(body);
    scroll-offsets:
      selector(#cards) start 1,
      selector(#cards) start 0;
    start: selector(#cards) start 1;
    end: selector(#cards) start 0;
    time-range: 4s;
  }

.card {
  --index0: calc(var(--index) - 1);
  --reverse-index: calc(var(--numcards) - var(--index0));
  --reverse-index0: calc(var(--reverse-index) - 1);
}
  
.card__content {
  transform-origin: 50% 0%;
  will-change: transform;
  --duration: calc(var(--reverse-index0) * 1s);
  --delay: calc(var(--index0) * 1s);
  animation: var(--duration) linear scale var(--delay) forwards;
  animation-timeline: cards-element-scrolls-in-body;
}

@keyframes scale {
  to {
    transform:
      scale(calc(
        1.1
        -
        calc(0.1 * var(--reverse-index))
      ));
    }
  }
}

#cards {
  list-style: none;
  outline: calc(var(--outline-width) * 10);
  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--numcards), var(--card-height));
  gap: var(--card-margin);
}

.card {
  outline: var(--outline-width);
}

.card__content {
  box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
  background: rgb(255, 255, 255);
  color: rgb(10, 5, 7);
  border-radius: 1em;
  overflow: hidden;

  display: grid;
  grid-template-areas: "text img";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;

  align-items: stretch;
  outline: var(--outline-width) solid lime;
}

.card__content > div {
  grid-area: text;
  width: 80%;
  place-self: center;
  text-align: left;

  display: grid;
  gap: 1em;
  place-items: start;
}

.card__content > figure {
  grid-area: img;
  overflow: hidden;
}

.card__content > figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  font-weight: 300;
  font-size: 3.5em;
}

h2 {
  font-weight: 300;
  font-size: 2.5em;
}

p {
  font-family: sans-serif;
  font-weight: 300;
  line-height: 1.42;
}

.legacy {
  text-align: center;
}

#image1 {
  max-width: 300px;
  max-height: 400 px;
  background-image: src="assets/starrynight2.jpg";
}

#image1:hover {
  background-image: src="assets/starrynight2.gif";
}

#image2 {
  min-width: 500;
}