---
import "./VisionStyles.css";
---

<div
  class="mt-[166px] items-start flex pb-[5vh] bg-[url(../../../src/assets/video-placeholder.webp)] pb-[10%] bg-[80%_65%] bg-no-repeat bg-contain transition-[0.5s]"
  style="padding-bottom: 5vh; vertical-align: center; padding-inline: 11.9%;"
>
  <div>
    <span id="vision"></span>
    <h2
      class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
    >
      OUR VISION
    </h2>
    <h3
      class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
    >
      Make Web3 easy for <br /> everyone
    </h3>
    <h4
      class="left vt transition-[0.5s] rounded-[15px] text-[calc(15px_+_(21_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] text-[length:var(--font-size-m)] font-normal not-italic max-w-[550px] leading-[35px] mt-[0.5em]"
    >
      Web3 offers freedom of speech, data sovereignty, and privacy. We
      simplify Web3 by bridging the gap between the two webs, enabling
      easy usage without censorship or backdoors.
    </h4>
    <div>
      <a class="btn-main mt-8" href="#">Download Extension</a>
    </div>
  </div>
</div>
