/* ===========================
MOODA'S ROOM
=========================== */

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

body{

background:#fff2f8;
font-family:Verdana,sans-serif;
color:#5b4a54;
}

/* ---------- Splash Page ---------- */

.splash{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(#ffd5eb,#fff7fb);

overflow:hidden;

}

.welcome{

text-align:center;

background:white;

padding:50px;

border-radius:35px;

box-shadow:0 15px 35px rgba(255,170,210,.35);

border:4px solid #ffd6e8;

max-width:700px;
.blinkieRow{

display:flex;

justify-content:center;

gap:15px;

margin:30px 0;

flex-wrap:wrap;

}

.blinkieRow img{

height:35px;

}

}

.welcome h1{

font-size:52px;

color:#ff5f9b;

margin-bottom:15px;

}

.welcome p{

font-size:20px;

margin-bottom:25px;

}

.enterText{

margin-top:20px;

font-size:18px;

color:#ff69a5;

animation:bounce 1.6s infinite;

}

.door{

width:320px;

cursor:pointer;

transition:.6s;

}

.door:hover{

transform:scale(1.05);

}

.open{

transform:rotateY(70deg) scale(1.05);

opacity:0;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

/* ---------- Main Layout ---------- */

.container{

width:95%;

max-width:1450px;

margin:40px auto;

background:white;

border-radius:25px;

overflow:hidden;

box-shadow:0 15px 35px rgba(255,180,215,.3);

}

header{

background:linear-gradient(#ffd0e7,#ffe5f3);

padding:30px;

text-align:center;

}

header h1{

font-size:48px;

color:#ff5d98;

}

header p{

margin-top:10px;

font-size:18px;

}

.layout{

display:flex;

min-height:800px;

}

aside{

width:270px;

background:#fff5fa;

padding:25px;

border-right:3px dashed #ffd2e6;

text-align:center;

}

.aboutGif{

width:180px;

margin-bottom:20px;

}

.sidebarTitle{

margin-bottom:20px;

color:#ff5d98;

}

.nav{

width:100%;

padding:14px;

margin-bottom:12px;

border:none;

border-radius:999px;

background:#ffd4e9;

cursor:pointer;

font-size:17px;

transition:.3s;

}

.nav:hover{

background:#ff9dc8;

color:white;

}

.active{

background:#ff80b8;

color:white;

}

.status{

margin-top:25px;

padding:15px;

background:white;

border-radius:15px;

}

.blinkie{

width:170px;

margin-top:18px;

}

main{

flex:1;

padding:40px;

}

.contentPage{

display:block;

}

.hidden{

display:none;

}

.divider{

display:block;

margin:20px auto;

width:260px;

}

footer{

background:#ffe5f2;

padding:20px;

text-align:center;

}
/* ===========================
ABOUT PAGE
=========================== */

.contentPage h2{
text-align:center;
font-size:38px;
color:#ff69a5;
margin-bottom:10px;
}

.contentPage p,
.contentPage li{
font-size:18px;
line-height:1.8;
}

.contentPage ul{
margin-left:30px;
margin-top:20px;
}

/* ===========================
MUSIC ROOM
=========================== */

.music-room{
text-align:center;
}

.player{
width:350px;
margin-top:20px;
}

#cd{
width:180px;
margin-top:-210px;
margin-left:130px;
transition:1s;
}

.spin{
animation:spin 2s linear infinite;
}

@keyframes spin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}

.kitty{
width:130px;
margin:30px auto;
display:block;
}

.albums{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:25px;
margin-top:30px;
}

.albums img{
width:140px;
border-radius:12px;
cursor:pointer;
transition:.3s;
box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.albums img:hover{
transform:scale(1.1) rotate(-2deg);
}

.nowPlaying{
margin-top:35px;
background:#fff6fb;
padding:25px;
border-radius:20px;
}

/* ===========================
DIARY
=========================== */

.journal{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
margin-top:30px;
}

.page{
background:#fff8fc;
width:330px;
min-height:430px;
padding:25px;
border-radius:20px;
border:3px solid #ffd8ea;
box-shadow:0 10px 20px rgba(0,0,0,.12);
}

.diarySticker{
width:180px;
display:block;
margin:20px auto;
}

.diaryButtons{
text-align:center;
margin-top:30px;
}

.diaryButtons button{
padding:14px 30px;
border:none;
background:#ffb6d8;
border-radius:999px;
font-size:16px;
cursor:pointer;
margin:10px;
transition:.3s;
}

.diaryButtons button:hover{
background:#ff87bb;
color:white;
}

/* ===========================
PHOTO BOOTH
=========================== */

.photoWall{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:30px;
}

.polaroid{
background:white;
padding:12px;
width:180px;
border-radius:12px;
box-shadow:0 10px 20px rgba(0,0,0,.15);
transition:.3s;
}

.polaroid:nth-child(odd){
transform:rotate(-4deg);
}

.polaroid:nth-child(even){
transform:rotate(4deg);
}

.polaroid:hover{
transform:scale(1.08) rotate(0deg);
}

.polaroid img{
width:100%;
border-radius:8px;
}

.polaroid p{
margin-top:10px;
text-align:center;
font-weight:bold;
color:#ff6ca8;
}

.cameraButton{
display:inline-block;
margin-top:40px;
padding:15px 30px;
background:#ffb7d8;
border-radius:999px;
text-decoration:none;
font-weight:bold;
color:#5b4a54;
transition:.3s;
}

.cameraButton:hover{
background:#ff8dc2;
color:white;
}

/* ===========================
GUESTBOOK
=========================== */

.guestBook{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.bookPage{
background:#fff8fc;
width:340px;
padding:25px;
border-radius:20px;
border:3px solid #ffd7e9;
box-shadow:0 10px 20px rgba(0,0,0,.12);
}

.bookPage input,
.bookPage textarea{
width:100%;
padding:12px;
margin-top:15px;
border:2px solid #ffd7e9;
border-radius:12px;
font-size:16px;
}

.bookPage button{
margin-top:20px;
padding:14px 30px;
border:none;
background:#ffb6d8;
border-radius:999px;
cursor:pointer;
transition:.3s;
}

.bookPage button:hover{
background:#ff87bb;
color:white;
}

.message{
background:white;
padding:12px;
border-radius:12px;
margin-top:15px;
box-shadow:0 5px 10px rgba(0,0,0,.08);
}
/* =====================================
MAGICAL EFFECTS
===================================== */

/* Floating sparkles */

.sparkle{

position:fixed;

pointer-events:none;

font-size:18px;

animation:sparkle 1s linear forwards;

z-index:9999;

}

@keyframes sparkle{

0%{

opacity:1;
transform:scale(.5);

}

100%{

opacity:0;
transform:scale(1.8) translateY(-20px);

}

}

/* Falling petals */

.petal{

position:fixed;

top:-50px;

font-size:26px;

pointer-events:none;

animation:fall linear forwards;

z-index:999;

}

@keyframes fall{

0%{

transform:translateY(-40px) rotate(0deg);

opacity:1;

}

100%{

transform:translateY(110vh) translateX(120px) rotate(720deg);

opacity:0;

}

}

/* Floating clouds */

.cloud{

position:fixed;

font-size:60px;

opacity:.3;

pointer-events:none;

animation:cloudMove linear infinite;

z-index:-1;

}

@keyframes cloudMove{

from{

transform:translateX(-200px);

}

to{

transform:translateX(calc(100vw + 300px));

}

}

/* Cute scrollbar */

::-webkit-scrollbar{

width:14px;

}

::-webkit-scrollbar-track{

background:#fff3f9;

}

::-webkit-scrollbar-thumb{

background:#ffb6d8;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#ff8fc4;

}

/* Cute text selection */

::selection{

background:#ffb6d8;

color:white;

}

/* Smooth scrolling */

html{

scroll-behavior:smooth;

}

/* Soft fade */

.contentPage{

animation:fade .5s;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* Footer */

footer{

font-size:16px;

letter-spacing:1px;

}

/* Responsive */

@media(max-width:900px){

.layout{

flex-direction:column;

}

aside{

width:100%;

border-right:none;

border-bottom:3px dashed #ffd2e6;

}

.player{

width:260px;

}

#cd{

width:140px;

margin-left:90px;

margin-top:-155px;

}

.albums img{

width:110px;

}

.page,

.bookPage{

width:100%;

}

}
/* ===========================
BEDROOM LAYOUT
=========================== */

.room{

position:relative;

min-height:900px;

background:#fff7fb;

border-radius:30px;

overflow:hidden;

}

.window{

position:absolute;

top:40px;

right:60px;

width:220px;

height:140px;

background:#dff5ff;

border:10px solid white;

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

font-size:35px;

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

}

.bed{

position:absolute;

bottom:40px;

left:40px;

}

.sleeping{

width:220px;

}

.desk{

position:absolute;

bottom:40px;

right:60px;

}

.deskPlayer{

width:220px;

}

.polaroidWall{

position:absolute;

top:220px;

right:40px;

display:grid;

grid-template-columns:repeat(2,110px);

gap:15px;

}

.polaroidWall img{

width:110px;

background:white;

padding:8px;

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

transform:rotate(-5deg);

}

.polaroidWall img:nth-child(even){

transform:rotate(6deg);

}

.content{

padding:40px;

padding-right:330px;

}
/* ==========================
CUSTOM CURSOR
========================== */

body{
cursor:url("images/cursor.png"), auto;
}

a,
button,
img{
cursor:pointer;
}
.clockBox{

margin-top:25px;

padding:15px;

background:white;

border-radius:18px;

text-align:center;

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

}
.stamp{

text-align:center;

margin:40px;

font-size:18px;

color:#ff6ba8;

font-style:italic;

}
.welcomeBox{

background:#fff7fb;

border:3px solid #ffd6e8;

border-radius:25px;

padding:25px;

margin:25px 0;

box-shadow:0 8px 20px rgba(255,170,210,.25);

text-align:center;

}

.welcomeBox h3{

color:#ff69a5;

margin-bottom:10px;

}
.polaroid img{

transition:.4s;

}

.polaroid:hover img{

transform:scale(1.05);

}
.quote{

text-align:center;

font-style:italic;

font-size:18px;

margin:30px 0;

color:#ff69a5;

}