I added a draggable welcome window

This is my operating system, Hilo OS

I started working on the Web OS Mission, and so far I have added:

• A taskbar with the time and a button to open the welcome screen
• A window with a header that has a working close button
• The ability to drag the window around
• A desktop background

It took me a while to get the window to look nice and for all of the parts to line up, but here is what I ended up with:

.window {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f2e6e67f;
    backdrop-filter: blur(10px);
    color: #190000;
    border: solid;
    width: 400px;
    position: absolute;
    top: 50%;    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(-5px 5px 2px #0000008b);
    font-family: "Micro 5", sans-serif;
    font-weight: 400;    font-style: normal;
}

.windowcontent {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 10px;
}

.windowheader {
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    width: 98%;
    margin: 0px 0px 10px 0px;
    padding: 5px;
    background-color: #00000091;
    backdrop-filter: blur(10px);
    color: #190000;
    font-family: "Pixelify Sans", sans-serif;
    font-weight: 500;    font-style: normal;
}

The header’s size isn’t perfect, but I just had to settle on width: 98%; and margin: 0px 0px 10px 0px; padding: 5px; for now.