main {
    padding: 0;
    gap: 0rem;
}
.main__events-header {
    display: flex;
    overflow: auto;
    padding: 1rem 0;
}
.main__events-header a {
    padding: .5rem;
    min-width: max-content;
    aspect-ratio: 1/1;
    border: 2px solid var(--transparent-surface);
    outline: 1px dashed rgba(255,255,255,.075);
    outline-offset: -4px;
}
.main__events-header a:not(.active) {
    background: var(--transparent-surface);
}
.main__events-header a.active {
    background: hsla(43, 74%, 49%, .5);
    border: 2px solid hsla(43, 74%, 49%, 1);
    outline-color: goldenrod;
}    
.main__events-content-container {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to bottom, hsla(302, 60%, 12%, .5), transparent);
    position: relative;
    padding: 0;
}
.main__events-content-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--transparent-primary-purple);
    outline: 1px dashed var(--transparent-accent-purple);
    outline-offset: -4px;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 0%, transparent 75%);
    mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 75%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.main__events-content-container .percent-container {
    margin: 1rem;
    background: rgba(0,0,0,.125);
    border: 1px solid var(--transparent-primary-purple);
    outline: 1px dashed var(--transparent-accent-purple);
    outline-offset: -4px;
}
.main__events-content-container .percent-container .overflow {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
    width: 100%;
}
.main__events-content-container .percent-container img {
    height: 90%;
    width: auto;
}
.main__events-content-container a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    gap: .25rem;
    text-wrap: nowrap;
    overflow: hidden;
    min-height: 2.5rem;
    height: 2.5rem;
    transition: width .3s ease-in-out;
    position: relative;
    border-radius: 0 100vw 100vw 0;
    background: var(--transparent-primary-purple);
    background-image: linear-gradient(to right, transparent, var(--primary-purple));
}
.main__events-content-container a::before,
.main__events-content-container a::after {
    content: '';
    position: absolute;
}
.main__events-content-container a::before {
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-right: 1px dashed var(--accent-purple);
    border-left: none;
}
.main__events-content-container a::after {
    background-image: radial-gradient(hsla(249, 87%, 65%, .5) 1px, transparent 1px);
    background-size: 5px 5px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.main__events-content-container .subject-title-container {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(to right,transparent, hsla(241, 42%, 34%, .125),  #333279,hsla(241, 42%, 34%, .125), transparent);
    padding: .75rem;
    text-align: center;
    outline: 1px dashed var(--transparent-accent-purple);
    outline-offset: -4px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.main__events-content-container .subject-title-container p {
    color: var(--accent-txt-clr);
    font-size: .8rem;
}
@media(max-width: 480px) {
    .main__events-content-container a {
        font-size: .8rem;
    }
}