.logo {
  position: fixed;
  overflow: hidden;
  left: 0px;
  transition: left 0.6s;
}

.logo img {
    width: 100%;
    height: 80px;
    cursor: pointer;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    -ms-transition: all .8s ease-in-out;
}

.logo img:hover {
  transform: rotate(360deg) scale(0.88);
}

.topnav {
  position: fixed;
  align-items: left;
  overflow: hidden;
  right: 10px;
  transition: right 0.6s;
}

.topnav a {
  display: block;
  color: #FAF9F6;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 10%;
  float: right; /*right and left for navbar*/
}

.topnav .icon {
  display: none;
}

.topnav a:hover{
  background-color: #369c9a;
  color: #682FAD;
  transform: scale(0.92); /* Decrease size by 8% */
  transition: transform 0.2s ease-in-out; /* Add smooth transition */
}

@media screen and (max-width: 320px) {
  .topnav a {display: none;}
  .topnav a.icon {
    display: block;
  }
}

@media screen and (max-width: 320px) {
  .topnav.responsive {position: absolute; margin-left: 184px; margin-right: 10px}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: center;
    display: initial;
    right: 0;
  }

  .topnav.responsive {display: none;}
  .topnav.responsive .icon {display: none}
  .topnav.responsive {position: relative;}
  .topnav.responsive {display: block;}
}