/*
[HTML Color Codes and Names](https://www.computerhope.com/htmcolor.htm)
[How can I design in the Neo Brutalism style? | by Sepideh Yazdi | Medium | Medium](https://medium.com/@sepidy/how-can-i-design-in-the-neo-brutalism-style-d85c458042de)
*/
/* Bulma Customizations */
:root {
  /* My Colors */
  --my-background-color: #d3b8a1; /* Pastel Driftwod */
  --my-box-background-color: #f5f5f5; /* WhiteSmoke (W3C) */
  --my-box-text-color: #000000; /* Black (W3C) */
  --my-hover-color: #e6e6fa; /* Lavender (W3C) */
  --my-border-color: #696969; /* DimGray or DimGrey (W3C) */
  /* bulma customizations */
  --bulma-body-background-color: var(--my-background-color);
}
.box {
  --bulma-box-background-color: var(--my-box-background-color);
  --bulma-box-color: var(--my-box-text-color);
  --bulma-box-radius: 0px;
  --bulma-box-shadow: none;
  --bulma-box-link-hover-shadow: none;
  --bulma-box-link-active-shadow: none;
  height: 100%; /* make all boxes the same height */
  border: 2px solid var(--my-border-color);
  box-shadow: 4px 4px var(--my-border-color);
  border-radius: 0.5em;
}
a:hover > .box {
  background: var(--my-hover-color);
}
nav.navbar {
  background-color: var(--bulma-body-background-color);
  border-top: 2px solid var(--my-border-color);
  border-bottom: 2px solid var(--my-border-color);
}
@media screen and (min-width: 1024px) {
  .navbar-dropdown a.navbar-item:not(.is-active, .is-selected) {
    background-color: var(--bulma-body-background-color);
  }
  .navbar-dropdown hr.navbar-divider {
    background-color: var(--bulma-body-background-color);
  }
  .navbar-dropdown {
    border: 2px solid var(--my-border-color);
  }
  .navbar-dropdown .navbar-item {
    border-top: 2px solid var(--my-border-color);
  }
}

/* MOBILE */
@media screen and (max-width: 1023px) {
  .navbar-menu {
    background-color: var(--bulma-body-background-color);
  }
  .navbar-brand {
    /* border-bottom: 2px solid var(--my-border-color); */
  }
  .navbar-brand > .navbar-item {
    border: none !important;
  }
  .navbar-item {
    border-top: 2px solid var(--my-border-color);
    border-right: none !important;
  }
}
.navbar-dropdown .navbar-item:not(.is-active, .is-selected) {
  background: var(--bulma-body-background-color);
}
.navbar-dropdown {
  background-color: var(--bulma-body-background-color);
}
.navbar-item:hover {
  color: var(--bulma-box-color);
  background-color: var(--my-hover-color);
}

footer.footer {
  background: none !important;
}