card.css

/*** MAIN SELECTORS ***/
html {
  background: #536574;
  font-size: 2vw;
  min-height: 100%;
  margin: 0;
}
body {
  align-items: center;
  animation: gradient-animation 120s linear infinite;
  background: linear-gradient(60deg, #c2e59c , #64b3f4);
  background-size: 200% 200%;
  color: #536574;
  display: flex;
  font-family: 'Source Sans Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}
h1 {
  color: #475969;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}
p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}
h1::selection,
span::selection,
em::selection,
a::selection {
  background: #c2e59c;
}
em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
}
ul {
  align-items: center;
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
a {
  color: #536574;
  transition: color 150ms ease-in-out;
}
a:hover {
  color: #4F8EC1;
}

/*** CLASS SELECTORS ***/
.contact {
  align-items: flex-start;
  flex-direction: column;
}
.social {
  justify-content: space-between;
}
.contact, .social {
  margin-top: 1em;
}
.social li {
  height: .6em;
  width: .6em;
}
.social li:nth-child(2) {
  flex-grow: 1;
  margin-left: .4em;
}
.social li:last-child {
  flex-grow: 0;
}
.twitter{
  background-image: url("images/twitter.svg");
  display: block;
  height: 100%;
}
.twitter:hover {
  background-image: url("images/twitter-hover.svg");
}
.github{
  background-image: url("images/github.svg");
  background-repeat: no-repeat;
  display: block;
  height: 100%;
}
.github:hover {
  background-image: url("images/github-hover.svg");
}
.more{
  animation: pointer 3s ease-in-out infinite;
  background-image: url("images/fingerright.svg");
  display: block;
  height: 100%;
}
.more:hover {
  background-image: url("images/fingerright-hover.svg");
}
.links {
  justify-content: center;
  margin-bottom: 2em;
}
.links li {
  font-size: .6em;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-right: 2em;
  text-transform: uppercase;
}
.links li a {
  color: #6D7F8F;
  text-decoration: none;
}
.links li a:hover,
.links li a:active {
  color: #4F8EC1;
}
.card {
  background-color: #fff;
  border-radius: 0.125em;
  box-shadow: 0 0 0.125em rgba(90, 103, 114, 0.1);
  flex-direction: column;
  font-size: 1.2em;
  padding: 2.2em 4.4em;
}
.card-front {
  display: flex;
}
.card-back {
  display: none;
  margin: 2em auto;
  max-width: 70%;
}
.head {
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}
.content {
  margin-bottom: 1em;
}
.name {
  font-size: 3.5em;
}
.title {
  color: #6D7F8F;
  font-size: 1.2em;
  font-weight: 700;
  text-transform: uppercase;
}
.portrait {
  align-self: center;
  border-radius: 50%;
  border: 1px solid #d2d7dc;
  height: 5em;
  margin-bottom: 2em;;
  overflow: hidden;
  width: 5em;
}
.tagline {
  font-size: 1.5em;
}

/*** ANIMATIIONS ***/
@keyframes gradient-animation {
  0%{background-position:0 50%}
  50%{background-position:100% 50%}
  100%{background-position:0 50%}
}
@keyframes pointer {
  10%{transform: translateX(.16em)}
  15%{transform: translateX(0)}
  20%{transform: translateX(.2em)}
  25%{transform: translateX(0)}
}

/*** BREAKPOINTS ***/
@media screen and (max-width: 599px) {
  html {
    font-size: 3.2vw;
  }
  body {
    align-items: stretch;
    height: 100vh;
  }
  .name {
    font-size: 2.4em;
  }
  li {
    font-size: 1.2em;
  }
  .card {
    justify-content: space-between;
  }
  .card-front {
    margin: 20% 0 30% 0;
    padding: 6.8em 2em 2.2em 2em;
  }
  .card-back {
    padding: 2.2em 2em;
  }
  .card-front .head {
    flex-grow: 2;
  }
  .subhead {
    display: block;
  }
  .portrait {
    display: none;
  }
  .social li {
    height: 1em;
    width: 1em;
  }
}