body{

margin:0;

overflow:hidden;

font-family:Arial;

}


.desktop{

height:100vh;

background:#bde7ff;

background-image:
radial-gradient(white 2px, transparent 2px);

background-size:35px 35px;

}



.title{

background:#ffcde0;

padding:15px;

font-size:30px;

text-align:center;

font-weight:bold;

color:#ff6699;

border-bottom:5px solid white;

}



.icons{.icon{

font-size:45px;

color:white;

text-align:center;

cursor:pointer;

text-shadow:

2px 2px 0 #888;

width:100px;

padding:15px;

border-radius:15px;

transition:.3s;

}


.icon:hover{

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

transform:translateY(-8px);

}

display:flex;

gap:40px;

padding:50px;

}



.icon{

font-size:45px;

color:white;

text-align:center;

cursor:pointer;

text-shadow:2px 2px #777;

transition:.3s;

}



.icon:hover{

transform:scale(1.2);

}



.window{

background:white;

width:400px;

min-height:200px;

padding:30px;

margin-left:50px;

border:5px solid #ffb6d2;

border-radius:15px;

box-shadow:0 0 20px #ffb6d2;

text-align:center;

}



.window h2{

color:#ff6699;

}



.bar{

position:fixed;

bottom:0;

width:100%;

height:45px;

background:#ffcde0;

border-top:4px solid white;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 20px;

box-sizing:border-box;

font-weight:bold;

}
/* JANELA RETRÔ */


.window{

padding:0;

overflow:hidden;

}



.window-top{

background:#ffb6d9;

height:35px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 10px;

font-weight:bold;

color:white;

}


.window-top button{

background:white;

border:none;

color:#ff6699;

font-weight:bold;

width:25px;

height:25px;

cursor:pointer;

border-radius:5px;

}



.window-content{

padding:30px;

}



.sparkles{

font-size:30px;

margin-top:30px;

animation: brilho 1s infinite;

}



@keyframes brilho{


50%{

opacity:.3;

}


}
/* CARTINHAS */


.letters{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin:25px;

}


.letters button{

background:#ffd7e8;

border:3px solid #ffb6d9;

padding:15px;

border-radius:12px;

font-size:16px;

cursor:pointer;

color:#a94d75;

transition:.3s;

}


.letters button:hover{

transform:scale(1.1);

background:#ffc1dc;

}



.paper{

margin-top:25px;

background:#fff9e8;

border:3px dashed #ffb6d9;

padding:25px;

border-radius:10px;

color:#70465b;

animation:abrirCarta .5s;

}


.paper h3{

color:#ff6699;

}



@keyframes abrirCarta{

from{

transform:scale(.8);

opacity:0;

}


to{

transform:scale(1);

opacity:1;

}

}
/* PLAYER DE MUSICA */


.cd{

font-size:90px;

margin:20px;

animation:girar 3s linear infinite;

}



@keyframes girar{

from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}


}




.music-buttons{

display:flex;

justify-content:center;

gap:15px;

}



.music-buttons button{

background:#ffb6d9;

border:none;

border-radius:50%;

width:45px;

height:45px;

font-size:18px;

cursor:pointer;

color:white;

}



.music-buttons button:hover{

background:#ff79aa;

transform:scale(1.1);

}



#status{

margin-top:20px;

color:#ff6699;

font-weight:bold;

}