/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1140,20,1.667,2,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
@import url("https://fonts.googleapis.com/css2?family=Lato&family=Spectral:ital,wght@1,700&display=swap");

:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1140;

  --fluid-screen: 100vw;
  --fluid-bp: calc(
    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
      (var(--fluid-max-width) - var(--fluid-min-width))
  );
}

@media screen and (min-width: 1140px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}

:root {
  --f-0-min: 16;
  --f-0-max: 20;
  --step-0: calc(
    ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
      var(--fluid-bp)
  );

  --f-1-min: 19.2;
  --f-1-max: 24;
  --step-1: calc(
    ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) *
      var(--fluid-bp)
  );

  --f-2-min: 38;
  --f-2-max: 62;
  --step-2: calc(
    ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) *
      var(--fluid-bp)
  );
}

body {
  margin: 1rem;
  line-height: 1.65;
  font-size: var(--step-0);
  font-family: "Lato", sans-serif;
  background: black;
  color: white;
}

h1 {
  font-size: 3.75rem;
  line-height: 1.15;
  font-size: var(--step-2);
  font-family: "Spectral", serif;
}

p:first-of-type {
  font-size: var(--step-1);
  line-height: 1.4;
  padding-bottom: 2rem;
  border-bottom: solid 3px #4bd3cd;
}

main {
  max-width: 750px;
  margin: 0 auto;
  padding: 1.75rem 1rem 0;
}

.video-container {
  margin: 2rem 0;
}

.video-container::before {
  float: left;
  padding-top: 56.20608899297423%;
  content: "";
}

.video-container::after {
  display: block;
  content: "";
  clear: both;
}

.video {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  will-change: transform;
}

video.fixed {
  width: 300px;
  position: fixed;
  bottom: 10px;
  left: 10px;
}