body {
        background-image: url(/assets/images/background_tileable.png) !important;
        background-repeat: repeat !important;
        background-origin: padding-box;
        background-size: 164px !important;
    }

.nav_logo {
    background: black !important;
    backdrop-filter: none !important;
}
.title {
    margin-top: 200px; 
    width: 100%;
    height: 1px; 
    text-align: center; 
    font-weight: 700;
    font-size: 64px;
    color: var(--titletext);
    align-items: center;
    margin-bottom: 120px;
    letter-spacing: 0.04em;
}

.all-events {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    gap: 20px 50px; 
    justify-content: center;
    padding-left: 0;
    list-style: none;
}
.event_container_details img:last-child {display: none;}
.event-container-old { filter: saturate(0.2); opacity: 0.7; user-select: none; pointer-events: none; }
.event-container , .event-container-old {
  width: 420px;
  height: auto;
  justify-content: space-evenly;
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: white;
  border-radius: 15px;
  margin-bottom: 25px;
  box-sizing: border-box;
  break-inside: avoid;
}
    .event-title            {
        color: var(--titletext);
        font-weight: bold;
        font-size: 32px;

    }
    .event-startend-date , .event-startend-time {
        color: grey;
        display: flex;
        font-size: 14px;
        justify-content: space-between;
    }
    .event-location         {
        font-size: 14px;
        margin: auto;
        width: fit-content;
        color: grey;

    }
    .event-description      {
        margin-top: 10px;
        margin-bottom: 5px;
    }
    .event-image            {
        aspect-ratio: 16 / 9;
        border-radius: 10px;

    }
    .event-get-ticket       {
        width: 100%;
        height: 50px;

        margin-top: 10px;

        font-size: 18px;
        line-height: 50px;
        cursor: pointer;
        user-select: none;

        text-align: center;
        border-radius: 10px;
        display: block;

        font-weight: bold;
        background: var(--titletext);
        color: white;
    }

@media (max-width: 650px) {
    .event-image {aspect-ratio: 16 / 9;}
    .event-title {font-size: 24px;}
    .event-container, .event-container-old {
        width: 320px;
    }
}

input[type=submit] {
    color: white;
    background: var(--titletext);
    font-weight: bold;
    margin-top: 5px;
}
input, select {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    text-indent: 5px;
    background: rgba(245, 245, 245, 0.25);
    border: 1px solid #C2C2C2;
    border-radius: 5px;
    background: white;
}

.event_container_details {display: flex; margin: -100px auto auto auto; width: 100%; justify-content: center;}
.event_info              {  display: flex; flex-direction: column; padding: 15px; row-gap: 15px; }
.info_details            {max-width: 750px;}
.info_title              {color: var(--titletext); text-transform: uppercase;  font-weight: bold; font-size: 68px;}
.event_details           {}
.details                 {display: flex; flex-direction: column; color: grey;}
.details_day             {display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap;}
.details_time            {display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap;}
.details_startday        {}
.details_endtday         {}
.details_starttime       {}
.details_endtime         {}
.details_location        {margin: 10px auto auto auto;}
.about_container         { width: auto; }
.details_about           {color: var(--titletext); font-weight: bold; font-size: 24px;}
.about_text              {max-width: 600px;}
.details_form_about      {display: flex; width: 100%; gap: 15px;}
.event_form_container {display: flex; flex-direction: column; gap: 5px; max-width: 450px;}
.default_inputs {display: flex; gap: 5px; margin-bottom: 5px;}
.custom_inputs {display: flex; flex-wrap: wrap; margin-top: 5px; gap: 5px;}


@media (max-width: 1335px){
    .details_form_about {
        flex-direction: column;
    }    .details {
        width: 100%;
    }
    .info_title {text-align: center; font-size: 42px;}
    .about_container, .about_text {
        width: 100%;
        max-width: none;
    }
}
@media (max-width: 820px) {
    .event_info {margin-top: 50px;}
}
@media (max-width: 1335px){
    .event_container_details img:last-child {display: flex; margin: auto; margin-top: 30px;}
    .event_container_details img:first-child {display: none;}
}