/* ==========================================================
EVENTS.CSS
Along the bottom edge of the screen.
========================================================== */

/* ======================================================
current version
v0.3.7
========================================================= */

.events-title {
    cursor: default;
}

.sky-header {
    position: absolute;
    top: -4rem;
    left: 0;
    width: 100%;
    height: 13rem;
    background-image: url(../images/background/night.jpg);

    /* The soft blend: solid for the top 100px, fades to transparent at 200px */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

.sky-changer {
    position: absolute;
    top: 1rem;
    right: 5.5rem;
    display: flex;
    gap: 0.5rem;
}

.sky-changer button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    color: white;
    padding: 0.5rem;
    border-radius: 0.2rem;
    gap: 0.5rem;
    cursor: pointer;

}