/* animations */
@keyframes panelButton_hover {
    from { background-color: transparent; }
    to { background-color: #6a6a6a; }
}

@keyframes panelButton_leave {
    from { background-color: #6a6a6a; }
    to { background-color: transparent; }
}

@keyframes showContextMenu {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hideContextMenu {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes showOptions {
    from { bottom: -150px; } /* Start off-screen (below the viewport) */
    to { bottom: 194px; } /* End just above the bottom panel */
}

@keyframes hideOptions {
    from { bottom: 194px; }
    to { bottom: -150px; } /* Start off-screen (below the viewport) */
}

/* styles */
body {
    background-image: url("wallpaper.png");
    background-size: cover; user-select: none;
}

body.no-scroll { overflow: hidden; }

#panel {
    position: fixed; display: flex;
    bottom: 0; flex-direction: row;
    left: 0; z-index: 2000;
    width: calc(100%);
    height: 45px; align-items: center;
    background-color: #444;
    border-style: none;
}

.panelButton {
    width: 36px; height: 36px; background-color: transparent;
    border-style: none; border-radius: 5px; margin-left: 4.3px;
    margin-top: 2.5px;
}

.panelButton:hover { animation: panelButton_hover 200ms forwards; }
.panelButton:not(:hover) { animation: panelButton_leave 200ms forwards; }

.rightClickMenu {
    width: 250px; height: fit-content; border-radius: 8px; opacity: 0.5;
    position: absolute; z-index: 1000; background-color: #4f4f4f;
    animation: showContextMenu 200ms forwards; min-height: 150px;
    padding: 5px; display: flex; flex-direction: column; align-items: center;
}

.cmButton {
    width: 100%; height: 40px; text-align: left;
    padding: 2px; background-color: transparent;
    border-radius: 10px; border-style: none; color: white;
    font-size: 15px; padding-left: 10px;
}

.cmButton:hover { animation: panelButton_hover 200ms forwards; }

#optionMenu {
    width: 275px;
    height: 150px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 20px;
    background-color: #4f4f4f;
    position: absolute;
    bottom: 0; /* Position relative to the parent container */
    left: 0;
    transform: translateY(100%); /* Start off-screen */
    z-index: 1000;
}