header {
    position: fixed;
    width: 100%;
    height: auto;
    animation-duration: 0.25s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;
  z-index:1;
  }
  
  
  .nav {
    justify-content: space-between;
    padding: 1em;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    height: 7em;
    background-color: var(--mainColor);
    width: 100%;
    /* display: block; */
    border: none;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    /* justify-content: flex-end; */
    animation-name: fadeIn;
  
  
  
  }
  
  .right {
    height: 8em;
    padding-right: 1em;
    width: 100%;
    justify-content: flex-end;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding-top: 1em;
    gap: 4em;
  
  }
  
  .nav ul {
    position: relative;
    list-style-type: none;
    padding-top: .5em;
  
  }
  
  .nav ul li {
    display: inline-block;
  }
  
  .nav ul li :hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    transition: ease-in-out .1s;
    color: var(--textColorSecondary);
  }
  
  
  
  
  
  li a {
    /* display: block; */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--textColorMain);
  }
  
  
  
  .active a {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    transition: ease-in-out .8s;
    color: var(--textColorSecondary);
  
  }
  
  
  
  
  #nav-btn {
    display: block;
    color: var(--bottonColor);
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  
    height: 2.5em;
  
  }
  
  #nav-btn:hover {
    color: var(--mainColor);
    background-color: var(--bottonColor);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    transition: ease-in-out .1s;
    height: 2.5em;
    float: right;
  }