body {
				position: relative;
				display: flex;
				flex-direction: column;
			}

			main {
				width: 100%;
			}

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

			a:hover {
				text-decoration: none;
			}

			.sections {
				display: flex;
				flex-direction: column;
				background: white;
				border-top: 1px solid #979797;
				border-bottom: 1px solid #979797;
				padding-bottom: 50px;
			}

			 @media (max-width: 800px) {
				.sections {
					gap: 8px;
				}
			}
		

  .video {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #eee;
    min-width: 0;
    overflow: hidden;
  }
  
  /* 
    Safari update size correctly when resizing window if the aspect-ratio is on
    an element that is a direct child of a flex box container.
  */
  .video__size {
    width: 100%;
    aspect-ratio: 9 / 16;
  }

  .video--unloaded .video__player {
    opacity: 0;
  }

  .video__player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 300ms ease;
    opacity: 1;
    object-fit: cover;
  }

  .video__poster {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    /* 
      Safari will no respect overflow hidden when a blur filter is added. This
      transform fixes that.
    */
    transform: translate3d(0, 0, 0)
  }


    .header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 15px;
      height: 85vh;
      text-align: center;
      background: white;
      font-family: "Newzald", serif;
    }

    .header__logo {
      border-radius: 100px 100px 0 0;
      flex-shrink: 0;
      width: clamp(125px, 19vw, 188px);
      position: relative;
    }

    .header__logo .video {
      background-image: linear-gradient(170deg, #7FC2DA 0%, #9FC8C5 22%, #73A47F 60%, #3E6667 100%);
      border-radius: inherit;
    }

    .header__logo .video__poster {
      filter: blur(5px);
    }

    .header__glow {
      border-radius: inherit;
      position: absolute;
      inset: -5px;
      overflow: hidden;
      filter: blur(5px);
    }

    @property --angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    @keyframes shine {
      to { --angle: 360deg }
    }

    .header__glow::after {
      content: "";
      position: absolute;
      inset: 0;
      background: conic-gradient(from var(--angle), white, rgba(1, 1, 1, 0), white);
      animation: shine 10s linear infinite;
    }

    .header__glow video {
      position: absolute;
      width: 100%;
      height: 100%;
      inset: 0;
      object-fit: cover;
    }

    .header__title {
      /* font-size: 30px; */
      font-size: clamp(20px, 3vw, 30px);
      text-wrap: nowrap;
      text-transform: lowercase;
    }

    .header__text {
      font-family: sans-serif;
      font-size: 16px;
    }

    .header__links {
      font-size: 16px;
      line-height: 1.3;
      list-style: none;
      text-transform: lowercase;
    }

    @media (max-width: 800px) {
      .header__glow {
        border-radius: inherit;
        position: absolute;
        inset: -2px;
        overflow: hidden;
        filter: blur(2px);
      }
    }
  

    .section {
      display: flex;
      flex-direction: column;
      gap: 25px;
      width: 100%;
      max-width: 1250px;
      margin: 0 auto;
      padding: 60px 25px;
      position: relative;
    }

    .section__group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      gap: 25px;
    }

    .section__group .video {
      width: calc(33.3% - 25px);
    }

    .section__text {
      top: 20px;
      line-height: 1.33;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      text-wrap: balance;
      padding: 0 10px;
      margin-bottom: 30px;
      z-index: 2;
    }

    .section__text p {
      margin-bottom: 15px;
    }

    .section__text em {
      animation: em-glow 1s ease infinite;
    }

    .section__text p:last-child {
      margin-bottom: 0;
    }

    .section__text-contain {
      max-width: 60ch;
      margin: 0 auto;
    }

    @media (max-width: 800px) {
      .section {
        gap: 8px;
        padding: 8px;
        padding-top: 40px;
      }

      .section__group {
        gap: 8px;
      }
      
      .section__text {
        font-size: 14px;
      }

      .section__text p {
        margin-bottom: 8px;
      }

      .section__group .video {
        width: calc(33.3% - 8px);
      }
    }

    @keyframes em-glow {
      0% {
        text-shadow: 0 0 1px rgba(255, 0, 0, 0);
      }

      10% {
        text-shadow: 0 0 1px rgba(255, 0, 0, 1);
      }

      50% {
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
      }

      100% {
        text-shadow: 0 0 10px rgba(255, 0, 0, 0);
      }
    }
  

    .video--4e0f2d9684101c2ce9e376492a868662 .video__size {
      aspect-ratio: 4 / 3 !important;
    }
  

    .video--c60aa9f587b0093dcb2be3d74372f925 .video__size {
      aspect-ratio: 4 / 3 !important;
    }
  

    .video--bfece975175304e16bed4003c94e9c03 .video__size {
      aspect-ratio: 4 / 3 !important;
    }
  

  .__staticbuild-badge * {
    all: unset;
  }

  .__staticbuild-badge {
    display: inline-block;
    border-radius: 100px;
    border: 1px solid black;
    padding: 5px 12px;
    font-size: 11px;
    text-transform: lowercase;
  }

  .__staticbuild-badge a,
  .__staticbuild-badge a:visited,
  .__staticbuild-badge a:active {
    cursor: pointer;
    color: black;
    text-decoration: underline;
  }


				.footer {
					display: flex;
					flex-direction: column;
					gap: 20px;
					align-items: center;
					background: white;
					padding: 50px 0;
					font-size: 12px;
					text-align: center;
				}