:root {
  --honey: #da9f00;
  --honey-dark: #b88400;
  --honey-darker: #8f6a00;
  --honey-light: #f6d365;

  /* Link colors */
  --link: #2f5da8;
  --link-hover: #1f437c;
}

/* Page background */
body {
    background: center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(184, 132, 0)' viewBox='0 0 100 169.5'%3E%3Cpolygon points='50,34.75 93.5,59.75 93.5,109.75 50,134.75 6.5,109.75 6.5,59.75'%3E%3C/polygon%3E%3Cpolygon points='0,-50 43.5,-25 43.5,25 0,50 -43.5,25 -43.5,-25'%3E%3C/polygon%3E%3Cpolygon points='100,-50 143.5,-25 143.5,25 100,50 56.5,25 56.5,-25'%3E%3C/polygon%3E%3Cpolygon points='0,119.5 43.5,144.5 43.5,194.5 0,219.5 -43.5,194.5 -43.5,144.5'%3E%3C/polygon%3E%3Cpolygon points='100,119.5 143.5,144.5 143.5,194.5 100,219.5 56.5,194.5 56.5,144.5'%3E%3C/polygon%3E%3C/svg%3E");
    background-size: 32px;
    background-color: var(--honey-light);
}

.main-contend {
    background-color: var(--honey-light);
}

/* Navbar */
.navbar-brand {
  background: linear-gradient(180deg, var(--honey), var(--honey-dark));
}

.navbar-menu {
  background: var(--honey-dark);
}

.navbar-item,
.navbar-link {
  color: #fff;
}

.navbar-item:hover,
.navbar-link:hover {
  background-color: var(--honey-darker);
  color: #fff;
}

/* Buttons */
.button.is-primary {
  background-color: var(--honey);
  border-color: var(--honey-dark);
  color: #fff;
}

.button.is-primary:hover {
  background-color: var(--honey-dark);
  border-color: var(--honey-darker);
}

/* Links */
a {
  color: var(--link);
}

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

/* Boxes (your content cards) */
.box {
  border-top: 4px solid var(--honey);
  border-radius: 8px;
}

.image-box {
  border-radius: 8px;
  padding: 0.5rem;
}

/* Titles accent (optional subtle touch) */
.title {
  color: #3a2a00;
}

hr {
  background-color: var(--honey-dark);
  opacity: 0.3;
}

.column {
    padding: 0.2rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}