body {
    /* source: https://www.toptal.com/designers/subtlepatterns/topography/ */
    background-image: url("src/img/topography.977e3fd0f430.977e3fd0f430.png");
    height: 100%;
}

.card-header > h1 {
    font-size: 1.5rem;
    margin: 0;
}

/* login form formatting - START */
.social {
    position: relative;
    height: 3em;
    width: 13.5em;
    margin: 50px 50px 60px 50px;
}

.social li {
    display: block;
    height: 4em;
    line-height: 4em;
    margin: -2.2em;
    position: absolute;
    -webkit-transition: -webkit-transform .7s;
    -moz-transition: -moz-transform .7s;
    -ms-transition: -ms-transform .7s;
    -o-transition: -o-transform .7s;
    transition: transform .7s;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    text-align: center;
    width: 4em;
}

.social a {
    color: #fffdf0;
    display: block;
    height: 4em;
    line-height: 6em;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 4em;
}

.social li:hover {
  -webkit-transform: scale(1.3,1.3) rotate(45deg);
    -moz-transform: scale(1.3,1.3) rotate(45deg);
  -ms-transform: scale(1.3,1.3) rotate(45deg);
    -o-transform: scale(1.3,1.3) rotate(45deg);
  transform: scale(1.3,1.3) rotate(45deg);
}

.facebook {
    background: #155b9d;
    left: 50%;
    top: 0%;
}

.twitter {
    background: #1a9ec4;
    bottom: 0;
    left: 25%;
}
.facebook2 {
    background: #155b9d;
    left: 50%;
    top: 0%;
}

.twitter2 {
    background: #1a9ec4;
    bottom: 0;
    left: 25%;
}

.strava {
    background: #fc4C02;
    left: 0;
    top: 0%;
}
.behance {
    background: #3f7aa3;
    bottom: 0;
    left: 75%;
}
.behance2 {
    background: #3f7aa3;
    top: 0%;
    left: 50%;
}
.behance3 {
    background: #3f7aa3;
    bottom: 0;
    left: 75%;
}

/* center icons */
.fa-3x {
    font-size: 3em;
    vertical-align: text-bottom;
}

.disabled {
    background: darkgrey;
}
/* login form formatting - END */