.top {
    display: block;
}


.top {
    width: 90%;
    height: 8vh;
    margin: 0 auto;
    background: var(--body-background-color);
    position: sticky;
    top: 0;
    z-index: 12;
}

.top img {
    position: fixed;
    top: calc((8vh - 1.776em) / 2);
    width: 3em;
    /*height: 1.776em;*/
    left:20%;
}

.top nav {
    position: fixed;
    top: calc((8vh - 1em) / 2);
    color: var(--font-color);
    right: 20%;
}

.top nav a {
    padding: 0.5em 1em;
    color: var(--font-color);
    text-decoration: none;
}

.top nav a:hover {
    border-bottom: 2px solid var(--primary-color);
}

@media only screen and (max-width: 600px) {
  .top {
  }
  .top img {
    width:30px;
    left:5%;
  }
}