:root {
  --slate:#3f4a57;
  --border-radius:8px;
}
*, *:before, *:after {box-sizing:border-box;}
@viewport {width:device-width; zoom:1;}
html,
body {width:100vw; height:100vh; margin:0; padding:0;}
html {font-size:16px; text-size-adjust:100%; background:#eee;}
body {color:#333; font:1em/1.5em "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; letter-spacing:0.5px; font-weight:300;}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {display:block;}
a {color:#333; text-decoration:underline; transition:all 0.2s ease-in-out; -webkit-tap-highlight-color:rgba(0,0,0,0);}
a:focus {outline:thin dotted;}
::selection {background:#0058cf; color:#fff; text-shadow:none;}
strong, b {font-weight:bold;}
em, i {font-style:italic;}
img {display:block;}

/* Headings
----------------------------------------------------*/
h1,h2 {line-height:1.1em; color:var(--slate); font-weight:700; text-rendering:optimizeLegibility;}
h1 a,h2 a {text-decoration:none;}
h1 a:visited,h2 a:visited {color:#333;}
h1 a:hover,h2 a:hover {text-decoration:underline;}
h1 {margin:0 0 1rem; font-size:4.6rem; text-align:center;}
h2 {font-size:1.6rem;}

.wrapper {height:100%;}
.content {padding:1rem;}
.card {background:#fff; border-radius:var(--border-radius); box-shadow:0 0px 8px rgba(80,80,80,0.3);}
  .card h2 {margin:0; padding:1rem; color:#fff; font-size:2rem; font-weight:normal; text-align:center; text-transform:uppercase; background:var(--slate); border-top-left-radius:var(--border-radius); border-top-right-radius:var(--border-radius);}
  .card-body {padding:1rem;}
  .card p {margin:0;}

/* 700px
----------------------------------------------------*/
@media only screen and (min-width:43.75em) {
  .wrapper {display:flex; align-items:center; justify-content:center;}
  .content {width:80%; max-width:600px; padding:0;}
  h2 {font-size:2.2rem;}
}