body {
  background-color: linen;
  font-family: 'Gill Sans', Roboto, Calibri, 'Trebuchet MS', sans-serif;
  color: black;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  text-wrap: pretty;
  margin: auto;
  caret-color: transparent;
}

img {
  max-width: 100%;
}

.sidebar {
  transition: width 0.5s ease-in-out;
  margin: 0;
  padding: 1;
  width: 20%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: hidden;
}

 /* The navbar container */
.topnav {
  background-color: #222;
  font-size: 20px;
  font-weight: bolder;
  padding: 4px 5%;
}

/* Navbar links */
.topnav a {
  float: none;
  position: relative;
  top: 25%;
  display: visible;
  padding: inherit;
  z-index: 2;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  text-decoration: none;
  padding: inherit;
}

h1 {
  /* Enforce Capitalization of header titles */
  text-transform: uppercase;
}

li {
  list-style: none;
}

ul {
  /* Deactivate for blogposts, renders well only on centered webpage */
  padding-left: 0px; /* Too important ow on mobile */
}

div.Contact {
  margin: 10px 10px 10px 10px;
}

div.MainTitle {
  margin-left: 20%;
  transition: margin-left 0.3s ease-in-out;
  text-align: center;
  text-wrap: pretty;
}

table {
  text-align: left;
  margin: auto;
}

/* Work Address */
address.span {
  display: inline;
  list-style-type: none;
  padding: 10px;
  font-size: 14px;
  text-align: center;
  position: static;
}


/* Remainding Links (visited hover active) */
a {
  text-decoration: none; /* Remove underline from links */
  color: #009900;
}

a:visited {
  color: green;
}

a:focus, a:hover {
  color: darkgreen;
  text-decoration: underline;
}

/* Style for the sidebar toggle button */
#sidebarToggle {
  background-color: #222;
  color: white;
  border: none;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

#sidebarToggle:hover {
  background-color: #444;
}