:root{
    --purple:oklch(71.4% .203 305.504);
    --background: oklch(12.9% .042 264.695);
    --gray: oklch(70.4% .04 256.788);
    --darker_gray: oklch(55.4% .046 257.417);
    --svg_background: oklch(62.7% .265 303.9 / 0.2);
    --section_background: oklab(0.208-0.00310889 -0.0418848 / 0.5);
    --hover_section_background: oklab(25.625999999999998% -0.00306 -0.04943 / 0.5);
}
body{
    background-color: var(--background);
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 24px 24px;
}
h2{
    font-family: monospace;
    font-weight: normal;
    font-size: 14px;
    color: var(--purple);
}
h3{
    font-size: 36px;
    font-weight: 500;
}
h4{
    font-family: monospace;
    font-weight: normal;
    font-size: 14px;
    color: var(--purple);
    margin-top: 0;
}
.upToTitle{
    font-size: 20px;
    font-weight: 500;
    color: white;
}
.event_svg{
    height: 24px;
    width: 24px;
    fill: none;
    stroke: var(--purple);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-grow: 0;
    flex-shrink: 0;
    background-color: var(--svg_background);
    padding: 10px;
    border-radius: 10px;
}
p{
    color: var(--gray);
    font-size: 16px;
}
.small_par{
    color: var(--darker_gray);
    font-size: 14px;
}
.upTo{
    max-width: 1100px;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    grid-gap: 2em 2em;
}
.upTo > div{
    border: 0.5px solid var(--darker_gray);
    border-radius: 10px;
    background-color: var(--section_background);
    display: flex;
    gap: 1em;
    padding: 24px;
}
.upcomingEvent{
    max-width: 1100px;
    display: flex;
    /* flex-direction: column; */
    /* align-items: flex-start; */
    gap: 2em;
}
/* #event_poster{
    border-radius: 10px 0 0 10px;
} */
.upTo > div {
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.upTo > div:hover{
    background-color: var(--hover_section_background);
    transform:scale(1.015);
    border: 0.5px solid var(--purple);
}
.past_poster{
    width: 300px;
    border-radius: 10px 10px 0 0;
}
.pastEvent{
    display: flex;
    gap: 2em;
    overflow: scroll;
    padding: 10px;
}
.pastEvent > div{
    max-width: 300px;
    border: 0.5px solid var(--darker_gray);
    border-radius: 10px;
    background-color: var(--section_background);
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.pastEvent p{
    padding: 0 24px;
    margin-top: 0;
}
.pastEvent > div {
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.pastEvent > div:hover{
    background-color: var(--hover_section_background);
    transform:scale(1.015);
    border: 0.5px solid var(--purple);
}