a {
  font-family: arial;
}

a:link    { color: #05F; }
a:visited { color: #05F; }
a:hover   { color: #F00; }
a:active  { background-color: #FA0;}


body {
  background-color: #333;
}

#container {
  max-width: 1200px;
  min-height: 300px;
  margin-left:  auto;
  margin-right: auto;
  background-color: #FFF;
  box-shadow: 0 0 7px 2px #000;
}

h1 {
  height: 70px;
  line-height: 70px;
  font-family: Arial;
  color: #DDD;
  background-color: #D00;
  text-transform: uppercase;
  padding-left: 30px;
  border-bottom: 1px solid #A00;
}

h2 {
  height: 70px;
  line-height: 70px;
  font-family: Arial;
  text-transform: uppercase;
  padding-left: 30px;
  border-bottom: 1px solid #A00;
  font-size: 18px;
}

h3 {
  font-family: Arial;
  margin-left: 20px;
}

main {
  padding-top: 20px;
}

ul {
  list-style-type: none;  
}

ul.mlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

ul.mlist li {
  width: 360px;
  margin-bottom: 20px;
  font-family: Arial;
}

ul.friends {
  height: 120px;
  display: flex;
  flex-wrap: wrap;
  margin: 20px;
  margin-top: 5px;
  padding: 20px;
  justify-content: space-around;
  background-color: #EEE;
}

ul.friends li {
  margin-right: 10px;
}


footer {
  text-align: center;
  height: 70px;
  line-height: 70px;
  background-color: #000;
}