*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"MS Sans Serif",Tahoma,sans-serif;
}

body{
    background:#008080;
    height:100vh;
    overflow:hidden;
}

.desktop{
    height:calc(100vh - 40px);
    padding:15px;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-content:flex-start;
    gap:25px;
}

.icon{
    width:80px;
    text-align:center;
    color:white;
    cursor:pointer;
    padding:5px;
}

.icon:hover{
    background:rgba(255,255,255,.2);
}

.icon img{
    width:40px;
    display:block;
    margin:auto;
    margin-bottom:5px;
}

.window{
    position:absolute;
    top:60px;
    left:150px;
    width:650px;

    background:#c0c0c0;

    border-top:2px solid white;
    border-left:2px solid white;
    border-right:2px solid #404040;
    border-bottom:2px solid #404040;

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

.about-window{
    display:none;
    left:250px;
    top:120px;
    width:450px;
}

.titlebar{
    background:#000080;
    color:white;
    padding:4px 8px;

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

    font-weight:bold;
}

.title-buttons button{
    width:20px;
    height:20px;
    cursor:pointer;
}

.content{
    padding:20px;
    color:black;
}

.project{
    background:white;
    padding:8px;
    margin-bottom:10px;
    border:1px solid gray;
}

.project a{
    text-decoration:none;
    color:#000080;
    font-weight:bold;
}

.taskbar{
    position:fixed;
    bottom:0;
    left:0;
    right:0;

    height:40px;

    background:#c0c0c0;

    border-top:2px solid white;

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

    padding:0 10px;
}

.start{
    padding:5px 15px;
    font-weight:bold;
    cursor:pointer;
}

.clock{
    background:white;
    border:1px solid gray;
    padding:4px 10px;
}

@media(max-width:768px){

.window{
    width:90%;
    left:5%;
}

.about-window{
    width:90%;
    left:5%;
}

}