/* Reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* WINDOW, FLOOR, SKY */

body {
    height: 100vh;
    overflow: hidden;
    font-family: Arial, sans-serif;


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

    background: #111827;
}
.room::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255,150,90,.06),
            transparent 65%
        );

    pointer-events:none;
}
.room {

    width: 1100px;
    height: 650px;

    border-radius: 40px;
    backdrop-filter: blur(12px);

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.02) 0px,
            rgba(255,255,255,.02) 2px,
            transparent 2px,
            transparent 22px
        ),
        linear-gradient(
            to bottom,
            #0d2346,
            #09172e
        );

    border: 2px solid black;
    position: relative;
    overflow: hidden;
}
.wall{
    background:
        linear-gradient(
            rgba(255,255,255,.02),
            rgba(255,255,255,.005)
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.025) 0px,
            rgba(255,255,255,.025) 2px,
            transparent 2px,
            transparent 22px
        ),
        linear-gradient(
            #123d72,
            #0b2750
        );
}
.window-glow{
    width:160%;
    height:90px;

    left:50%;
    bottom:-35px;

    transform:translateX(-50%);

    filter:blur(25px);

    opacity:.35;
}
.window::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:34px;

    background:#b8864d;
    box-shadow:
    inset 0 2px rgba(255,255,255,.25),
    0 4px 10px rgba(0,0,0,.25);


    z-index:-1;
}
.window-frame{
    position:absolute;     
    top:56px;
    left:70px;

    padding:8px;

    background:#4b3326;
    border-radius:48px;

    box-shadow:
        inset 0 2px rgba(255,255,255,.25),
        0 6px 14px rgba(0,0,0,.3);
}
.window{
    position:relative;

    width:340px;
    height:260px;

    border-radius:40px;
    overflow:hidden;
}
.window::after{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(255,255,255,.15),
            rgba(255,255,255,.15)
        ) center/4px 100% no-repeat,

        linear-gradient(
            rgba(255,255,255,.15),
            rgba(255,255,255,.15)
        ) center/100% 4px no-repeat;

    
}
.windowsill{

    position:absolute;
    left:64px;
    top:320px;
    width:365px;
    height:14px;

    background:#4b3326;
    border-radius:0 0 12px 12px;
    z-index:5;

    box-shadow: 0 8px 18px rgba(0,0,0,.25),
        inset 0 2px rgba(255,255,255,.25),
        0 6px 14px rgba(0,0,0,.3);

}

.sky{

    position:absolute;

    inset:0;

    background: linear-gradient(
    to bottom,
    #22154b 0%,
    #3c2f83 30%,
    #6a49b7 60%,
    #ff7b5a 88%,
    #ffb16a 100%
);
}
.sky::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(255,180,90,.15),
        transparent 40%
    );
    pointer-events:none;
}

.floor{
    position:absolute;
    left:0;
    bottom:0;

    width:100%;
    height:28%;

    background:#4b3326;

    border-radius:0 0 45px 45px;
}
.floor::after{
    content:"";

    position:absolute;
    inset:0;

    background-image:
repeating-linear-gradient(
    to right,
    transparent 0 58px,
    rgba(255,255,255,.025) 59px 60px
);

    opacity:.4;
}
.baseboard{

    position:absolute;

    bottom:28%;

    width:100%;
    height:8px;

    background: rgb(63, 30, 30);

    opacity:.35;
}

/* MOON AND STARS */
.moon-container{
    position:absolute;

    width:70px;
    height:70px;

    border-radius:50%;

    top:0px;
    left:0px;

    background:#fffce7;
    pointer-events: auto;
    z-index: 20;

    box-shadow:
    0 0 20px rgba(255,255,220,.9),
    0 0 90px rgba(180,180,255,.18);
}
.crater{
    position:absolute;
    border-radius:50%;
    background:rgba(90,90,90,.18);
    box-shadow: inset 1px 1px 2px rgba(255,255,255,.15);
}
.c1{
    width:12px;
    height:12px;
    left:18px;
    top:14px;
}
.c2{
    width:8px;
    height:8px;
    left:42px;
    top:28px;
}
.c3{
    width:6px;
    height:6px;
    left:28px;
    top:48px;
}
.star{
    position:absolute;

    width:3px;
    height:3px;

    border-radius:50%;
    background:white;

    box-shadow:0 0 8px white;
    z-index: 2;
    opacity: .75;
    animation: twinkle 4s infinite alternate;
}
.s1{
    width:2px;
    height:2px;
    top:28px;
    left:210px;
    animation: twinkle 4s ease-in-out infinite;
}
.s2{
    width:3px;
    height:3px;
    top:70px;
    left:310px;
    animation: twinkle 4s ease-in-out infinite;
}
.s3{
    width:2px;
    height:2px;
    top:115px;
    left:250px;
    animation: twinkle 5s ease-in-out infinite;
}
.s4{
    width:3px;
    height:3px;
    top:70px;
    right:310px;
    animation: twinkle 3s ease-in-out infinite;
}
.s5{
    width:2px;
    height:2px;
    top:28px;
    right:210px;
    animation: twinkle 4s ease-in-out infinite;
}


/* PLANTS */
.plant{

    position:absolute;

    right:707px;   

    top:278px;

    width:40px;

    height:40px;

    z-index: 10;

    overflow:visible;
    transform: translateY(4px);
}
.pot{

    position:absolute;

    bottom:0;

    width:36px;

    height:26px;

    background:#a8682d;

    border-radius:0 0 10px 10px;
}
.pot::before{

    content:"";

    position:absolute;

    top:2px;
    left:2px;

    width:28px;
    height:6px;

    background:#4b3326;

    border-radius:50%;
}
.vine{

    position:absolute;
    top: 8px;
    width:4px;

    background: transparent;

    border-radius: 40px;
    border-left: 4px solid #3f7d48;;

    transform-origin:top center;
}
.vine::before {
    content: "";
    position: absolute;

    width: 8px;
    height: 12px;

    background: #59b56a;

    border-radius: 50% 50% 50% 0;

    left: -4px;
    top: 18px;

    transform: rotate(-35deg);
}

.v1::before{
    left: -6px;
    top: 12px;
    transform: rotate(-40deg);
}
.v2::before{
    left: 3px;
    top: 28px;
    transform: rotate(18deg);
}
.v3::before{
    left: -5px;
    top: 46px;
    transform: rotate(-25deg);
}

.v1{

    left:6px;
    height:95px;
    top: 16px;
    z-index: 15;

    transform:rotate(10deg);
    animation: sway 6s ease-in-out infinite;

}
.v2{

    left:15px;
    height:100px;
    top: 16px;

    transform:rotate(2deg);
    animation: sway 7s ease-in-out infinite;

}
.v3{

    left:24px;
    height:105px;
    top: 16px;

    transform:rotate(-8deg);
    animation: sway 5s ease-in-out infinite;
}

.v1::after{
    left: 4px;
    top: 22px;
    transform: rotate(35deg);
}
.v2::after{
    left: -8px;
    top: 42px;
    transform: rotate(-15deg);
}
.v3::after{
    left: 6px;
    top: 58px;
    transform: rotate(30deg);
}

/* RUGS */
.rug{
    position:absolute;

    width:500px;
    height:160px;

    left:0px;
    top:50px;

    border: 3px solid rgba(255,255,220,.18);
    outline:1px dashed rgba(255,255,255,.25);
    outline-offset:-8px;

    
    border-radius: 24px;

    background:
    repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 26px,
        rgba(255,255,255,.08) 27px,
        transparent 28px
    ),
    #b8f4e8;
    
    box-shadow:
    inset 0 4px 10px rgba(255,255,255,.08),
    inset 0 -8px 12px rgba(0,0,0,.15);
}
.rug{
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.04) 0,
            rgba(255,255,255,.04) 2px,
            transparent 2px,
            transparent 12px
        ),

        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,.03) 0,
            rgba(0,0,0,.03) 2px,
            transparent 2px,
            transparent 12px
        ),

        linear-gradient(#789782,#688a74);
}
.rug::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.12),
            transparent 70%
        );

    pointer-events:none;
}

/* BOOKSHELF AND BOOKS */
.bookshelf{
    position:absolute;

    right:50px;
    bottom:150px;

    width:180px;
    height: 400px;px;

    background:#8c643b;

    border-radius:12px;

    box-shadow:
        inset 0 0 10px rgba(255,255,255,.12),
        0 8px 20px rgba(0,0,0,.25);
}
.shelf{
    position:absolute;

    left:12px;
    right:12px;

    height:8px;

    background:#6d4d2b;
    border-radius:10px;

    display:flex;
    align-items:flex-end;
    gap:4px;

    overflow:visible;
}
.shelf::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-2px;
    height:2px;
    background:rgba(0,0,0,.18);
}

.shelf1{ top:50px; }
.shelf2{ top:110px; }
.shelf3{ top:170px; }
.shelf4{ top:230px; }
.shelf5{ top:290px; }

.book{
    width:18px;
    height:45px;

    margin-bottom:8px;   

    border-radius:3px;

    flex-shrink:0;
}
.tall{
    height:72px;
}
.short{
    height:48px;
}
.medium{
    height:58px;
}
.blue{
    background:#4da3ff;
}
.green{
    background:#58c972;
}
.orange{
    background:#ffb347;
}
.red{
    background:#ff6b6b;
}
.purple{
    background:#b67bff;
}
.black{
    background:#222;
}
.secret-book{

    background:linear-gradient(
        to right,
        #0d0d0d,
        #202020,
        #0d0d0d
    );

    cursor:pointer;

    transition:.25s;
}
.secret-book:hover{

    transform:translateY(-3px);

    filter:brightness(1.2);

}
#bookOverlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:500;
}
#bookOverlay.hidden{
    display:none;
}
.bookWindow{
    position: relative;
    width:700px;
    max-width:90vw;
    display: flex;

    height:85vh;
    padding:40px;
    overflow-y:auto;

    border-radius:8px;
    box-shadow:
        0 0 40px rgba(0,0,0,.45),
        inset 0 0 30px rgba(255,255,255,.3);

    background:
    linear-gradient(
    rgba(255,255,255,.15),
    rgba(0,0,0,.03)
),
#efe2b7;
    color:#3a2b1a;
    font-family:"Caveat", cursive;

}
#closeBook{
    position: absolute;

    top: 18px;
    left: 22px;

    width: 38px;
    height: 38px;

    border: none;
    background: transparent;

    font-size: 28px;
    cursor: pointer;

    color:#5b4330;

    z-index:1000;
}
#bookTitle{
    margin: 0 0 22px 0;
    font-size: 2rem;      
    line-height: 1.05;
}
.leftPage{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:70px 55px 55px 55px;
    width: 50%;

    background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.3), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.03), transparent 40%),
    #f6edd0;
    box-shadow: inset 10px 0 15px rgba(0,0,0,.08);

}
.bookSpine{

    width:12px;

    background:linear-gradient(
        to right,
        #7a5432,
        #b88457,
        #7a5432
    );

}
.rightPage{

    flex:1;
    width: 50%;

    background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.3), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.03), transparent 40%),
    #f6edd0;

    padding:40px;
    box-shadow: inset 10px 0 15px rgba(0,0,0,.08);

}
#bookContent p{
    font-size:1.25rem;
    line-height:1.5;
    margin-bottom:28px;
    max-width: 300px;
}


/* BOOK TERMINAL */
#terminalOverlay{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.85);

    justify-content:center;

    align-items:center;

    z-index:9999;

}
.terminalWindow{

    width:700px;

    max-width:90%;

    height:450px;

    background:#111;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 0 25px rgba(0,0,0,.5);

}
.terminalHeader{

    background:#222;

    color:white;

    padding:12px;

    font-family:monospace;

}
#terminalOutput{

    color:#4cff4c;

    padding:20px;

    font-family:monospace;

    min-height:320px;

}
#terminalInput{

    width:100%;

    padding:15px;

    border:none;

    outline:none;

    background:black;

    color:#4cff4c;

    font-family:monospace;

}

/* SUCCY PLANT */ 
.succulent-pot{
    position:absolute;
    bottom: 0;
    left: 30px;
    transform:translateX(-50%);

    width:50px;
    height:18px;

    background:#b67b45;
    border-radius:0 0 8px 8px;

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,.2),
        inset 0 -2px 3px rgba(0,0,0,.2);
}
.succulent{
    filter:drop-shadow(0 0 5px rgba(130,110,255,.25));
}
.succulent-pot::before{
    content:"";
    position:absolute;

    left:-3px;
    top:-5px;

    width:56px;
    height:8px;

    background:#cf945c;
    border-radius:8px;
}
.leaf{
    position:absolute;
    top: -45px;

    width:10px;
    height:23px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #6ae87b 0%,
            #57cf6f 70%,
            #8b73ff 100%
        );

    box-shadow:
        0 0 4px rgba(140,120,255,.35);

    transform-origin:bottom center;
}
.leaf1{
    left:9px;
    bottom:16px;
    transform:rotate(-45deg);
}
.leaf2{
    left:15px;
    bottom:18px;
    transform:rotate(-20deg);
}
.leaf3{
    left:22px;
    bottom:20px;
}
.leaf4{
    left:29px;
    bottom:18px;
    transform:rotate(20deg);
}
.leaf5{
    left:35px;
    bottom:16px;
    transform:rotate(45deg);
}
.leaf6{
    left:18px;
    bottom:28px;
    transform:rotate(-10deg) scale(.9);
}
.leaf7{
    left:28px;
    bottom:28px;
    transform:rotate(10deg) scale(.9);
}

/* RUBBER DUCK */
.duck{
    position:absolute;

    right:38px;
    bottom:18px;

    width:34px;
    height:24px;

    cursor:pointer;
    transition:.2s;
}
.duck:hover{
    transform:translateY(-2px) rotate(-5deg);
}
.duck-body{
    position:absolute;

    bottom:0;
    left:4px;

    width:22px;
    height:16px;

    background:#ffd84d;
    border-radius:50%;
}
.duck-head{
    position:absolute;

    right:2px;
    top:2px;

    width:12px;
    height:12px;

    background:#ffd84d;
    border-radius:50%;
}
.duck-beak{
    position:absolute;

    right:-2px;
    top:7px;

    width:6px;
    height:3px;

    background:#ff9c33;
    border-radius:3px;
}
.duck-eye{
    position:absolute;

    right:7px;
    top:6px;

    width:2px;
    height:2px;

    background:#222;
    border-radius:50%;
}
#duckSpeech{
    position:absolute;

    opacity:0;

    transition:.2s;

    background:white;

    color:#333;

    padding:6px 10px;

    border-radius:10px;

    font-size:12px;

    pointer-events:none;
    right: 100%;
}
.duck-leg{
    position:absolute;
    width:2px;
    height:8px;
    background:#d8862f;
    bottom:-6px;
    border-radius:2px;
}
.duck-leg.left{
    left:13px;
}
.duck-leg.right{
    left:20px;
}
.duck-leg::after{
    content:"";
    position:absolute;
    width:5px;
    height:2px;
    background:#d8862f;
    bottom:-1px;
    left:-1px;
    border-radius:2px;
}


/* TABLE AND CLUTTER */
.coffee-area{
    position:absolute;

    left:50%;
    bottom:45px;

    width:520px;
    height:180px;

    transform:translateX(-50%);
}
.coffee-table{
    width:210px;
    height:90px;
    left:170px;
    bottom: 0px;

    background:#8f6543;
    position: absolute;

    border-radius:12px;

    position:relative;

    box-shadow:
        0 8px 18px rgba(0,0,0,.25);
}
.coffee-table::before,
.coffee-table::after{
    content:"";
    position:absolute;

    width:10px;
    height:55px;

    background:#6d492d;

    bottom:-55px;
}
.coffee-table::before{
    left:18px;
}
.coffee-table::after{
    right:18px;
}
.beanbag{

    width:95px;
    height:70px;
    position: absolute;
    

    background:#66d0b4;

    border-radius:50%;

    box-shadow:
        inset -8px -8px rgba(0,0,0,.08),
        0 6px 12px rgba(0,0,0,.2);

    transition:.2s;
}
.beanbag:hover{
    transform:scale(.94, .98);
}
.beanbag.left{

    transform:rotate(-12deg);
    left:30px;
    bottom: 18px;
}
.beanbag.right{

    transform:rotate(10deg);
    right: 310px;
    bottom: 80px;
}
.coffee-mug{
    position:absolute;

    top:10px;
    left:18px;

    width:26px;
    height:24px;

    background:#f7f0dc;

    border-radius:4px 4px 8px 8px;

    box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.coffee-mug::after{

    content:"";

    position:absolute;

    right:-6px;
    top:6px;

    width:8px;
    height:10px;

    border:2px solid #f7f0dc;
    border-left:none;

    border-radius:50%;
}
.steam{

    position:absolute;

    width:4px;
    height:14px;

    background:rgba(255,255,255,.6);

    border-radius:50%;

    animation:steam 2s infinite ease-in-out;
}
.steam1{

    left:4px;
    top:-12px;
}
.steam2{

    left:10px;
    top:-16px;

    animation-delay:.5s;
}
.steam3{

    left:16px;
    top:-12px;

    animation-delay:1s;
}
.notebook{

    position:absolute;

    right:18px;
    top:12px;

    width:42px;
    height:32px;

    background:#efe3b4;

    border-radius:3px;

    transform:rotate(-8deg);

    box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.notebook-line{

    width:28px;
    height:2px;

    background:#d5c48b;

    margin:6px auto;
}
.pencil{

    position:absolute;

    left:120px;
    top:36px;

    width:36px;
    height:4px;

    background:#e6c64d;

    transform:rotate(-24deg);

    border-radius:3px;
}
.pencil::after{

    content:"";

    position:absolute;

    right:-4px;

    border-left:5px solid #8b5a2b;
    border-top:2px solid transparent;
    border-bottom:2px solid transparent;
}

/* HARDWARE */
.usb-drive{

    position:absolute;

    bottom:8px;
    right:12px;

    width:16px;
    height:8px;

    background:#444;

    border-radius:2px;
}
.usb-drive::after{

    content:"";

    position:absolute;

    right:-4px;

    width:4px;
    height:8px;

    background:#bbb;
}
.sticky-note{
    position:absolute;

    top:20px;
    left:60px;

    width:52px;
    height:52px;

    background:#ffe97b;

    color:#444;
    font-size:8px;
    line-height:1.15;

    padding:5px;

    border-radius:4px;

    transform:rotate(7deg);

    box-shadow:
        0 4px 8px rgba(0,0,0,.2);

    font-family:"Comic Sans MS", cursive;
}
.sticky-note:hover{
    transform:rotate(4deg) scale(1.05);
}
.pc-project{

    position:absolute;

    bottom:35px;
    right:1050px;

    width:220px;
    height:120px;

    cursor:pointer;
    transition:.2s;
}
.pc-project:hover{

    transform:translateY(-3px) scale(1.03);
}
.motherboard{

    position:absolute;

    width:120px;
    height:85px;

    background:#2d6b4f;

    border-radius:8px;

    box-shadow:
        inset 0 0 0 3px #5fcf86;
}
.cpu{

    position:absolute;

    width:26px;
    height:26px;

    left:18px;
    top:18px;

    background:#d4d4d4;

    border-radius:4px;
}
.ram{

    position:absolute;

    width:12px;
    height:50px;

    background:#205c42;

    border-radius:3px;
}
.ram1{

    left:62px;
    top:12px;
}
.ram2{

    left:80px;
    top:12px;
}
.gpu{

    position:absolute;

    width:90px;
    height:18px;

    top:95px;
    left:70px;

    background:#333;

    border-radius:4px;
}
.screw{

    position:absolute;

    width:5px;
    height:5px;

    background:silver;

    border-radius:50%;
}
.screw1{
    left:155px;
    top:20px;
}
.screw2{
    left:170px;
    top:55px;
}
.screw3{
    left:145px;
    top:85px;
}
.build-btn{
    display:inline-block;

    padding:12px 26px;

    background:#66d0b4;
    color:#1d3b35;

    border:none;
    border-radius:14px;

    font-family:inherit;
    font-size:1rem;
    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 4px 10px rgba(0,0,0,.15);

    transition:.2s;
}
.build-btn:hover{
    transform:translateY(-2px);
    background:#73e0c2;
}
.build-btn:active{
    transform:translateY(0);
}
#pingsSketch{
    position:absolute;
    right:80px;
    top:90px;

    opacity:.25;

    color:#56453d;

    transform:rotate(-4deg);

    font-family:"Patrick Hand", cursive;
}


/* ===== PINGS ===== */

#pings{

    position:absolute;

    left:400px;
    bottom:200px;

    width:120px;
    height:180px;

    z-index:25;

}
#pings .head{

    position:absolute;

    width:72px;
    height:58px;

    left:24px;
    top: 30px;

    background: #838996;

    border-radius:18px;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.5),
        0 4px 10px rgba(0,0,0,.15);

}
#pings .screen{

    position:absolute;

    width:48px;
    height:34px;

    left:12px;
    top:12px;

    background:#2a3558;

    border-radius:10px;

    overflow:hidden;

}
#pings .body{

    position:absolute;

    width:76px;
    height:65px;

    left:22px;
    top:90px;

    background: #838996;

    border-radius:16px;

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,.45),
        0 3px 8px rgba(0,0,0,.15);

}
#pings .chest-panel{

    position:absolute;

    width:32px;
    height:34px;

    left:22px;
    top:12px;

    border-radius:10px;

    background:#62676b;
}
.arm::before{
    content:"";

    position:absolute;

    width:16px;
    height:16px;

    border-radius:50%;

    background:#62676b;

    top:-4px;
    left:50%;
    transform:translateX(-50%);
}
#pings .arm{
    position:absolute;
    width:16px;
    height:58px;
    border-radius:30px;

    background: #838996;

    transform-origin:top center;
    transition:.3s;
}
#pings .left-arm{
    left:-12px;
    top:18px;
    transform:rotate(18deg);
}
#pings .right-arm{
    right:-12px;
    top:18px;
    transform:rotate(-18deg);
}
#pings .hand{
    position:absolute;

    width:20px;
    height:18px;

    bottom:-8px;
    left:50%;
    transform:translateX(-50%);

    background:#62676b;

    border-radius:12px;
}
#pings .leg{
    position:absolute;
    width:16px;
    height:80px;

    background: #838996;

    border-radius:30px;
}
#pings .left-leg{
    left:75px;
    bottom:-56px;
}
#pings .right-leg{
    right:75px;
    bottom:-56px;
}
#pings .foot{
    position:absolute;
    width:24px;
    height:10px;

    bottom:-4px;
    left:50%;
    transform:translateX(-50%);

    border-radius:20px;

    background:#62676b;
}
#pings .antenna{

    position:absolute;

    width:3px;
    height:16px;

    background:#8f97ab;

    top:15px;

}
#pings .antenna.left{

    left:36px;

    transform:rotate(-20deg);

}
#pings .antenna.right{

    right:36px;

    transform:rotate(20deg);
}
#pings .antenna-tip{

    position:absolute;

    width:8px;
    height:8px;

    left:-3px;
    top:-6px;

    background:#66f5ff;

    border-radius:50%;

    box-shadow:0 0 8px #66f5ff;

}
.eyes{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
}
.eye{
    width:8px;
    height:18px;

    background:#d7ffff;

    border-radius:20px;

    box-shadow:0 0 8px cyan;

    animation:blink 5s infinite;
}
#pingsChat{
    position:absolute;

    left:500px;
    bottom:350px;

    width:320px;
    height:220px;

    background: rgba(18, 25, 45, .65);
    backdrop-filter: blur(18px);

    border: 1px solid rgba(120,190,255,.25);

    box-shadow:
    0 0 25px rgba(80,180,255,.18);

    border-radius:18px;

    display:flex;
    flex-direction:column;

    overflow:hidden;
}
#chatMessages{

    flex:1;

    overflow-y:auto;

    padding:15px;

    color:white;

    font-size:14px;
}
.chatInput{

    display:flex;

    border-top:1px solid rgba(255,255,255,.12);
}
#userInput{

    flex:1;

    padding:12px;

    border:none;

    outline:none;

    background:transparent;

    color:white;
}
#sendBtn{

    width:80px;

    border:none;

    cursor:pointer;

    background:#4fd6ff;

    color:#07233a;

    font-weight:bold;

    transition:.25s;
}
#sendBtn:hover{

    background:#83e6ff;
}

/* BYTE THE ROBOT CAT */
#robotCat{

    position:absolute;

    left:1200px;
    top:500px;

    width:70px;
    height:70px;

    z-index:2;
}
.cat-head{

    position:absolute;

    width:42px;
    height:34px;

    background: #838996;

    border-radius:14px;

    left:14px;
    top:0;

    box-shadow:
        inset 0 2px rgba(255,255,255,.5),
        0 0 10px rgba(0,255,255,.25);

}
.cat-ear{

    position:absolute;
    border-radius: 4px;

    width:18px;
    height:18px;

    background: #838996;

    transform:rotate(45deg);

}
.cat-ear-left{

    left:12px;
    top:-5px;

}
.cat-ear-right{

    right:12px;
    top:-5px;

}
.cat-eye{

    position:absolute;

    width:6px;
    height:9px;

    background:#4ffcff;

    border-radius:20px;

    top:10px;

    box-shadow:0 0 8px cyan;
    animation: blink 3s infinite;

}
.cat-eye.left{

    left:11px;

}
.cat-eye.right{

    right:11px;

}
.cat-nose{
    position:absolute;
    left:50%;
    top:22px;

    width:6px;
    height:4px;

    transform:translateX(-50%);
    background:#ff9db3;

    clip-path:polygon(50% 100%,0 0,100% 0);
}
.cat-body{

    position:absolute;

    width:36px;
    height:24px;

    background: #838996;

    border-radius:12px;

    left:17px;
    top:33px;
}
.cat-tail{

    position:absolute;

    width:24px;
    height:6px;

    background: #838996;

    border-radius:20px;

    right:-8px;
    top:48px;

    transform-origin:left center;

    animation:tail 2s ease-in-out infinite;
}
.cat-hat{

    position:absolute;

    left:26px;
    top:-16px;

    animation:hatBounce 2s ease-in-out infinite;

}
.hat-top{

    width:20px;
    height:12px;

    background:#6b4024;

    border-radius:6px 6px 2px 2px;
}
.hat-brim{

    width:32px;
    height:5px;

    background:#8d5932;

    border-radius:50px;

    margin-left:-6px;
}
.cat-mouth{
    position:absolute;
    width:8px;
    height:6px;
    border-bottom:2px solid #8aa8b5;
    border-radius:0 0 8px 8px;
    z-index: 3;
}
.cat-left{
    left:50%;
    bottom:4px;
    transform:translateX(-100%);
}
.cat-right{
    left:50%;
    bottom:4px;
}



/* ANIMATIONS */
@keyframes blink{

    0%,92%,100%{
        transform:scaleY(1);
    }

    94%,96%{
        transform:scaleY(.08);
    }

}
#pings{

    animation:float 3s ease-in-out infinite;

}
@keyframes float{

0%,100%{
transform:translateY(0px);
}

50%{
transform:translateY(-6px);
}

}
.antenna-tip{

animation:pulse 2s infinite;

}
@keyframes pulse{

0%,100%{
box-shadow:0 0 6px cyan;
}

50%{
box-shadow:0 0 16px cyan;
}

}
#pings:hover .head {
    transform: rotate(-4deg);
    transition: transform .2s ease;
}
#pings:hover .screen {
    box-shadow: 0 0 20px #6ffcff;
    transition: box-shadow .2s ease;
}
@keyframes twinkle{
    0%,100%{
        opacity:.4;
        transform:scale(1);
    }
    50%{
        opacity:1;
        transform:scale(1.3);
    }
}
@keyframes sway {

    0% {
        transform: rotate(8deg);
    }

    50% {
        transform: rotate(12deg);
    }

    100% {
        transform: rotate(8deg);
    }
}
@keyframes steam{

    0%{
        opacity:0;
        transform:translateY(6px);
    }

    50%{
        opacity:.8;
    }

    100%{
        opacity:0;
        transform:translateY(-10px);
    }
}
@keyframes tail{

    0%{transform:rotate(-15deg);}
    50%{transform:rotate(15deg);}
    100%{transform:rotate(-15deg);}

}
@keyframes hatBounce{

    50%{

        transform:translateY(-1px);

    }

}