*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body{
  background-color:rgb(3,4,94);/*3,4,94*/
  overflow-x:hidden;
  font-family:sans-serif;
}
html, body{
  margin:0;
  padding:0;
  height:100%;
}
.nav-bar{
  height:auto;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  background-color:rgb(3,4,94);
  align-items:center;
  gap:0.3rem;
  padding:0 0.8vw;
  min-width:0;
  flex-wrap:wrap;
}
.logo{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:0.2rem;
}
.nav-bar .logo img {
  height:80px;
  width:auto;
}
.nav-linkes a.active{
  color:rgb(199,199,199);
}
/* this will add a underline in the links after you click it */
/* active nav underline (simple white underlined bar) */
.nav-linkes { display:flex; gap:1rem; align-items:center; }

.nav-linkes a {
  position: relative;
  text-decoration: none;
  color: #fff;
  padding-bottom: 0.25rem;
  transition: color 0.18s ease;
}

/* base underline (hidden) */
.nav-linkes a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: #fff;
  transition: width 0.22s ease;
}

/* show underline on hover or active */
.nav-linkes a:hover::after,
.nav-linkes a.active::after { width: 100%; }

/* when hovering over nav, temporarily hide the active underline */
.nav-linkes:hover a.active::after { width: 0%; }

/* this part actaly */
span{
  font-size:1.4rem;
  font-weight:bold;
  background:linear-gradient(270deg,#ff0000,#00ff00,#0000ff,#ff00ff);
  background-size:800% 800%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:colorshift 8s ease infinite;
}
@keyframes colorshift{
  0%{background-position:0% 50%;}
  50%{background-position:50% 100%;}
  100%{background-position:0% 50%;}
}
.nav-linkes{
  list-style:none;
  display:flex;
  gap:1rem;
  list-style:none;
  margin:0;
  padding-bottom:0.7rem;
  /*margin-right:1rem;*/
}
.nav-linkes li a {
  color:white;
  text-decoration:none;
  font-weight:500;
  font-weight:bold;
  transition:transform 0.3s ease;
  display:inline-block;
}
.nav-linkes li a:hover{
  color:rgb(149,149,149);
  transform:scale(1) translateY(-4px);
  text-shadow:0 2px 6px rgba(8,7,0,0.6);
}


@media (max-width:856px){
  .nav-bar{
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .nav-bars .nav-links{
    flex-direction:column;
    justify-content:center;
    width:100%;
    margin-top:0.5rem;
    /*margin:1rem;*/
  }
  .nav-bars .nav-links li{
    width:100%;
  }
  .nav-links a{
    display:block;
    padding:0.5rem;
    width:100%;
    text-align:left;
  }
}