* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    font-weight: inherit;
}

html {
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #444444;
    font-weight: 400;
}

a {
    text-decoration: underline;
    transition: 100ms ease-out color;

    &:hover {
        color: #FF870F;
    }
}

html,
body {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

body {
    position: relative;
}

header {
    display: flex;
    justify-content: center;

    a {
        text-decoration: none;
    }

    .width-limiter {
        width: min(100vw, 1200px);
        display: flex;
        flex-direction: column;
        padding: 20px;

        @media screen and (min-width:700px) {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        #home {
            display: flex;
            align-items: center;
            gap: 10px;

            #logo {
                margin-bottom: 15px;
                height: 50px;
                aspect-ratio: auto;
            }
        }

        menu {
            ul {
                display: flex;
                flex-direction: column;

                @media screen and (min-width:700px) {
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                }

                list-style: none;

                li {
                    a {
                        display: block;
                        line-height: 1.5em;
                        padding: 5px 0px;

                        @media screen and (min-width:700px) {
                            padding: 5px 10px;
                        }
                    }
                }
            }
        }
    }
}

main {
    width: min(100vw, 1200px);
    padding: 50px 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 200px;

    @media screen and (min-width:700px) {
        padding: 200px 20px;
    }

    #about-us {
        display: flex;
        flex-direction: column;
        gap: 20px;

        h2 {
            max-width: 600px;
            margin-bottom: 50px;
        }

        p {
            max-width: 500px;
        }
    }

    h1 {
        font-size: 2.4rem;
    }

    h2 {
        font-size: 2rem;
    }

    ul {
        list-style: none;
    }

    .section-title {
        padding-bottom: 20px;
    }

    .event-grid {
        display: grid;
        gap: 200px 20px;
        padding: 50px 0;
        grid-template-columns: 1fr;

        @media screen and (min-width: 660px) {
            grid-template-columns: 1fr 1fr;
        }

        @media screen and (min-width: 980px) {
            grid-template-columns: 1fr 1fr 1fr;
        }

        .event-card {
            display: flex;
            flex-direction: column;
            gap: 20px;

            .event-details {
                padding-top: 10px;
                display: grid;
                grid-template-columns: min-content 1fr;
                align-items: center;
                gap: 2px 20px;
                align-content: start;
                min-height: 232px;
            }

            .event-title {
                font-size: 1.2rem
            }

            img {
                width: 100%;
                box-shadow: 0 20px 30px -20px #0008;
                border-radius: 8px;
            }

            .add-to-calendar-link {
                display: block;
                width: 100%;
                padding: 15px 20px;
                color: #FF870F;
                background-color: #fff3e7;
                border-radius: 8px;
                text-decoration: none;
                text-align: center;

                transition: 100ms ease-out background-color, color;

                &:hover {
                    color: #fff3e7;
                    background-color: #FF870F;
                }
            }
        }
    }

    #contact {
        width: 100%;
        border-radius: 8px;
        background-color: #eee8;
        padding: 50px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

footer {
    width: min(100%, 1200px);
    margin: 0 auto;
    padding: 0 20px 200px;
}