nav {
    background:linear-gradient(#000000ee, #222222ee);
    padding:1%;
    position: sticky;
    top: 0;
    margin: 0px;
    width: 101%;
    }

h1.navbar{
    color:white;
    display:inline;
    float:right;
    }

.png-logo {
    display:inline;
    margin-left:20px;
    }

div.nav-container {
        width: 100%;
}

h2.user {
    color:white;
    float:right;
    margin-top: 10px;
    margin-right: 10px;
    font-family: "Roboto", sans-serif;
    display: inline-flex;
}

svg.logout {
    vertical-align: top;
    color: #ffcc00d1;
}

button.logout {
    border-color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
    margin-top:10px;
}


.dropbtn {
  background-color: white;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  width:-moz-available;
  width: -webkit-fill-available;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  z-index: 1;
  width:-moz-available;
  width: -webkit-fill-available;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.normal-font {
    font-family: Calibri;
    font-size: 80%;
    max-width: 25px;
}


.username {
    display:flex;
    max-height:50px;
    position: absolute;
    top: 30px;
    text-align: right;
    right: 30px;
}

.logo {
    text-align: center;
}


.dropdown-content .dropbtn:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .hide-dropdown {display: none;}


@media  only screen and  (max-width: 500px){
body {
    width: 100%;
}
div.nav-container {
        text-align:left;
        width: 100%;
        display: inline-grid;
        justify-content: left;

}

}