---
import "./FooterStyles.css";
---

<div class="footer-cards">
    <div class="h-auto bg-[#020E10];">
        <h6>
            <div class="footer-logo"></div>
            <ul>
                <span class="footer-email"></span><span
                    class="text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic pr-[6vw]"
                    >contact@lumeweb.com</span
                >
                <span class="footer-h2">Freedom, privacy, ownership.</span>
                <div class="footer-span"></div>
            </ul>
        </h6>
    </div>
    <div class="h-auto bg-[#020E10];">
        <h5
            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
            style="padding-left: 0.25em;"
        >
            General
        </h5><br /><h6>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Home
            </li>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Get Started
            </li>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Documentation
            </li>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Projects
            </li>
        </h6>
    </div>
    <div class="h-auto bg-[#020E10];">
        <h5
            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
            style="padding-left: 0.25em;"
        >
            Community
        </h5><br /><h6>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                GitHub
            </li>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Discord
            </li>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Twitter
            </li>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                facebook
            </li>
        </h6>
    </div>
    <div class="h-auto bg-[#020E10];">
        <h5
            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
            style="padding-left: 0.25em;"
        >
            Ecosystem
        </h5><br /><h6>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Browser
            </li>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Extension
            </li>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Universal Storage
            </li>
        </h6>
    </div>
    <div class="h-auto bg-[#020E10];">
        <h5
            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
            style="padding-left: 0.25em;"
        >
            Other
        </h5><br /><h6>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                BrowserUniversal
            </li>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Storage
            </li>
        </h6>
    </div>
    <div class="h-auto bg-[#020E10];">
        <h5
            class="inline-block text-left text-[calc(15px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))]"
            style="padding-left: 0.25em;"
        >
            Support Us
        </h5><br /><h6>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Donate
            </li>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Download App
            </li>
            <li
                class="footer-li text-[#808687] text-[calc(10px_+_(21_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] font-thin not-italic leading-[1px] pl-0"
            >
                Partnerships
            </li>
        </h6>
    </div>
</div>