body{
 background-color: white;
 color:dimgrey;
 font-family:verdana, arial, helvetica, sans-serif;

}
.header-top{
  height:60px;
}

#header-text{
 background-color: white;
 color:black;
 font-family:verdana, arial, helvetica, sans-serif;
 font-size:16px;
 line-height: 1.4em;
 float:left;
 width:60%;
 text-align:left;
 padding-top:16px;
 padding-left:29%;
 color:black;
 margin:30px, 0%, 0px, 0%;
 overflow:hidden;
 box-sizing:border-box;
 z-index:50;
}

.clr{
 clear:both;
}

#login-button{
 background-color:royalblue;
 text-decoration:none;
 color:white;
 font-size:20px;
 font-family:verdana, arial, helvetica, sans-serif;
 font-weight: 600;
 padding: 10px 20px;
 border-radius: 4px;
 box-sizing:border-box;
 float:right;
 margin: 45px 30% 0px 0px;
}

#navbar{
 line-height: 1.4em;
 text-align:center;
 width:100%;
 background-color:dimgrey;
 height:70px;
 font-size:20px;
 font-weight:600;
 padding:0px 0px 0px 0px;
 text-decoration:none;
 color:white;
 border-top:15px solid royalblue;
 margin-top:90px;
}

#navbar ul{
 list-style:none;
}
#navbar li{
 display:inline;
}
#navbar a{
 text-decoration:none;
 background-color:dimgray;
 color:white;
 padding:10px 15px 10px 15px;
}
#navbar a:hover{
 color:silver;
 transition:color 0.3s ease-in-out;
}
  @media only screen and (max-width: 800px){
    #header-text{
     font-size:12px;
     line-height: 1.4em;
     float:left;
     width:80%;
     overflow:hidden;
     box-sizing:border-box;
    }
    #navbar li{
      width: 50px;
     display: inline;
    }
    #navbar a{
     text-decoration:none;
     background-color:dimgray;
     color:white;
     font-size: 10px;
     padding:5px 10px 5px 10px;
  }
  #navbar ul{
    margin-top:0px;
  }
  .links{
    width:80%;
    margin-left:auto;
    padding-left:0px;
  }
  #navbar{
    margin-top:50px;
    padding-left:0px;
  }
}