.header {
    background-color: rgb(0, 0, 0);
    height: 3%;
    margin-bottom: 1%;
    margin-top: 1%;
    width: 100%;
    float: left;
    position: sticky;
}

.header img {
    margin-left: 6%;
}

.linki {
    font-family: 'Kanit', Bold;
    position: static;
    float: right;
    margin-right: 6%;
}

.linki a {
    float: left;
    display: block;
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.header a:link {
    text-decoration: none;
    color: rgb(255, 255, 255);
}
  
.header a:visited {
    text-decoration: none;
    color: rgb(255, 255, 255);
}
  
.header a:hover {
    border-radius: 5px;
    text-decoration: none;
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
}
  
.header a:active {
    text-decoration: none;
    color: rgb(255, 255, 255);
}

@media screen and (max-width: 800px) {
    .header img{
      margin-left: 40%;
      width: 20%; /* The width is 100%, when the viewport is 800px or smaller */
    }

}