html, body { margin: 0; overflow: hidden; background-image: url('./images/bg.jpg'); background-repeat: no-repeat; background-size: cover; }
@font-face { font-family: 'Segoe UI Variable'; src: url(./fonts/SegoeUIVF.ttf); }

p, img {
    pointer-events: none;
    -webkit-user-select: none;      
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}

button p {
    padding: 0;
    margin: 0;
}

#taskbar {
    width: -webkit-fill-available;
    width: -moz-available;
    background: #202020;
    height: 46px;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    z-index: 1000;
}

#taskbar button {
    background: transparent;
    padding: 0;
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    margin: 2px;
    border: none;
    border-radius: 5px;
    transition: all 0.1s ease;
}

#taskbar button img {
    height: 23px;
    transition: all 0.1s ease;
}

#taskbar button:hover {
    background: #2d2d2d;
}

#taskbar button:active img {
    height: 19px
}

#desktop {
    width: -webkit-fill-available;
    width: -moz-available;
    height: calc(100vh - 46px);
    color: white;
    font-family: 'Segoe UI Variable'
}

#desktop .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 110px;
    padding: 10px;
    margin: 5px;
    border-radius: 1px;
}

#desktop .icon p {
    text-align: center;
    margin: 0;
}

#desktop .icon img {
    width: 48px;
    height: 48px;
}

#desktop .icon:hover {
    background: rgb(128 128 128 / 30%);;
}

@media screen and (max-width: 992px) {
    .mobileDIb {
        display: block;
    }
}