:root {
  box-sizing: border-box;
  --grey-dark: #343a40;
  --white: #fff;
  --black: #000;

  /*variables*/
  --very-light-green: #edf3e9;
  --light-green: #c0d9c2;
  --yellow: #faeaa1;
  --light-yellow: #f8edd2;
  --cox: #3a3b3b;
  --green: #88b2aa;
}

.nav-item {
  padding: 0 0.3rem;
}

.navbar-nav .nav-item .nav-link {
  padding: 0.4rem 0.6rem;
  color: var(--cox);
}

/*

.navbar-nav .nav-item .nav-link:hover {
  color: var(--white);
  background-color: var(--cox);
}

*/

.navbar {
  background: var(--light-yellow);
}

#logo {
  aspect-ratio: 79368 / 112249;
  height: 7rem;
}

#logo_nav {
  height: 60px;
}

.offcanvas-header {
  background-color: var(--light-yellow);
  color: var(--cox);
}

.important {
  font-size: 1rem;
  margin: 0;
}

.non-important {
  font-size: 0.8rem;
}

@media (max-width: 1200px) {
  .row .important,
  .row .non-important {
    padding: 0;
    margin: 0;
  }

  .nav-item {
    padding: 0;
  }

  .important .nav-item .nav-link {
    margin-left: -16px;
    padding-left: 16px;
    border-radius: none;
    width: 100vw;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .non-important .nav-item .nav-link {
    margin-left: -16px;
    padding-left: 16px;
    border-radius: none;
    width: 100vw;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .offcanvas-body {
    padding-top: 0;
    overflow-x: hidden;
  }
}

@media (min-width: 1200px) {
  .navbar-padding {
    padding: 0 12rem;
  }

  .important .nav-item:hover,
  .non-important .nav-item:hover {
    transition: 0.2s;
    color: var(--white);
  }

  .navbar-nav .nav-item .nav-link {
  }

  /*
  .navbar-nav .nav-item .nav-link:hover {
    color: var(--white);
    background-color: var(--cox);
  }*/
}