/* Fullscreen Loader Container */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 15, 25, 0.7); /* Dark semi-transparent background */
    backdrop-filter: blur(15px); /* Stronger blur for premium glass feel */
    -webkit-backdrop-filter: blur(15px);
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* FROM UIVERSE.IO BY BLACKISPLAY - STEVE LOADER */
#steve {
    transform: scale(0.5); /* Desktop Scale */
    width: 400px;
    height: 400px;
    display: grid;
    grid-template-columns: repeat(8, 50px);
    grid-template-rows: repeat(8, 50px);
    grid-auto-flow: row;
    grid-template-areas:
        "a1 a2 a3 a4 a5 a6 a7 a8"
        "b1 b2 b3 b4 b5 b6 b7 b8"
        "c1 c2 c3 c4 c5 c6 c7 c8"
        "d1 d2 d3 d4 d5 d6 d7 d8"
        "e1 e2 e3 e4 e5 e6 e7 e8"
        "f1 f2 f3 f4 f5 f6 f7 f8"
        "g1 g2 g3 g4 g5 g6 g7 g8"
        "h1 h2 h3 h4 h5 h6 h7 h8";
}

#steve div {
    overflow: hidden;
    position: relative;
}

#div1 { grid-area: a1; background-color: #2f200d; }
#div2 { grid-area: a2; background-color: #2b1e0d; }
#div3 { grid-area: a3; background-color: #2f1f0f; }
#div4 { grid-area: a4; background-color: #281c0b; }
#div5 { grid-area: a5; background-color: #241808; }
#div6 { grid-area: a6; background-color: #261a0a; }
#div7 { grid-area: a7; background-color: #2b1e0d; }
#div8 { grid-area: a8; background-color: #2a1d0d; }
#div9 { grid-area: b1; background-color: #2b1e0d; }
#div10 { grid-area: b2; background-color: #2b1e0d; }
#div11 { grid-area: b3; background-color: #2b1e0d; }
#div12 { grid-area: b4; background-color: #332411; }
#div13 { grid-area: b5; background-color: #422a12; }
#div14 { grid-area: b6; background-color: #3f2a15; }
#div15 { grid-area: b7; background-color: #2c1e0e; }
#div16 { grid-area: b8; background-color: #281c0b; }
#div17 { grid-area: c1; background-color: #2b1e0d; }
#div18 { grid-area: c2; background-color: #b6896c; }
#div19 { grid-area: c3; background-color: #bd8e72; }
#div20 { grid-area: c4; background-color: #c69680; }
#div21 { grid-area: c5; background-color: #bd8b72; }
#div22 { grid-area: c6; background-color: #bd8e74; }
#div23 { grid-area: c7; background-color: #ac765a; }
#div24 { grid-area: c8; background-color: #342512; }
#div25 { grid-area: d1; background-color: #aa7d66; }
#div26 { grid-area: d2; background-color: #b4846d; }
#div27 { grid-area: d3; background-color: #aa7d66; }
#div28 { grid-area: d4; background-color: #ad806d; }
#div29 { grid-area: d5; background-color: #9c725c; }
#div30 { grid-area: d6; background-color: #bb8972; }
#div31 { grid-area: d7; background-color: #9c694c; }
#div32 { grid-area: d8; background-color: #9c694c; }
#div33 { grid-area: e1; background-color: #b4846d; }
#div34 { grid-area: e2; background-color: #ffffff; }
#div35 { grid-area: e3; background-color: #523d89; }
#div36 { grid-area: e4; background-color: #b57b67; }
#div37 { grid-area: e5; background-color: #bb8972; }
#div38 { grid-area: e6; background-color: #523d89; }
#div39 { grid-area: e7; background-color: #ffffff; }
#div40 { grid-area: e8; background-color: #aa7d66; }
#div41 { grid-area: f1; background-color: #9c6346; }
#div42 { grid-area: f2; background-color: #b37b62; }
#div43 { grid-area: f3; background-color: #b78272; }
#div44 { grid-area: f4; background-color: #6a4030; }
#div45 { grid-area: f5; background-color: #6a4030; }
#div46 { grid-area: f6; background-color: #be886c; }
#div47 { grid-area: f7; background-color: #a26a47; }
#div48 { grid-area: f8; background-color: #805334; }
#div49 { grid-area: g1; background-color: #905e43; }
#div50 { grid-area: g2; background-color: #965f40; }
#div51 { grid-area: g3; background-color: #41210c; }
#div52 { grid-area: g4; background-color: #8a4c3d; }
#div53 { grid-area: g5; background-color: #8a4c3d; }
#div54 { grid-area: g6; background-color: #45220e; }
#div55 { grid-area: g7; background-color: #8f5e3e; }
#div56 { grid-area: g8; background-color: #815339; }
#div57 { grid-area: h1; background-color: #6f452c; }
#div58 { grid-area: h2; background-color: #6d432a; }
#div59 { grid-area: h3; background-color: #41210c; }
#div60 { grid-area: h4; background-color: #421d0a; }
#div61 { grid-area: h5; background-color: #45220e; }
#div62 { grid-area: h6; background-color: #45220e; }
#div63 { grid-area: h7; background-color: #83553b; }
#div64 { grid-area: h8; background-color: #7a4e33; }

#steve ::before {
    content: "";
    background-color: gray;
    width: 50px;
    height: 50px;
    position: absolute;
    top: -50px;
}

#div34::after,
#div35::after,
#div38::after,
#div39::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #a17661;
    z-index: 1;
    top: -50px;
    animation: winking 6s ease-in-out infinite 2s;
}

@keyframes winking {
    0% { transform: translateY(0px); }
    40% { transform: translateY(0px); }
    45% { transform: translateY(50px); }
    48% { transform: translateY(50px); }
    53% { transform: translateY(0px); }
    100% { transform: translateY(0px); }
}

#div1::before { background-color: #a1a1a1; animation: change 6s ease-in-out infinite; }
#div2::before { background-color: #9b9b9b; animation: change 6s ease-in-out infinite 0.01s; }
#div3::before { background-color: #a3a3a3; animation: change 6s ease-in-out infinite 0.02s; }
#div4::before { background-color: #919191; animation: change 6s ease-in-out infinite 0.03s; }
#div5::before { background-color: #888888; animation: change 6s ease-in-out infinite 0.04s; }
#div6::before { background-color: #8f8f8f; animation: change 6s ease-in-out infinite 0.05s; }
#div7::before { background-color: #9b9b9b; animation: change 6s ease-in-out infinite 0.06s; }
#div8::before { background-color: #989898; animation: change 6s ease-in-out infinite 0.07s; }
#div9::before { background-color: #9b9b9b; animation: change 6s ease-in-out infinite 0.08s; }
#div10::before { background-color: #9b9b9b; animation: change 6s ease-in-out infinite 0.09s; }
#div11::before { background-color: #9b9b9b; animation: change 6s ease-in-out infinite 0.1s; }
#div12::before { background-color: #aaaaaa; animation: change 6s ease-in-out infinite 0.11s; }
#div13::before { background-color: #c1c1c1; animation: change 6s ease-in-out infinite 0.12s; }
#div14::before { background-color: #bebebe; animation: change 6s ease-in-out infinite 0.13s; }
#div15::before { background-color: #9b9b9b; animation: change 6s ease-in-out infinite 0.14s; }
#div16::before { background-color: #919191; animation: change 6s ease-in-out infinite 0.15s; }
#div17::before { background-color: #9b9b9b; animation: change 6s ease-in-out infinite 0.16s; }
#div18::before { background-color: #c7c7c7; animation: change 6s ease-in-out infinite 0.17s; }
#div19::before { background-color: #cacaca; animation: change 6s ease-in-out infinite 0.18s; }
#div20::before { background-color: #d8d8d8; animation: change 6s ease-in-out infinite 0.19s; }
#div21::before { background-color: #cfcfcf; animation: change 6s ease-in-out infinite 0.2s; }
#div22::before { background-color: #cfcfcf; animation: change 6s ease-in-out infinite 0.21s; }
#div23::before { background-color: #bababa; animation: change 6s ease-in-out infinite 0.22s; }
#div24::before { background-color: #aaaaaa; animation: change 6s ease-in-out infinite 0.23s; }
#div25::before { background-color: #bababa; animation: change 6s ease-in-out infinite 0.24s; }
#div26::before { background-color: #c4c4c4; animation: change 6s ease-in-out infinite 0.25s; }
#div27::before { background-color: #bababa; animation: change 6s ease-in-out infinite 0.26s; }
#div28::before { background-color: #c1c1c1; animation: change 6s ease-in-out infinite 0.27s; }
#div29::before { background-color: #afafaf; animation: change 6s ease-in-out infinite 0.28s; }
#div30::before { background-color: #cacaca; animation: change 6s ease-in-out infinite 0.29s; }
#div31::before { background-color: #aaaaaa; animation: change 6s ease-in-out infinite 0.3s; }
#div32::before { background-color: #aaaaaa; animation: change 6s ease-in-out infinite 0.31s; }
#div33::before { background-color: #c4c4c4; animation: change 6s ease-in-out infinite 0.32s; }
#div34::before { background-color: #494949; animation: change 6s ease-in-out infinite 0.33s; z-index: 2; }
#div35::before { background-color: #494949; animation: change 6s ease-in-out infinite 0.34s; z-index: 2; }
#div36::before { background-color: #c4c4c4; animation: change 6s ease-in-out infinite 0.35s; }
#div37::before { background-color: #cacaca; animation: change 6s ease-in-out infinite 0.36s; }
#div38::before { background-color: #494949; animation: change 6s ease-in-out infinite 0.37s; z-index: 2; }
#div39::before { background-color: #494949; animation: change 6s ease-in-out infinite 0.38s; z-index: 2; }
#div40::before { background-color: #bababa; animation: change 6s ease-in-out infinite 0.39s; }
#div41::before { background-color: #a7a7a7; animation: change 6s ease-in-out infinite 0.4s; }
#div42::before { background-color: #c1c1c1; animation: change 6s ease-in-out infinite 0.41s; }
#div43::before { background-color: #cacaca; animation: change 6s ease-in-out infinite 0.42s; }
#div44::before { background-color: #828282; animation: change 6s ease-in-out infinite 0.43s; }
#div45::before { background-color: #828282; animation: change 6s ease-in-out infinite 0.44s; }
#div46::before { background-color: #cacaca; animation: change 6s ease-in-out infinite 0.45s; }
#div47::before { background-color: #aaaaaa; animation: change 6s ease-in-out infinite 0.46s; }
#div48::before { background-color: #8f8f8f; animation: change 6s ease-in-out infinite 0.47s; }
#div49::before { background-color: #9e9e9e; animation: change 6s ease-in-out infinite 0.48s; }
#div50::before { background-color: #494949; animation: change 6s ease-in-out infinite 0.49s; }
#div51::before { background-color: #494949; animation: change 6s ease-in-out infinite 0.5s; }
#div52::before { background-color: #494949; animation: change 6s ease-in-out infinite 0.51s; }
#div53::before { background-color: #494949; animation: change 6s ease-in-out infinite 0.52s; }
#div54::before { background-color: #494949; animation: change 6s ease-in-out infinite 0.53s; }
#div55::before { background-color: #494949; animation: change 6s ease-in-out infinite 0.54s; }
#div56::before { background-color: #919191; animation: change 6s ease-in-out infinite 0.55s; }
#div57::before { background-color: #828282; animation: change 6s ease-in-out infinite 0.56s; }
#div58::before { background-color: #7f7f7f; animation: change 6s ease-in-out infinite 0.57s; }
#div59::before { background-color: #858585; animation: change 6s ease-in-out infinite 0.58s; }
#div60::before { background-color: #858585; animation: change 6s ease-in-out infinite 0.59s; }
#div61::before { background-color: #919191; animation: change 6s ease-in-out infinite 0.6s; }
#div62::before { background-color: #858585; animation: change 6s ease-in-out infinite 0.61s; }
#div63::before { background-color: #949494; animation: change 6s ease-in-out infinite 0.62s; }
#div64::before { background-color: #888888; animation: change 6s ease-in-out infinite 0.63s; }

@keyframes change {
    0% { transform: translateY(0px); }
    5% { transform: translateY(50px); }
    50% { transform: translateY(50px); }
    55% { transform: translateY(0px); }
    100% { transform: translateY(0px); }
}

/* Responsiveness */
@media (max-width: 768px) {
    #steve {
        transform: scale(0.35); /* Smaller scale for mobile */
    }
}