/* Basic Normalize*/
* {
  margin: 0 auto;
  font-family: 'Ubuntu', sans-serif;
  padding: 0;
}

/* Update Fork Me ribbon */

.github-fork-ribbon::before {
  background-color: #665176;
}

a {
  color: black;
  text-decoration: none;
}

ul {
  list-style: none;
}

.p {
  margin: 12px 0;
}

.header {
  margin: 20px 0;
}

.btn {
  border: 1px solid #555;
  padding:0 15px;
}

.btn--big {
  font-size: 2rem;
  padding: 0 60px;
}

.btn.pill {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.section {
  margin: 50px 0;
}

.text.center {
  text-align: center;
}

.text.secondary {
  font-family: 'Roboto', sans-serif;
}

.container {
  width: 90%;
  margin: 0 auto;
}

.block--center {
  margin: 0 auto;
  display: block;
}

.margin-bottom--20 {
  margin-bottom: 20px;
}

.content {
  padding-top: 17px;
}

.logo {
  width: 75%;
}

.h1 {
  font-size: 5rem;
  margin-top: -32px;
}

.h2 {
  font-size: 3rem;
}

.active {
  border-color: #665176;
  color: #665176;
}

.hover-active {
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

.hover-active:hover {
  border-color: #665176;
  color: #665176;
}

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 4px solid black;
}

/* Refactor someday */
.circle, .circle * {
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

/* Refactor someday */
.circle:hover, .circle:hover * {
  border-color: #665176;
  color: #665176;
}

.libraries {
  list-style: none;
  margin-top: 50px;
  margin-bottom: 50px;
}

.library {
  width: 100%;
  margin-top: 25px;
}

.library:hover .clircle {
  border-color: #0E0E0E;
}

.library .library-name {
  font-size: 3.5rem;
  line-height: 150px;
}

.library a {
  display:inline-block;
}

.library h3 {
  text-align: center;
  margin-top: 15px;
  font-size: 2rem;
}

.library .circle {
  text-align: center;
}

.library-search {
  margin-top: 25px;
  margin-bottom: 25px;
}

.library-search-item {
  margin: 25px;
}

.library-search-item .library-name {
  color: #665176;
  font-size: 1.5rem;
}

.library-search-item .protocol-name {
  color: rgba(0,0,0,0.5);
  font-size: .75rem;
}

.library-description {
  margin-top: 5px;
  font-size: .75rem;
}

.available-libraries-list {
  text-align: center;
  padding: 15px;
}

.search-table {
    border: solid 1px #101010;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Roboto, sans-serif;
    width: 100%;
}
.search-table thead th {
    background-color: #101010;
    border: solid 1px #101010;
    color: #DCDCDC;
    padding: 10px;
    text-align: left;
}
.search-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
}

footer {
  background-color: rgba(0,0,0,0.05);
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
}

footer .icon {
  font-size: 2.5rem;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}

footer .icon:hover {
  color: #665176;
}

@media (min-width: 720px) {
  .logo {
    width: 45%;
  }

  .libraries {
    margin-top: 55px;
  }

  .library {
    width: 30%;
    margin-top: 0;
    margin-bottom: 90px;
  }
}