body{

margin:0;
overflow:hidden;

background:
radial-gradient(circle at top,#2f2559,#0f1028);

font-family:Comic Sans MS;
color:white;

height:100vh;

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

}

#loading{

text-align:center;

}

#ufo{

width:250px;

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

}

#wistful{

width:170px;

margin-top:-40px;

animation:
peek 2s infinite;

}

h1{

font-size:40px;

margin-top:20px;

}

#status{

opacity:.8;

}

#beamContainer{

margin:auto;

margin-top:30px;

width:400px;
height:22px;

border-radius:20px;

background:#ffffff33;

overflow:hidden;

}

#beam{

height:100%;

width:0%;

border-radius:20px;

background:linear-gradient(
90deg,
#7cf7ff,
#8ec5ff,
#ffb2ff
);

transition:width .4s;

}

button{

margin-top:35px;

padding:15px 35px;

border:none;

border-radius:40px;

background:#ff8fe7;

color:white;

font-size:20px;

display:none;

cursor:pointer;

transition:.3s;

}

button:hover{

transform:scale(1.1);

background:#ffd2ff;

color:#6f2ea0;

}

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-15px);}
100%{transform:translateY(0);}

}

@keyframes peek{

0%{transform:translateY(0);}
50%{transform:translateY(-8px);}
100%{transform:translateY(0);}

}
body{

margin:0;

background:#a9d6ff;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

font-family:Comic Sans MS;

}

#room{

position:relative;

width:1000px;

height:650px;

background:#ffd9ef;

border:10px solid white;

border-radius:25px;

overflow:hidden;

}

.object{

position:absolute;

display:flex;

justify-content:center;

align-items:center;

border-radius:15px;

cursor:pointer;

font-weight:bold;

transition:.25s;

}

.object:hover{

transform:scale(1.08);

box-shadow:0 0 20px white;

}

#window{

left:420px;
top:40px;

width:170px;
height:120px;

background:#8fe8ff;

}

#bed{

left:60px;
bottom:80px;

width:260px;
height:150px;

background:#ffc0cb;

}

#desk{

right:70px;
bottom:80px;

width:230px;
height:120px;

background:#c49572;

}

#computer{

right:130px;
bottom:190px;

width:110px;
height:70px;

background:#888;

}

#notebook{

left:390px;
bottom:120px;

width:120px;
height:70px;

background:#fff7d6;

}

#shelf{

left:80px;
top:200px;

width:120px;
height:180px;

background:#deb887;

}

#nebbie{

left:550px;
bottom:90px;

width:90px;
height:90px;

background:#a5ffbf;

border-radius:50%;

}

#door{

right:0;

top:150px;

width:120px;

height:330px;

background:#9c6a42;

}
#popup{

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

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

display:none;

justify-content:center;

align-items:center;

z-index:999;

}

#popupBox{

width:700px;

height:500px;

background:white;

border-radius:25px;

padding:30px;

position:relative;

overflow:auto;

animation:pop .3s;

}

#close{

position:absolute;

right:20px;

top:20px;

font-size:24px;

cursor:pointer;

border:none;

background:none;

}

@keyframes pop{

from{

transform:scale(.7);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}