/* vars */

:root {
    --sans-serif: 'Figtree', Arial, Helvetica, sans-serif;
}

/* init */

html, body, article {
    margin: 0;
    padding: 0;
}

html, body, h1, h2, h3, h4, h5, h6, input, textarea, p, button {
    font-family: var(--sans-serif);
}

dt {
    font-weight: 700;
}

.container {
    max-width: 640px;
    margin: 0 auto;
    width: 100%; 
}

.logo {
    width:120px;
}

header {
    padding: 20px 20px 0 20px;
}

footer {
    padding: 20px;
}

a {
    color:#e00;
}

main {
    padding:0 20px 20px 20px;
}

h1 {
    text-align: center;
}

h2 {
    margin-top: 2.4rem;
    margin-bottom: 0.2rem;
}

h3 {
    text-align: center;
    font-weight: 100;
}

.hero {
    background: linear-gradient(to bottom right, #92FE9D, #00C9FF);
    padding:60px 40px;
    box-shadow: -5px 5px black;
    margin-bottom: 40px;
}

.hero h3 {
    background:#fff;
    padding:10px;
    box-shadow: -5px 5px black;
    margin-bottom: 20px; 
}

.play {
    margin:0 auto;
    width: 200px;
    display:block;
}

.hero h3:nth-child(even) {
    margin-left:-10px;
    margin-right: 10px;
}

.hero h3:nth-child(odd) {
    margin-left:10px;
    margin-right: -10px;
}

.hero h3:last-child {
    margin-bottom: 0;
}

.hero h3.lead {
    font-size:3rem;
    font-weight: 700;
    margin: 0 60px 40px 60px;
}