:root {
    --purple: #b07f23;
    --purple-trans: #b07f2366;
    --light-green: #d4e1c8;
    --green: #abc29c;
    --orange: #93461f;
}

.uk-navbar-container {
    background: var(--purple-trans);
}

.uk-navbar-sticky {
    background: var(--purple);
}

html, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-2xlarge, .uk-heading-3xlarge, .uk-heading-large, .uk-heading-medium, .uk-heading-small, .uk-heading-xlarge, h1, h2, h3, h4, h5, h6 {
    font-family: "Josefin Sans", sans-serif;
}

a {
    color: var(--purple);
}

.uk-offcanvas-bar {
    background: var(--purple);
}

.uk-navbar-container .uk-logo, .uk-navbar-container .uk-navbar-nav > li > a {
    color: var(--light-green);
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
}

.uk-navbar-container .uk-logo {
    font-weight: 400;
    font-style: normal;
}

.uk-navbar-container .uk-navbar-nav > li > a {
    font-weight: 400;
    color: var(--light-green);
}
.uk-navbar-container .uk-navbar-nav > li > a:hover {
    color: var(--orange);
}

.uk-light .ungeobi-button {
    background-color: var(--light-green);
    border: 1px solid var(--purple);
    color: var(--purple);
}

.uk-light .ungeobi-button:hover {
    color: var(--light-green);
    background-color: var(--purple);
}

.hero-button {
    font-size: 1.0rem;
}

.merch-image {
    max-height: 450px;
    max-width: 100%;
    width: auto;
}