main.css

@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,500';

body
{
  font-family: "Open Sans", "Helvetica", sans-serif;
  margin: 0;
  background-color: #F5F5F5;
}
.menu
{
  background-color:#F5F5F5;
  width:100%;
  color:black;
  box-sizing:border-box;
  position: relative;

}
.menu_button
{
  position: fixed;
  width:5%;
  padding: 15px;
  padding-top: 1%;
  cursor:pointer;
  top: 0;
  right: 0;
  z-index: 1;
}
.logo
{
  position: fixed;
  width: 75%;

}

.logo img{
  position: absolute;
  max-width: 100%;
  width:300px;
  padding: 15px;
}

.horizontal_gallery_container
{
  text-align: center;
  vertical-align: middle;
}

.horizontal_gallery
{
  display: inline;
  margin: 5px 20px;
  padding: 5px;
}

.img-border
{
  border-width: 1px;
  border-color: grey;
  border-style: solid;
}

ul
{
  right: 0;
  display:none;
  padding:0px;
  margin:0px;
  width:30%;
  height:100%;
  background-color:#2E2E2E;
  position:absolute;
  box-shadow:inset 0px 0px 50px 0px #6E6E6E;
  list-style:none;
}

.page-size
{
  width: 40em;
}

main
{
  margin: 10 auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 40em;

  line-height: 1.5;
  padding-top: 4em;
  padding-bottom: 4em;
  padding-left: 1em;
  padding-right: 1em;
}

li:hover
{
  width:100%;
  background-color:#2E2E2E;
  box-shadow:inset 0px 0px 50px 0px #848484;
  -webkit-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
  border-right:10px solid #2E2E2E;
}
li a
{
  height:50px;
  line-height:50px;
  display:block;
  color:#F5F5F5;
  text-decoration:none;
  font-size:18px;
  font-family: 'Roboto', 'Google Sans', sans-serif;
  padding-left:10px;
}
li:hover a
{
  padding-left:25px;
  color:white;
  -webkit-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;
}