@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --brown: rgba(111, 70, 72, 1);
  --brown-dim: rgba(111, 70, 72, 0.8);
  --brown-light: rgba(228, 187, 157, 1);
  --brown-light-dim: rgba(228, 187, 157, 0.8);
  --brown-dark: rgba(36, 15, 14, 1);
  --brown-dark-dim: rgba(36, 15, 14, 0.8);
  --white: #fefefe;
}

/* MAIN */
body { font-family: "Libre Franklin", sans-serif; font-optical-sizing: auto; color: var(--white); background: var(--brown-dark); }

/* TOPBAR - Menu */
.container-topbar { text-align: center; }

/* FOOTER */
.footer { background-color: var(--brown); background-image: unset; }

/* CARD */
.card { border: none; }
.card .btn { padding: 0.75rem 1.5rem 0.75rem 1.5rem !important; border-radius: 99px; text-transform: uppercase; letter-spacing: 1px; word-spacing: normal; font-size: 0.85rem; }
.card-brown { text-shadow: 1px 1px black; background: var(--brown); transition: background 0.3s; }
.card-brown:hover { background: var(--brown-dim); }
.card-image .card-img-overlay { text-shadow: 1px 1px black; background: rgba(0, 0, 0, 0.6); transition: background 0.3s; }
.card-image:hover .card-img-overlay { background: rgba(0, 0, 0, 0.7); }
.card-image .card-title { color: var(--brown-light); }
.card-image .card-text { color: var(--brown-light); }
.card-image .btn { background: var(--brown); color: var(--white); }
.card-image .btn:hover { background: var(--brown-light); color: black; }


/* GENERAL */
a, a:hover, a:not([class]) { text-decoration: unset; }

/* HEADINGS */
h1, h2, h3, h4, h4 { font-family: "Libre Franklin", sans-serif; font-optical-sizing: auto; }

/* HELPERS */
.bg-brown { background: var(--brown); }
.bg-brown-light { background: var(--brown-light); }
.bg-brown-dark { background: var(--brown-dark); }
.white { color: var(--white); }
.overlay-30 { background-color: rgba(0, 0, 0, 0.3); }
.overlay-50 { background-color: rgba(0, 0, 0, 0.5); }
.overlay-70 { background-color: rgba(0, 0, 0, 0.7); }