header {
    /* background: #874AD2; */
    /* background: #874ad2b5;
    box-shadow: 0 0 5px black; */
  
    width: 35vw;
    height: 10vh;
  
    position: absolute;
    top: 2.5vh;
    bottom: auto;
    left: auto;
    right: 0;

    display: flex;
    justify-content: center;
    align-items: center;
  }


  nav{
    font-family: 'oleo script';
    font-size: 4vh;
    text-align: center;
  }
  nav a{
    text-decoration: none;
    text-align: center;
    padding: 1em;
    position: relative;
  }
  
  
  /* // navigation bar animmation */
  nav a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right:0;
      height: 0.25vh;
      transform: scaleX(0);
      background: rgb(255, 255, 255);
      transition: 0.2s transform linear;
  }
  
  nav a:hover::after{
      transform: scaleX(1)
  }