*{
    box-sizing: border-box;
}
.navbar {
	overflow: hidden;
	background-color: #9fff00;
	position: fixed;
	top: 0%;
	width: 100%;
}

.navbar a {
	float: left;
	display: block;
	color: #9d00ff;
	text-align: center;
	padding: 10px 24px;
	text-decoration: none;
	font-size: 17px;
	font-weight: bold;
}

.navbar a:hover {
	background: #ddd;
	color: black;
}
.navbar .icon{
    display:none;
}
.sidebarleft  {
	width: 20%;
	float:left;
	font-style:italic;
}
p  {
	font-size: 18px;
}
body {
	background-color: #5a6b7a;
	color: #f2f2f2;
}
.main{
	float:left;
	width:60%;
	padding:0 20px;
}
.sidebarright  {
	width:20%;
	float:right;
	font-style:italic;
	padding:15px;
	margin-top:7px;
}
@media only screen and (max-width:620px) {
  /* For mobile phones: */
.main{
      width: 100%;
  }
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
      float: right;
      display: block;
  }
  .navbar.responsive {position: relative;}
  .navbar.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
  }
  .sidebarleft, .sidebarright{
        display:none;
    }
}
.navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
}