* {
  box-sizing: border-box;
  line-height: 1.5;
  font-family: 'Open Sans', sans-serif;
}

img {
  max-width: 100%;
}

body {
  background: #444;
}

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

.card {
  position: relative;
  background: #333;
  width: 500px;
  min-height: 75vh;
  border-radius: 6px;
  padding: 2rem;
  color: #aaa;
  box-shadow: 0 .25rem .25rem rgba(0,0,0,0.2),
    0 0 1rem rgba(0,0,0,0.2);
  overflow: hidden;
  margin: 5% 10px;
}

.card__image-container {
    margin: -2rem -2rem 1rem -2rem;
}
  
.card__line {
  opacity: 0;
  animation: LineFadeIn .8s .8s forwards ease-in;
}

.card__image {
    opacity: 0;
    animation: ImageFadeIn .8s 1.4s forwards;
}

.card__title {
    color: white;
    margin-top: 0;
    font-weight: 800;
    letter-spacing: 0.01em;
}
  
.card__content {
    margin-top: -1rem;
    opacity: 0;
    animation: ContentFadeIn .8s 1.6s forwards;
  }
  
.card__svg {
    position: absolute;
    left: 0;
    top: 115px;
}

@keyframes LineFadeIn {
  0% { opacity: 0; d: path("M 0 300 Q 0 300 0 300 Q 0 300 0 300 C 0 300 0 300 0 300 Q 0 300 0 300 "); stroke: #fff; }
  50% { opacity: 1; d: path("M 0 300 Q 50 300 100 300 Q 250 300 350 300 C 350 300 500 300 650 300 Q 750 300 800 300"); stroke: #888BFF; }
  100% { opacity: 1; d: path("M -2 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 802 400"); stroke: #545581; }
}

@keyframes ContentFadeIn {
  0% { transform: translateY(-1rem); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes ImageFadeIn {
  0% { transform: translate(-.5rem, -.5rem) scale(1.05); opacity: 0; filter: blur(2px); }
  50% { opacity: 1; filter: blur(2px); }
  100% { transform: translateY(0) scale(1.0); opacity: 1; filter: blur(0); }
}


/* added */

h1 {
	font-size: 24px;
	padding-top: 40px;
}

a:link, a:visited, a:focus, a:hover, a:active {
	color: white;
}