:root {
    --white: #FFF;
    --crem: #FFF0D8;
    --crem-light: #FFFAF3;
    --green: #918C33;
    --green-light: #BFBF91;
    --green-dark: #383B17;
    --brown: #473D33;
    --brown-light: #9D8A77;
    --brown-dark: #302A1E;
    --red: #A23534;
    --thin: 300;
    --normal: 500;
    --bold: 900;
}

/* Vanilla Ravioli Font */
@font-face {
    font-family: 'Vanilla Ravioli';
    src: url('/custom/fonts/vanilla_ravioli/VanillaRavioli_Demo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Open Sans Font */
@font-face {
    font-family: 'open-sans';
    src: url('/custom/fonts/open_sans/OpenSans-Regular.ttf') format('opentype');
    font-style: normal;
    font-display: swap;
}

.vanilla-ravioli {
    font-family: 'Vanilla Ravioli';
    font-variant-ligatures: none;
}

.open-sans {
    font-family: "Open Sans", sans-serif;
}

textarea {
    min-height: 200px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Vanilla Ravioli';
    font-variant-ligatures: none;
    color: var(--brown);
}

p, span, ul li, ol li {
    font-family: "Open Sans", sans-serif;
    color: var(--brown);
    font-size: 18px;
    line-height: 30px;
}

ol li {
    list-style-type: decimal;
}

ul li {
    list-style-type: disc;
    margin-left: 20px;
}

tbody, td, tfoot, th, thead, tr {
    font-family: "Open Sans", sans-serif;
}

.line-clamp-2, .line-clamp-2 + p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

a:hover {
    color: var(--brown);
}

.button {
    background: var(--green-dark);
    font-family: open-sans;
    font-size: 15px;
    color: var(--white);
    font-weight: var(--normal);
    padding: 18px 40px;
    border-radius: 10px;
    width: max-content;
    margin: auto;
    cursor: pointer;
    white-space: normal;
    word-wrap: break-word;
}

    .button:hover {
        opacity: 0.9;
        color: var(--white);
    }

.button-align-right {
    margin-right: 0;
    margin-left: auto;
}
/*Backgrounds*/
.white-bg {
    background: var(--white);
}

.crem-bg {
    background: var(--crem);
}

.crem-light-bg {
    background: var(--crem-light);
}

.green-bg {
    background: var(--green);
    color: var(--white);
}

.green-light-bg {
    background: var(--green-light);
}

.green-dark-bg {
    background: var(--green-dark);
}

.brown-bg {
    background: var(--brown);
}

.brown-light-bg {
    background: var(--brown-light);
}

.brown-dark-bg {
    background: var(--brown-dark);
}

/*text colors*/
.white, .white + p {
    color: var(--white) !important;
}

.crem {
    color: var(--crem);
}

.crem-light {
    color: var(--crem-light);
}

.green {
    color: var(--green);
}

.green-light {
    color: var(--green-light);
}

.green-dark {
    color: var(--green-dark);
}

.brown {
    color: var(--brown);
}

.brown-light {
    color: var(--brown-light);
}

.brown-dark {
    color: var(--brown-dark);
}

.error {
    color: var(--red);
}

/*borders*/
.border-top {
    border-top: 1px solid;
}

.border-right {
    border-right: 1px solid;
}

.border-bottom {
    border-bottom: 1px solid;
}

.border-left {
    border-left: 1px solid;
}

.border-y {
    border-width: 1px 0 1px 0;
    border-style: solid;
}

.border-x {
    border-width: 0 1px 0 1px;
    border-style: solid;
}

.border-full {
    border-width: 1px !important;
    border-style: solid !important;
}

.border-white {
    border-color: var(--white) !important;
}

.border-crem {
    border-color: var(--crem);
}

.border-crem-light {
    border-color: var(--crem-light);
}

.border-green {
    border-color: var(--green);
}

.border-green-light {
    border-color: var(--green-light);
}

.border-green-dark {
    border-color: var(--green-dark);
}

.border-brown {
    border-color: var(--brown);
}

.border-brown-light {
    border-color: var(--brown-light);
}

.border-brown-dark {
    border-color: var(--brown-dark);
}