body {

}

/* css for title */
h4 {
  color: #55acee;
  text-align: center;
}

.link {
  border-bottom: 2px dotted #55acee;
  text-decoration: none;
  color: #55acee;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
}

.link:hover {
  color: #2ecc71;
  border-bottom: 2px dotted #2ecc71;
}

/* css for the shiny buttons */
.btn {
  cursor: pointer;
  margin: 5px;
  border-radius: 5px;
  text-decoration: none;
  padding: 5px;
  font-size: 14px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  display: inline-block;
}

.blue {
  color: #55acee;
  border: 2px #55acee solid;
}

.blue:hover {
  background-color: #55acee;
  color: #fff
}

.sitio {
  color: #000000;
  border: 2px #7599a9 solid;
}

.sitio:hover {
  background-color: #7599a9;
  color: #fff
}

.green {
  color: #000000;
  border: 2px #5E7830 solid;
}

.green:hover {
  color: #fff;
  background-color: #5E7830;
}

.red {
  color: #e74c3c;
  border: 2px #e74c3c solid;
}

.red:hover {
  color: #fff;
  background-color: #e74c3c;
}

.purple {
  color: #9b59b6;
  border: 2px #9b59b6 solid;
}

.purple:hover {
  color: #fff;
  background-color: #9b59b6;
}

.orange {
  color: #e67e22;
  border: 2px #e67e22 solid;
}

.orange:hover {
  color: #fff;
  background-color: #e67e22;
}

.yellow {
  color: #f1c40f;
  border: 2px #f1c40f solid;
}

.yellow:hover {
  color: #fff;
  background-color: #f1c40f;
}

.buttons {
  padding-top: 30px;
  text-align: center;
}