body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
.header, .footer { background: #250741; color: white; padding: 1em; text-align: center; }
.nav { background: #444; text-align: center; padding: 0.7em; }
.nav a { color: white; margin: 0 10px; text-decoration: none; }
.container { display: flex; flex-wrap: wrap; padding: 1em; }
.photo-section { flex: 2; padding: 1em; }
.last-rated { flex: 1; padding: 1em; }
img { max-width: 100%; height: auto; }
.rating button { margin: 0.3em; padding: 0.5em 1em; }
.widget ul {
  padding: 0;
}
.widget ul > li {
  list-style: none;
  position: relative;
}
.widget ul > li a {
  border-bottom: 1px dashed #ebebeb;
  display: block;
  line-height: 3em;
}
.widget ul > li > ul li {
  padding-left: 14px;
}
.widget ul > li .post-count {
  position: absolute;
  top: 7px;
  right: 0;
  line-height: 26px;
  height: 26px;
  width: 26px;
  border: 1px solid #ebebeb;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.widget ul > li:hover .post-count {
  background: #3abd00;
  border: 1px solid #3abd00;
  color: #ffffff;
}
.widget a:hover, .widget a:focus {
color: #8224e3;
}
.widget a { color: #424242; }
.widget a:visited { color: #424242; }
@media (max-width: 768px) {
    .container { flex-direction: column; }  
}