---
import "./Whatisweb3Styles.css";
---

<div class="centered mt-[100px]">
    <div
        class="self-start relative w-full justify-center;"
        style="padding-block: 5vh;"
    >
        <div class="whatisweb3-wrapper">
            <div
                class="bg-[url(../../../src/assets/img-left.webp)] bg-[50%_50%] bg-contain bg-no-repeat h-[817px] absolute flex w-[637px] z-[998] left-[0%]"
            >
            </div>
            <div class="w3-container">
                <span id="whatisweb3"></span>
                <h2
                    class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
                >
                    what is the web?
                </h2>
                <h3
                    class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
                >
                    Why Web3 matters
                </h3>
                <h4
                    class="w3-transluscent 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 gives people control over their data, privacy, and
                    ownership. Lume's affordable Web3 tech aims to speed up the
                    transition from Web2 to Web3, which matters for privacy and
                    security.
                </h4>
                <div
                    class="items-center bg-[color:var(--aquamarine)] flex h-[49px] ml-[-1.5px] max-w-[116px] transition-[0.3s] text-black mt-[22px] px-[3px] py-0 rounded-[5px] border-solid border-transparent scale-100 hover:transition-[0.5s] hover:bg-transparent transition-[0.5s] hover:border hover:border-[color:var(--aquamarine)] hover:text-[white] hover:border-solid"
                >
                    <a
                        class="tracking-[0] min-h-[26px] text-center w-[234px] block"
                        href="#">Learn More</a
                    >
                </div>
            </div>
        </div>
    </div>
</div>
