.banner {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.event-logo {
    max-width: 400px;
}

.event {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-items: center;
    text-align: center;
    color: white;
}

.contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 60px;
    padding: 20px 100px 100px;
    max-width: 1300px;
    width: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 20px;
    position: relative;
    max-width: 1200px;
    width: 100%;
}

.date {
    padding: 10px 20px;
    border-radius: 50px;
}

.place {
    font-size: 1.5rem;
}

.desc {
    font-weight: 500;
    font-size: 1.3rem;
}

.visit-website {
    color: #ffffff;
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
    border: #ffffff solid 3px;
    border-radius: 50px;
    padding: 10px 25px;
    background-color: transparent;
    transition: color 0.5s ease-in-out, border 0.5s ease-in-out;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.heading {
    font-size: 2rem;
}

.youtube {
    aspect-ratio: 16/9;
    max-width: 700px;
    max-height: 400px;
    height: 100%;
    width: 100%;
}

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.stat {
    padding: 10px 20px;
    border-radius: 15px;
    width: 160px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: default;
}
  
.stat h3 {
    font-size: 2em;
    margin: 0;
}
  
.stat p {
    margin: 0;
    font-size: 1.2em;
}
  


.swiper {
    aspect-ratio: 3/2;
    height: 100%;
    width: 100%;
    max-height: 700px;
}

.swiper-slide {
    justify-content: center;
    align-items: center;
}

.swiper-pagination {
    font-weight: 800;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-button-prev {
    color: unset;
    left: var(--swiper-navigation-sides-offset, 20px);
    right: auto;
}

.swiper-button-next {
    color: unset;
    right: var(--swiper-navigation-sides-offset, 20px);
    left: auto;
}

.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 10px);
}

.swiper-scrollbar {
    background-color: #ffffff33;
}



.palimpsesto {
    background-color: #E5DDC6;
    color: #D46930;
}

.palimpsesto .desc {
    color: #AD9F62;
}

.palimpsesto .date, .palimpsesto .stat, .palimpsesto .swiper-scrollbar-drag {
    background-color: #D46930;
    color: #E5DDC6;
}

.palimpsesto .stat:hover {
    background-color: #AD9F62;
}

.palimpsesto .visit-website {
    color: #AD9F62;
    border: #AD9F62 solid 3px;
}

.palimpsesto .visit-website:hover {
    color: #D46930;
    border: #D46930 solid 3px;
}



.pangea {
    background-color: #F2EFE7;
    color: #1B6E58;
}

.pangea .heading, .pangea .place {
    color: #743697;
}

.pangea .date, .pangea .stat {
    background-color: #743697;
    color: #F2EFE7;
}

.pangea .swiper-scrollbar-drag, .pangea .stat:hover {
    background-color: #1B6E58;
}

.pangea .visit-website {
    color: #1B6E58;
    border: #1B6E58 solid 3px;
}

.pangea .visit-website:hover {
    color: #743697;
    border: #743697 solid 3px;
}



.antistixis {
    background-color: #0A0006;
    color: #fff;
}

.antistixis .heading, .antistixis .place {
    color: #5CC9E2;
}

.antistixis .date, .antistixis .stat {
    background-color: #5CC9E2;
    color: #fff;
}

.antistixis .swiper-scrollbar-drag, .antistixis .stat:hover {
    background-color: #942169;
}

.antistixis .visit-website {
    color: #fff;
    border: #fff solid 3px;
}

.antistixis .visit-website:hover {
    color: #5CC9E2;
    border: #5CC9E2 solid 3px;
}



.halcyon {
    background-color: #624559;
    color: #DDDDE5;
}

.halcyon .heading, .halcyon .place {
    color: #F28157;
}

.halcyon .date, .halcyon .stat {
    background-color: #F28157;
    color: #DDDDE5;
}

.halcyon .swiper-scrollbar-drag, .halcyon .stat:hover {
    background-color: #23D2AA;
}

.halcyon .visit-website {
    color: #F28157;
    border: #F28157 solid 3px;
}

.halcyon .visit-website:hover {
    color: #23D2AA;
    border: #23D2AA solid 3px;
}



.xyz {
    background-color: #000000;
    color: #fff;
}



.blank {
    background-color: #242321;
    color: #D9D8D9;
}

.blank .visit-website {
    color: #D9D8D9;
    border: #D9D8D9 solid 3px;
}

.blank .visit-website:hover {
    color: #8B1B2B;
    border: #8B1B2B solid 3px;
}



.arctos {
    background-color: #17012B;
}



.mosaic {
    background-color: #FAAE54;
    color: #BF2720;
}



.flow {
    background-color: #ffffff;
    color: black;
}



.flow .visit-website {
    color: black;
    border: black solid 3px;
}

.flow .visit-website:hover {
    color: #eb0028;
    border: #eb0028 solid 3px;
}



.inertia {
    background-color: #DEDBD2;
    color:#423F3A;
}



.emerging-paths {
    background-color: #AF2012;
    color: white;
}



.rere {
    background-color: black;
    color: white;
}

.rere .visit-website:hover {
    color:#eb0028;
    border: #eb0028 solid 3px;
}

#rere-banner {
    position: relative;
    max-height: 500px;
    width: 100%;
}

#rere-how {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

#rere-logo {
    max-height: 250px;
}

@media (max-width: 600px) {
    .contents {
        padding: 20px;
    }

    .desc {
        font-size: 1rem;
    }

    .stats {
        gap: 10px;
    }
}