---
---

<div class="load" aria-hidden="true">
    <div class="load2">
        <div class="load3">
            <div class="loading">welcome...</div>
        </div>
    </div>
</div>
<style>
    .load {
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 101;
        background-color: #181818;
        animation: .8s cubic-bezier(0.32, 0, 0.67, 0) .6s loader forwards;
    }

    .load2 {
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 102;
        background: linear-gradient(165deg, rgba(142,241,255,1) 0%, rgba(193,87,221,1) 28%, rgba(155,153,255,1) 71%, rgba(223,193,255,1) 100%);
        animation: .8s cubic-bezier(0.32, 0, 0.67, 0) .55s loader forwards;
    }

    .load3 {
        position: fixed;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        z-index: 103;
        background-color: #181818;
        animation: .8s cubic-bezier(0.32, 0, 0.67, 0) .5s loader forwards;
    }

    .loading {
        position: absolute;
        bottom: 50%;
        text-align: center;
        width: 100vw;
        color: #eeeeee;
        font-style: italic;
        font-size: clamp(0px, calc(4vw), 99em);
        user-select: none;
        z-index: 104;
    }

    @keyframes loader {
        0% {
            height: 100vh;
            display: block;
        }

        100% {
            height: 0vh;
            display: none;
        }
    }
</style>