#splashScreen {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100vh;

            background:
                radial-gradient(circle at center,
                    #fffdf9 0%,
                    #f8f1e7 45%,
                    #eee2d3 100%);

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

            z-index: 999999;

            transition: opacity 1s ease,
                visibility 1s ease;
        }


        .splash-content {
            text-align: center;

            animation: splashIn 1.2s ease forwards;
        }


        .logo-wrapper {
            width: 170px;
            height: 170px;

            margin: auto;

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

            border-radius: 50%;

            background: rgba(255, 255, 255, 0.5);

            box-shadow:
                0 0 0 1px rgba(170, 130, 80, 0.15),
                0 15px 50px rgba(100, 70, 40, 0.12);

            animation: logoZoom 1.5s ease-in-out infinite alternate;
        }


        .logo-wrapper img {
            width: 120px;
            height: auto;
        }


        .splash-content h1 {
            margin-top: 28px;

            font-size: 27px;
            font-weight: 500;

            letter-spacing: 7px;

            color: #6e5138;
        }


        .splash-content p {
            margin-top: 8px;

            font-family: Arial, sans-serif;

            font-size: 9px;

            letter-spacing: 4px;

            color: #92775c;
        }


        .loading {
            width: 150px;
            height: 2px;

            margin: 28px auto 0;

            background: rgba(120, 90, 60, 0.15);

            overflow: hidden;
        }


        .loading span {
            display: block;

            width: 70px;
            height: 100%;

            background: #9b7650;

            animation: loading 1.5s infinite ease-in-out;
        }


        .splash-content small {
            display: block;

            margin-top: 12px;

            font-family: Arial, sans-serif;

            font-size: 9px;

            letter-spacing: 3px;

            color: #9b826a;
        }


        /* =========================
       ANIMATIONS
    ========================= */

        @keyframes splashIn {

            from {
                opacity: 0;
                transform: translateY(25px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }

        }


        @keyframes logoZoom {

            from {
                transform: scale(0.94);
            }

            to {
                transform: scale(1.04);
            }

        }


        @keyframes loading {

            0% {
                transform: translateX(-80px);
            }

            50% {
                transform: translateX(80px);
            }

            100% {
                transform: translateX(-80px);
            }

        }


        /* Splash Hide */

        #splashScreen.hide {
            opacity: 0;
            visibility: hidden;
        }


        /* Mobile */

        @media (max-width: 600px) {

            .logo-wrapper {
                width: 145px;
                height: 145px;
            }

            .logo-wrapper img {
                width: 100px;
            }

            .splash-content h1 {
                font-size: 21px;
                letter-spacing: 5px;
            }

        }