/* -------------------------------------------------- events -------------------------------------------------- */

h1{
    margin-block-start: 0em;
    margin-block-end: 0em;

}
#content{
    padding: 0 2vw 10svh 2vw;
}
.event{
    margin: 2vw 0; 
}
a:has(.event):nth-of-type(even) .event{
    transform: rotate(-0.5deg);
}
a:has(.event):nth-of-type(odd) .upcoming.event{
    transform: rotate(1.5deg);
}
a:has(.event):nth-of-type(odd) .past.event{
    transform: rotate(1deg);
}
a:has(.event):nth-of-type(3n) .event{
    transform: rotate(-1deg);
}


a:has(.event):nth-child(4n+1) .event.past {
    background: var(--eClr1); 
}
a:has(.event):nth-child(4n+2) .event.past {
    background: var(--eClr2);
}
a:has(.event):nth-child(4n+3) .event.past {
    background: var(--eClr3);
}
a:has(.event):nth-child(4n+4) .event.past {
    background: var(--eClr4);
}


.upcoming.padTop{
    padding-top: 4vw;
}
.upcoming{
    background: var(--eventClr);
    /*    font-size: 80px;*/
    /*    font-size: clamp(6svh,7.95vw,120px);*/
    font-size: clamp(var(--font-size),10svh,10vw);
    text-align: center;
    padding: 2vw 4vw;
    padding: 2vw 1vw;
    width: 100%;
    max-width: 96vw;
    letter-spacing: -0.15vw;
    color: #000000;
}
.past{
    background: var(--pasteventClr);
    color: #000000;
    font-size: var(--font-size);
    text-align: left;
    padding: 2vw 4vw;
}

.upcoming:hover, .past:hover{
    background: var(--color) !important;
    color: var(--background) !important;
}

body .past p, body .past h3{
    color: #000000;
}
body .past:hover p, body .past:hover h3{
    color: var(--background) !important;
}
h2{
    /*    font-size: 80px;*/
    font-size: clamp(6svh,7.95vw,120px);
    padding: 1.5vw 0 0 0;
/*    padding: 1.5vw 1vw 0 1vw;*/
}
.upcoming h2{
    font-size: clamp(6svh,7.95vw,120px);
    margin: 0 0 3rem 0;
    padding: 0 1vw;
}
.upcoming p, .upcoming h3{
    /*    line-height: 0.9;*/
    line-height: 1;
}