@layer default {
    #activities-app {
        .sort-function {
            font-size: 1.5rem;

            img {
                height: 1.5rem;
            }
        }

        .sort-function:hover {
            /* change to acs-yellow */
            filter: invert(85%) sepia(76%) saturate(1704%) hue-rotate(316deg) brightness(102%) contrast(101%);
        }

        .event-container {
            display: flex;
            padding: 1rem;
        
            img {
                width: 25%;
            }
        
            &>.event-description {
                padding: 2rem;
                width: 75%;
                background-color: var(--acs-grey);
        
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                flex-wrap: nowrap;
        
                &>.event-title{
                    font-size: 2.5rem;
                    color: var(--acs-purple);
                }
        
                &>.event-detail {
                    font-size: 1.5rem;
                    color: var(--acs-black);
                }
        
                .event-title:hover, .event-title:has(+.event-detail:hover) {
                    text-decoration: underline;
                }
            }

            .event-clicked-background {
                z-index: 100;
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                width: 100vw;
                background-color: rgba(0, 0, 0, 0.55);
                padding-top: 10vh;
                padding-bottom: 10vh;
                padding-left: 10vw;
                padding-right: 10vw;
                display: none;

                &.active {
                    display: block;
                }

                .event-clicked-container {
                    height: 80vh;
                    width: 80vw;
                    background-color: lightgray;
                    padding: 1rem;
                    position: relative;

                    .close-button {
                        position: absolute;
                        width: fit-content;
                        font-size: 2rem;
                        top: -5vh;
                        right: -0.5vw;
                        opacity: 0.5;

                        &:hover {
                            opacity: 1;
                        }

                        &::before, &::after {
                            position: absolute;
                            left: 15px;
                            content: ' ';
                            height: 33px;
                            width: 0.3rem;
                            background-color: white;
                        }

                        &::before {
                            transform: rotate(45deg);
                          }
                        &::after {
                        transform: rotate(-45deg);
                        }
                    }

                    .event-clicked-content {
                        position: absolute;
                        top: 5vh;
                        left: 5vw;
                        backdrop-filter: blur(5px);
                        color: white;
                    }
                }
            }

            #event-clicked-container-3::before {
                content: "";
                display: block;
                height: 100%;
                width: 100%;
                background-image: url(../img/activities/clicked/bunkasai.png);
                background-size: contain;
                filter: brightness(0.7) blur(0.5px);
            }
        }
    }
}