.header-style, h1, h2, h3, h4, h5, h6 {
   font-family: 'Lato', Open Sans, sans-serif;
   color: hsl(0, 0%, 20%);
   text-align: center
}

h1 {
   padding: 16px 0 16px;
   font-size: 28px;
   line-height: 1.25;
}
h1 > span {
   font-size: 16px;
   line-height: 1;
}

body {
   font-family: 'Lato', Open Sans, sans-serif;
   font-size: 14px;
   font-weight: 500;
   color: #005b81;
}

a {
   color: #005b81;
   text-decoration: none;
}

.main {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   background-image: url("inrupt-logo-hexagons.svg");
   background-repeat: space; 
}

.cardset {
  display: flex;
  flex-flow: row wrap;
  max-width: 640px;
  justify-content: flex-start;
}


.card {
   
   background: white;
   border: 1px solid #005b81;
   border-radius: 4px;
   box-shadow: rgb(184, 196, 194) 0px 4px 10px -4px;
   box-sizing: border-box;

   width: 280px;
   height: 150px;
   padding: 0 1.5rem;
   margin: 1rem 1.2rem 1rem 1.2rem;

   display: block;
}


.card-header {
   display: block;
   padding-left: 5px;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-bottom: 2.5rem;
   background: #005b81;
   color: white;

}
.card-body {
   padding-top: 5px;
   justify-content: center;
   align-items: center;
}

i.fas {
  margin-right: 1rem; 
}

i.fab {
  margin-right: 1rem; 
}

svg.fa-js-square {
   margin-right: 1rem;
}

svg.fa-book {
   margin-right: 1rem; 
}

.logo {
   line-height: inherit;
   position: relative;
   height: 45px;
   width: 250px;
}

header {
   display: flex;
   background: #fff !important;
   box-shadow: 0 .125rem .25rem 0 rgba(0,0,0,.11);
   width: auto;
}

footer {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   background-repeat: space; 
}

@media (max-width: 643px) {
   .cardset {
      justify-content: center;
   }
}