*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header{
    display: flex;
    position: fixed;
    background-color: #000000;
    right: 0;
    top: 0;
    width: 100%;
    text-align: center;
    padding: 20px;
}

.nav{
    display: flex;
    align-items: center;
    vertical-align: center;
    gap: 30px;
    width: 40%;
    filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(157deg) brightness(103%) contrast(101%) ;
}
.nav img:hover{
    fill:url(#Gradient1);
}


.logo{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
}


#Gradient1 {
    offset: 0%; stop-color: rgba(27,0,72,1);
    offset: 100%; stop-color: rgba(97,0,255,1);
      /*<stop class="stop1" offset="0%" />
      <stop class="stop2" offset="50%" />
      <stop class="stop3" offset="100%" />*/
}/*
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="black" stop-opacity="0" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <style>
    #rect1 {
      fill: url(#Gradient1);
    }