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

body{

height:100vh;
overflow:hidden;

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

font-family:tahoma,sans-serif;

background:black;
}

/* DESKTOP */

.desktop{

width:1400px;
height:800px;

position:relative;

overflow:hidden;

border:3px solid white;

background:#ececec;
}

/* WALLPAPER */

.wallpaper{

position:absolute;
inset:0;

background-image:url("background4.jpg");

background-size:cover;
background-position:center;

z-index:0;
}

/* CRT EFFECT */

.desktop::after{

content:"";

position:absolute;
inset:0;

background:
repeating-linear-gradient(
transparent,
transparent 2px,
rgba(255,255,255,.04) 3px
);

pointer-events:none;

z-index:999;
}

/* ICONS */

.icons{

position:absolute;

left:15px;
top:50px;

display:flex;
flex-direction:column;
gap:18px;

z-index:10;
}

.icon{

width:70px;

text-decoration:none;

display:flex;
flex-direction:column;
align-items:center;

color:white;

font-size:12px;

text-shadow:1px 1px 2px black;
}

.icon img{

width:60px;
margin-bottom:5px;
}

/* WINDOWS */

.window{

position:absolute;

background:#f5f5f5;

border-top:2px solid white;
border-left:2px solid white;

border-right:2px solid #888;
border-bottom:2px solid #888;

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

overflow:hidden;
}

/* TITLE BAR */

.titlebar{

height:28px;

background:linear-gradient(
to right,
#d8d8d8,
#f8f8f8
);

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

padding:0 10px;

font-size:12px;
font-weight:bold;

border-bottom:1px solid #bdbdbd;
}

.buttons{

display:flex;
gap:4px;
}

.buttons span{

width:12px;
height:12px;

background:white;

border:1px solid #777;
}

.content{

padding:10px;
}

/* PROFILE */

.profile{

width:260px;
height:230px;

left:120px;
top:40px;

z-index:5;
}

.profile-content{

display:flex;
gap:10px;
}

.profile-pic{

width:100px;
height:140px;

object-fit:cover;
}

/* ABOUT */

.about{

width:620px;
height:400px;

left:330px;
top:80px;

z-index:4;
}

.about-content{

display:flex;
height:100%;
}

.login-box{

width:180px;

padding-right:12px;

border-right:1px solid #d6d6d6;

display:flex;
flex-direction:column;
gap:8px;
}

.login-image{

width:100%;

height:130px;

object-fit:cover;

margin-bottom:10px;

border:1px solid #cfcfcf;
}

.login-box input{

padding:7px;
}

.login-box button{

padding:8px;

background:white;

border:1px solid gray;
}

.about-box{

display:flex;

gap:15px;

padding-left:15px;
}

.about-box img{

width:180px;
height:260px;

object-fit:cover;
}

.textbox{

width:220px;
height:260px;

overflow-y:auto;

background:white;

border:1px solid silver;

padding:10px;
}

/* PLAYLIST */

.playlist{

width:300px;
height:260px;

right:150px;
top:50px;

z-index:8;
}

.album{

width:100%;

height:120px;

object-fit:cover;

margin-bottom:10px;
}

/* GALLERY */

.gallery{

width:400px;
height:230px;

left:280px;
bottom:70px;

z-index:7;
}

.gallery-content{

display:grid;

grid-template-columns:1fr 1fr;
gap:10px;
}

.gallery-content img{

width:100%;
height:70px;

object-fit:cover;
}

/* FILES */

.files{

width:280px;
height:180px;

right:220px;
bottom:90px;

z-index:6;
}

.files-content{

display:flex;
flex-direction:column;
gap:10px;
}

.files-content a{

text-decoration:none;
color:black;
}

/* CHARACTER */

.angel{

position:absolute;

right:20px;
bottom:30px;

height:450px;

z-index:2;
}

/* TASKBAR */

.taskbar{

position:absolute;

bottom:0;
left:0;

width:100%;
height:35px;

background:#ececec;

border-top:2px solid white;

display:flex;
align-items:center;

padding:4px;
}

.start{

padding:5px 14px;

font-weight:bold;

background:white;

border-top:2px solid white;
border-left:2px solid white;

border-right:2px solid #888;
border-bottom:2px solid #888;
}

.open-window{

margin-left:10px;

padding:5px 14px;

background:#f5f5f5;

border:1px solid #999;
}

.clock{

margin-left:auto;
padding-right:10px;
}

/* SCROLLBAR */

::-webkit-scrollbar{

width:10px;
}

::-webkit-scrollbar-track{

background:#f0f0f0;
}

::-webkit-scrollbar-thumb{

background:#bdbdbd;

border:1px solid white;
}