@font-face {
    font-family: 'AlexBrush';
    src: url('/public/client/fonts/AlexBrush-Regular.woff2') format('woff2'), url('/public/client/fonts/AlexBrush-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NotoSans';
    src: url('/public/client/fonts/NotoSans-Regular.woff2') format('woff2'), url('/public/client/fonts/NotoSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --borderRadius: 6px;
    --bgColorPrimary: #eee;
    --bgColorSecondary: rgba(255,255,255,0.7);
    --colorPrimary: #6FA82C;
    --colorAccent: #e87334;
    --colorWhite: #fff;
    --colorText: #444;
    --colorTextSecondary: #777;
}

html {
    background-color: var(--bgColorPrimary);
}

html, body {
    font-family: 'NotoSans', sans-serif;
    font-size: 16px;
    color: var(--colorText);
}

.wrapper {
    width: calc(100% - 20px);
    max-width: 880px;
    margin: 0 auto;
}

.header-image {
    width: 100%;
}

.header-year {
    color: var(--colorAccent);
    font-family: AlexBrush, sans-serif;
}

main {
    margin: 20px auto!important;
}

/* Desktop */
@media screen and (min-width: 920px) {
    .mobile {
        display: none !important;
    }

    .header-year {
        font-size: 80px;
        font-weight: 900;
        margin: -50px 0 -30px 620px;
    }

    nav {
        background-color: var(--colorPrimary);
        display: flex;
        justify-content: space-evenly;
        margin-top: 20px;
        border-radius: var(--borderRadius);
    }

    nav a {
        color: white;
        padding: 10px;
    }

    .decor-tree {
        opacity: 0.8;
    }

    .decor-tree-left {
        width: 250px;
    }

    .decor-tree-right {
        width: 290px;
    }
}

/* Mobile */
@media screen and (max-width: 899px) {
    .desktop {
        display: none !important;
    }

    .header-year {
        font-size: 36px;
        font-weight: 900;
        margin: -25px 40px 0 0;
    }

    .header-sub {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--colorPrimary);
        color: white;
        padding: 10px;
        border-radius: var(--borderRadius);
    }

    .header-sub svg path {
        fill: #fff;
    }

    nav {
        background-color: var(--bgColorSecondary);
        margin-top: 10px;
        padding: 5px 0;
        border-radius: var(--borderRadius);
        display: none;
    }

    nav a {
        color: var(--colorText);
        display: block;
        padding: 5px 10px;
    }

    .decor-tree {
        opacity: 0.3;
    }

    .decor-tree-left {
        width: 160px;
    }

    .decor-tree-right {
        width: 140px;
    }
}

svg.icon {
    width: 20px;
    height: 20px;
}

.decor-tree {
    position: absolute;
    top: 0;
    z-index: -1;
}

.decor-tree-left {
    left: 0;
}

.decor-tree-right {
    right: 0;
}

.page-title {
    font-size: 18px;
    margin: 10px 0;
}

.filter-search {
    width: 100%;
    max-width: 600px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: var(--borderRadius);
    padding: 20px;
}

.filter-search-row {
    display: flex;
    justify-content: space-between;
}

.filter-search-row:not(:last-child) {
    margin-bottom: 10px;
}

.filter-search input, .filter-search select {
    display: block;
    outline: none;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 5px;
    height: 40px;
    background-color: #fff;
}

.filter-search select {
    width: calc(50% - 5px);
}

.filter-search__search-by-name {
    width: calc(100% - 50px);
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}

.filter-search__search-by-name__button {
    width: 50px;
    background-color: #e0e0e0;
    border-top-right-radius: var(--borderRadius);
    border-bottom-right-radius: var(--borderRadius);
    display: flex;
    justify-content: center;
    align-items: center;
}

.event {
    background-color: var(--bgColorSecondary);
    display: flex;
    width: 100%;
    max-width: 600px;
    padding: 10px;
    border-radius: var(--borderRadius);
    margin-bottom: 10px;
}

.event-timings {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 75px;
    margin-right: 10px;
}

.event-timings-time-start {
    font-size: 16px;
    font-weight: 900;
}

.event-timings-time-end {
    font-size: 12px;
    color: var(--colorTextSecondary);
}

.event-timings-weekday {
    font-size: 12px;
    color: var(--colorTextSecondary);
    margin-top: 5px;
}

.event-timings-unknown {
    font-size: 12px;
    color: var(--colorTextSecondary);
}

.event-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: calc(100% - 140px);
    margin-right: 20px;
}

.event-location {
    font-size: 13px;
    color: var(--colorTextSecondary);
    margin-top: 5px;
}

.event-like {
    width: 50px;
}

.event-like-button {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--borderRadius);
    padding: 5px;
    cursor: pointer;
}

.event:not(.event_favourite) .event-like-button {
    border: 1px solid var(--colorText);
    background-color: var(--bgColorSecondary);
}

.event:not(.event_favourite) .icon path {
    fill: var(--colorText)
}

.event.event_favourite .event-like-button {
    background-color: var(--colorPrimary);
}

.event.event_favourite .icon path {
    fill: var(--bgColorSecondary)
}

.event:not(.event_favourite) .icon-heart-fill {
    display: none;
}

.event.event_favourite .icon-heart-silhouette {
    display: none;
}

.main-text {
    margin: 20px 0;
}

.post {
    margin-bottom: 20px;
    background-color: var(--bgColorSecondary);
    padding: 20px;
    border-radius: var(--borderRadius);
}

.post-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.post-avatar {
    width: 24px;
    height: 24px;
    background-size: cover;
    margin-right: 10px;
}

.post-time {
    font-size: 12px;
    color: #777;
}

.post-title {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 10px;
}

.go-to-control {
    margin-bottom: 10px;
    background-color: #337ab7;
    color: white;
    display: block;
    padding: 10px;
    border-radius: var(--borderRadius);
    position: fixed;
    left: 10px;
    top: 11px;
    font-size: 14px;
}.page {
     background-color: var(--bgColorSecondary);
     padding: 10px;
     border-radius: var(--borderRadius);
     margin-top: 10px;
 }

.page-content h4 {
    font-size: 20px;
    font-weight: 900;
    margin-top: 10px;
}

.page-content h5 {
    font-size: 18px;
    margin-top: 10px;
    color: var(--colorPrimary);
    margin-bottom: 5px;
}

.page-content a {
    color: #466c1a!important;
    text-decoration: underline;
    border-radius: 6px;
    display: inline-block;
    cursor: pointer;
}

.page-content p {
    margin-bottom: 5px;
}