/* ===========================
   FONTS
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=IBM+Plex+Sans+JP:wght@300;400&display=swap');

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

body{

overflow:hidden;

font-family:'IBM Plex Sans JP',sans-serif;

background:url("YOURBACKGROUND.png");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

color:#51484b;

}


/* ===========================
BOOT
=========================== */

#boot{

position:fixed;

inset:0;

background:#efe8ea;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

transition:1s;

}


#boot-logo{

font-family:"Cormorant Garamond",serif;

font-size:62px;

letter-spacing:2px;

margin-bottom:24px;

}


#boot-text{

font-size:14px;

opacity:.7;

margin-bottom:20px;

}


#boot-bar{

width:260px;

height:8px;

background:#d8cfd2;

overflow:hidden;

}


#boot-progress{

width:0%;

height:100%;

background:#b8a9af;

animation:boot 2s linear forwards;

}


@keyframes boot{

to{

width:100%;

}

}


/* ===========================
DESKTOP
=========================== */

#desktop{

width:100vw;

height:100vh;

animation:fadeDesktop .6s;

}


@keyframes fadeDesktop{

from{

opacity:0;

}

to{

opacity:1;

}

}


/* ===========================
WINDOW
=========================== */

.window{

position:absolute;

background:

rgba(246,243,244,.90);

backdrop-filter:blur(8px);

border:

1px solid #c5b8bd;

box-shadow:

0 0 0 1px rgba(255,255,255,.7) inset,

10px 10px 35px rgba(30,20,25,.18);

overflow:hidden;

border-radius:2px;

}


/* ===========================
TITLE BAR
=========================== */

.titlebar{

height:24px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 8px;

cursor:move;

background:

linear-gradient(

#cbc0c3,

#b5aaad

);

border-bottom:1px solid #9d9195;

font-size:12px;

text-transform:uppercase;

letter-spacing:1px;

}


/* ===========================
BUTTON
=========================== */

.close-btn{

width:15px;

height:15px;

display:flex;

justify-content:center;

align-items:center;

background:#ddd2d5;

border:

1px solid #887d81;

cursor:pointer;

font-size:10px;

transition:.2s;

}

.close-btn:hover{

background:#f1dfe5;

}


/* ===========================
MENU
=========================== */

.menubar{

height:20px;

display:flex;

gap:18px;

align-items:center;

padding-left:12px;

background:#e9e2e4;

font-size:11px;

border-bottom:1px solid #d5c8cc;

}


/* ===========================
CONTENT
=========================== */

.window-content{

padding:22px;

overflow:auto;

height:calc(100% - 44px);

}


/* ===========================
HEADINGS
=========================== */

.main-title{

font-family:

"Cormorant Garamond",serif;

font-size:70px;

margin-bottom:16px;

}


.desc{

line-height:1.8;

font-size:13px;

max-width:440px;

}


.divider{

height:1px;

margin:18px 0;

background:

linear-gradient(

to right,

transparent,

#c7bcc0,

transparent

);

}


/* ===========================
DESKTOP ICONS
=========================== */

.desktop-icon{

position:absolute;

width:72px;

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

cursor:pointer;

transition:.18s;

}

.desktop-icon:hover{

transform:translateY(-2px);

filter:drop-shadow(0 0 8px rgba(255,230,236,.7));

}

.desktop-icon img{

width:42px;

}

.desktop-icon span{

font-size:12px;

}


/* ===========================
TASKBAR
=========================== */

.taskbar{

position:fixed;

bottom:0;

left:0;

width:100%;

height:34px;

display:flex;

align-items:center;

gap:6px;

padding:0 6px;

background:

rgba(214,206,209,.92);

backdrop-filter:blur(8px);

border-top:1px solid white;

}


.start-button,

.task-item{

padding:4px 14px;

background:#ddd5d8;

border-top:1px solid white;

border-left:1px solid white;

border-right:1px solid #6f6569;

border-bottom:1px solid #6f6569;

cursor:pointer;

font-size:13px;

}

.start-button:hover,
.task-item:hover{

background:#eee5e8;

}


.clock{

margin-left:auto;

padding-right:12px;

font-size:13px;

cursor:pointer;

}


/* ===========================
SCROLLBAR
=========================== */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#bcaeb3;

}

::-webkit-scrollbar-track{

background:#e7dfe2;

}