/* ==================================================
   WLK Splash Screen
================================================== */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f2efe7;
}


/* ==================================================
   Screen
================================================== */

.splash-screen {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100vw;

    height: 100vh;
    height: 100dvh;

    background:
        linear-gradient(
            180deg,
            #e9f0e5 0%,
            #f3f0e6 100%
        );
}


/* ==================================================
   Content
================================================== */

.splash-content {
    display: flex;

    flex-direction: column;

    align-items: center;
}


/* ==================================================
   Logo
================================================== */

.wlk-logo {
    font-size: 72px;
    font-weight: 900;

    letter-spacing: 10px;

    color: #242824;

    line-height: 1;
}


.wlk-tagline {
    margin-top: 18px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;

    color: #72786f;
}


/* ==================================================
   Enter Button
================================================== */

.enter-button {
    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 70px;

    width: 180px;
    height: 52px;

    border: 2px solid #242824;
    border-radius: 26px;

    background: transparent;

    color: #242824;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 3px;

    text-decoration: none;

    cursor: pointer;
}


.enter-button:active {
    transform: scale(0.97);
}