/**********************************************************/
/***                        HERO                        ***/
/**********************************************************/

@media (min-width: 500px) {
    .hero-img {
        width: 48%;
        max-height: 90vh;
    }
}

#hero {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-img {
    width: 100vw;
}

#heroText {
    font-family: "Shadows Into Light", cursive;
    color: white;
    aspect-ratio: 5;
    width: 100vw;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
    position: relative;
    overflow: hidden;
    padding: 300px 0;
}

@media (max-width: 736px) {
    #heroText {
        font-size: 3rem;
    }
}

#heroText::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;

    display: block;
    background-image: url("/images/grass_building.jpg");
    background-size:cover;
    width: 100%;
    height: 100%;

    -webkit-filter: blur(5px) brightness(0.7);
    -moz-filter: blur(5px) brightness(0.7);
    -o-filter: blur(5px) brightness(0.7);
    -ms-filter: blur(5px) brightness(0.7);
    filter: blur(5px) brightness(0.7);
}

/**********************************************************/
/***                       EVENTS                       ***/
/**********************************************************/

#events {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}

.event-container:first-of-type {
    background-color: var(--accent) !important;
    margin-bottom: 100px;
    color: var(--background) !important;
}

.event-container {
    background-color: var(--primary-200);
    display: grid;
    grid-template-columns: 30% 70%;
    border-radius: 20px;
    width: 70%;
    padding: 50px;

    & .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: "Shadows Into Light", cursive;
        font-weight: 900;
        font-style: normal;
        font-size: 2rem;
        letter-spacing: 1px;
        gap: 20px;

        & div {
            transform: rotate(-15deg);
        }
    }

    & .content {
        display: grid;
        grid-template-columns: auto auto auto;
        text-align: left;
        padding: 20px;

        & p {
            font-size: 2rem;
            align-self: flex-end;

            & span {
                font-size: 3rem;
                font-weight: 700;
            }
        }
    }
}


@media (max-width: 1214px) and (min-width: 956px) {
    .title {
        font-size: 1.5rem !important;
    }
    .content p {
        font-size: 1.5rem !important;

        & span {
            font-size: 2.25rem !important;
        }
    }
}

@media (max-width: 955px) and (min-width: 651px) {
    .title {
        font-size: 1rem !important;
    }
    .content p {
        font-size: 1rem !important;

        & span {
            font-size: 1.5rem !important;
        }
    }
}

@media (max-width: 650px) {
    .title {
        font-size: 1rem !important;
    }
    .content p {
        font-size: 0.75rem !important;

        & span {
            font-size: 1rem !important;
        }
    }
}





/**********************************************************/
/***                       Old                          ***/
/**********************************************************/

/*.community-hub-items {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-around;
    flex-wrap: wrap;
}

.community-hub-item {
    display: flex;
    flex-direction: column;
    text-align: centre;
    align-items: center;
    justify-content: center;
    height: 200px;
    width: 300px;
    background-color: var(--accent);
    color: var(--bg);
}

.community-hub-item .svg-holder {
    width: 13vw;
    aspect-ratio: 1;
    overflow: hidden;
}

.svg-holder svg:nth-of-type(2) {
    translate: 0 -13vw;
}*/