.navbar{
  position: fixed;
  /* bottom: 20px; */
  width: 100%;
  height:76px;
  display: flex;
  align-items: center;
  text-decoration:none;
  justify-content: center;

  z-index: 999;
  
  /* ou: */
  /* border-top: 1px solid var(--borderColor); */
  box-shadow: 0px 0px 8px 1px var(--borderColor);
  bottom: 0px;
  bottom: 0 !important;
  display: none;
  /* margin-bottom: 10px; */
  
}

.menuBar{


  position: absolute;
  width: 100%;
  height: 100%;
  /* border-radius: 2em;
  box-shadow: 0px 4px 8px 1px rgb(146, 146, 146); */
/*   
  border-color: black;
  border-style:solid; */

  display: flex;
  align-items: center;
  text-decoration:none;
  justify-content:space-evenly;
  background-color: var(--background);
  padding-bottom: 11px;

}

.itemMenuBar{

  position: relative;
  width: 60px;
  top: -8px;
  height: 60px;
  /* padding: 20px; */
  /* border-radius: 50%; */
  display: flex;
  align-items: center;
  text-decoration:none;
  justify-content: center;
  flex-direction: column;
  /* background-color: rgb(0, 34, 255); */
  margin: 8px;
  color: rgb(255, 255, 255);
  z-index: 1;
  font-size: 22px;
  font-weight: bolder;
  cursor: pointer;

}

.numberOfNotification{
  position: absolute;
    top: 0px;
    right:  0px;
    width: 18px;
    height: 18px;
    /* padding: 20px; */
    border-radius: 50%;
    display: flex;
    align-items: center;
    text-decoration: none;
    justify-content: center;
    background-color: rgb(255, 75, 75);
    margin: 8px;
    color: rgb(255, 255, 255);
    z-index: 1;
    font-size: 10px;
    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

    /* font-weight: bolder; */

    
}
.itemMenuBar > a{
  color: black;

}


.fill {
  background-color: var(--logo);
}

.fill > a{
  color: white;
}

.navBarItemTitle{
  position: absolute;
  height: 4px;
  color: var(--ecritureLight);
  font-size: 10px;
  bottom:10px;
}

/* path, .icon{

  stroke: #c66262;
} */

@media (max-width: 900px)  {

  .navbar{
    display: block;
  }

 
  main{
    width: 100%;
    padding-bottom: 80px;
  }
}