:root {
  --white: #fff;
  --text: #111;
  --muted: #666;
  --maxWidth: 1700px;

  /* color variables from website: */
  --bg: rgb(253, 253, 253);
  --primary: rgb(60, 60, 60);
  --secondary: rgb(120, 120, 120);
  --tertiary: rgb(240, 240, 240);

  /* font-sizes from website */
  /* employing a fluid-typography-scale, the settings of which are here:
https://utopia.fyi/type/calculator?c=320,12,1.2,1920,16,1.2,3,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --base-minus-one: clamp(0.625rem, 0.5833rem + 0.2083vw, 0.8333rem);
  --base_size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
}

/*font loads: */
@font-face {
  font-family: "Alegreya Sans";
  src: url("./html_fonts/alegreya-sans_regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("./html_fonts/alegreya-sans_italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("./html_fonts/alegreya-sans_bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: block;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("./html_fonts/alegreya-sans_light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: block;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("./html_fonts/alegreya-sans_light-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300;
  font-display: block;
}

html,
body {
  height: 100%;
  margin: 0;
  background: white;
  color: var(--primary);
  font-family: "Alegreya Sans";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;

  font-size: 16px;

  text-wrap: pretty; 
}

/* generic section base */
section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  overflow: visible;
}

/* INTRO */
.intro {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*changes only the main text  */
.intro .line {
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--primary);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 3000ms cubic-bezier(0.2, 0.9, 0.2, 1), transform 3000ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.intro.visible .line {
  opacity: 1;
  transform: none;
}

/* FRAME LAYOUT */
.frame {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  width: 100%;
  max-width: var(--maxWidth);
  margin: 50px auto;
  justify-items: center;
  align-items: start;
  box-sizing: border-box;
  text-align: center;
}

/* fade-in */
.frame .sketch-container,
.frame .text,
.frame .video-container {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1000ms ease, transform 1000ms ease;
  will-change: opacity, transform;
}
.frame.visible .sketch-container,
.frame.visible .text,
.frame.visible .video-container {
  opacity: 1;
  transform: none;
}

/* containers */
.sketch-container,
.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* sketch + video sizing */
.sketch-box,
.video-box {
  width: 596px; /* fixed to canvas width */
  height: 840px; /* fixed to canvas height */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--tertiary);
  box-sizing: border-box;
}

iframe,
video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  object-fit: contain;
}

/* captions */
.caption {
  font-size: 0.6rem;
  color: var(--secondary);
  text-align: left;
  justify-content: center;
  padding: 0 0.09rem;
  /* border-left: 3px solid grey; */
  margin:  0.25rem 0 0 0rem ;

  box-sizing: border-box;

  width: 100%;
}

/* text column */
.text {
  display: flex;
  flex-direction: column; 
  gap: 1.2rem;
  align-items: left;
  text-align: left;
  justify-content: center; 
  padding: 0 1rem;

  /* just hard coded everything */
  width: 100%;
  height: 87%; 
}
.text p {
  font-size: 0.9rem;
  font-weight: 400; 
  line-height: 1.4;
  margin: 0;
  color: var(--primary);
}

/* FOOTER */
footer {
  height: 40vh;
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: space-between;
  padding: 0 25vw;
  box-sizing: border-box;
}
footer .line {
  font-size: 1.4rem;
  color: var(--primary);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms ease, transform 900ms ease;
}
footer.visible .line {
  opacity: 1;
  transform: none;
}

/* responsive */
@media (max-width: 980px) {
  .frame {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    align-items: center;
    padding: 0 1rem;
  }
  .sketch-box,
  .video-box {
    width: 90vw;
    height: auto;
    aspect-ratio: 596 / 840;
    max-height: 80vh;
  }
  .text {
    order: 3;
    padding: 1rem 0;
  }
}

#ender{
  font-size: 0.75rem; 
  color: var(--secondary); 
  margin-bottom: 3rem; 
}