body {
  background-color: #555555;
  background-color: rgba(85, 85, 85, 1); /* dark gray */
  color: #ffffff;
  font-family: 'Abel', sans-serif;
  margin: 0;
  padding: 0;
}
p {
  padding: 0 0.7em;
}
strong {
  color: #FFC074;
  color: rgba(255, 192, 116, 1); /* orange */
  font-family: 'Poller One', cursive;
  font-weight: normal;
  text-shadow: 2px 1px 1px rgba(25, 25, 25, 1);
}
nav {
  background-color: #4B4B4B;
  background-color: rgba(75, 75, 75, 1); /* dark gray */
  border-bottom: 1px solid #000000;
  font-family: 'Arvo', serif;
  padding: 0.7em 0.8em;
}
a {
  color: #FFDAAD;
  color: rgba(255, 218, 173, 1); /* light orange */
  text-decoration: none;
  text-shadow: 2px 1px 1px rgba(25, 25, 25, 1);
}
a:hover {
  text-decoration: underline;
}
nav a {
  margin-right: 1em;
  padding: 2px 4px;
}
.selected {
  background-color: #232323;
  background-color: rgba(35, 35, 35, 1);
  color: #ffffff;
  cursor: default;
  text-shadow: none;
}
article {
  float: left;
  padding: 0.8em;
}
h1 {
  font-family: 'Arvo', serif;
  font-size: 1.5em;
}
h2 {
  font-family: 'Arvo', serif;
  font-size: 1.25em;
}
h3 {
  font-family: 'Arvo', serif;
  font-size: 1em;
}
header,
article header {
  font-family: 'Arvo', serif;
}
article ul {
  list-style-type: none;
  padding-bottom: 1em;
}
article ul li {
  clear: both;
  margin-bottom: 1.5em;
}
article ul img {
  float: left;
  margin-right: 1em;
}
aside {
  background-color: #AFAFAF;
  background-color: rgba(175, 175, 175, 1);
  border: 1px solid #646464;
  border: 1px solid rgba(100, 100, 100, 1);
  border-radius: 4px;
  box-shadow: 4px 4px 2px 2px rgba(75, 75, 75, 1);

  clear: both;
  color: #000000;

  margin-left: 1em;
  margin-right: 1em;
}
aside header {
  background-color: #404040;
  background-color: rgba(64, 64, 64, 1); /* dark gray */
  border-bottom: 1px solid #969696;
  border-bottom: 1px solid rgba(150, 150, 150, 1);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color: #F5F5F5;
  color: rgba(245, 245, 245, 1); /* white smoke */
  font-family: 'Arvo', serif;
  padding: 0.2em 0.7em;
}
aside {
  font-family: 'Abel', sans-serif;
}
footer {
  color: #D3D3D3;
  color: rgba(211, 211, 211, 1);
  font-family: 'Arvo', serif;
  font-size: 0.75em;
  padding: 0.5em 1.5em;
  text-align: right;
}
/* @see https://www.w3schools.com/howto/howto_css_circles.asp */
.dot {
  background-color: #FF8C00;
  background-color: rgba(255, 140, 0, 1); /* orange */
  border-radius: 50%;
  box-shadow: 4px 4px rgba(32, 32, 32, 1);
  color: #000000;
  color: rgba(0, 0, 0, 1); /* white */
  display: inline-block;
  font-family: 'Poller One', cursive;
  height: 2em;
  margin-right: 0.5em;
  padding-left: 0.7em;
  padding-top: 0.7em;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
  width: 2em;
}
.resume {
  border-left: 3px solid #FF8C00; /* orange */
  border-left: 3px solid rgba(255, 140, 0, 1); /* orange */
  padding: 0.8em;
}
.resume p,
.resume ul li {
  font-size: 0.8em;
}
.skill {
  font-size: 1em;
  font-weight: bold;
}
.company_name {
  color: #DCDCDC;
  color: rgba(220, 220, 220, 1);
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}
.date {
  color: #D3D3D3;
  color: rgba(211, 211, 211, 1);
  font-size: 0.8em;
  font-style: italic;
}
.banner {
  background-color: #323232;
  background-color: rgba(50, 50, 50, 1); /* dark gray */
  border-bottom: 1px solid #000000;
  color: #FF8C00;
  color: rgba(255, 140, 0, 1); /* orange */
  font-family: 'Poller One', cursive;
  font-size: 1.75em;
  font-weight: bold;
  padding: 0.2em;
  text-shadow: 2px 1px 1px rgba(50, 50, 50, 1);
}