/* **************************************
   SYS INDEX * MENUE * DANIELA JOSS
*************************************** */

#menu2 {
  margin-bottom:50px;
  padding:25px 20px 0 20px;

  background-color:#141414;
  border:1px solid rgba(96,109,131,0.70);

  box-shadow:
    inset 0 0 4px rgba(96,109,131,0.35),
    4px 5px 10px rgba(0,0,0,0.45);
}

#menu2 ul {
  display:flex;
  justify-content:flex-start;
  gap:4px;

  margin:0;
  padding:0 0 4px 0;
  list-style:none;

  background:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(100% - 8px),
      rgba(96,109,131,0.25) calc(100% - 8px),
      rgba(96,109,131,0.25) 100%
    );
}

#menu2 li {
  margin:0;
  padding:0;
}

#menu2 a {
  display:block;
  padding:8px 13px;

  color:#b1b1b1;
  background-color:#424a58;
  border:1px solid rgba(210,220,235,0.35);
  border-bottom:none;
  border-radius:6px 6px 0 0;

  text-decoration:none;
  text-shadow:1px 1px 2px rgba(0,0,0,0.70);

  box-shadow:
    inset 1px 1px 1px rgba(255,255,255,0.18),
    1px -1px 3px rgba(0,0,0,0.55);

  transition:color 0.25s ease, background-color 0.25s ease;
}

#menu2 a:hover {
  color:#fff;
  background-color:#4b5668;
}


/* ****************************************
   HANDY / RESPONSIVE
**************************************** */

@media (max-width:700px) {

  #menu2 {
    margin-bottom:30px;
    padding:16px 10px 0 10px;
  }

  #menu2 ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;

    width:100%;
    margin:0 auto;
    padding:0 0 8px 0;
  }

  #menu2 a {
    padding:7px 10px;
    font-size:14px;
  }
}