body{
    font-family:Arial, Helvetica, sans-serif;
    background:#111;
    color:#fff;
    margin:0;
    text-align:center;
}

a{
    color:#ffcc00;
    text-decoration:none;
    transition:opacity 0.2s ease;
}

a:hover{
    opacity:0.8;
}

.page{
    max-width:700px;
    margin:0 auto;
    padding:30px 20px 40px;
}

.page-wide{
    max-width:1000px;
}

h1{
    margin:0 0 12px;
    font-size:3rem;
}

.page-intro{
    margin:0 0 18px;
    color:#ddd;
    font-size:1.1rem;
}

.main-nav{
    margin:0 0 20px;
}

.main-nav a{
    color:#ffcc00;
    margin:0 12px;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    display:inline-block;
    padding:4px 0;
}

.main-nav a:hover{
    text-decoration:underline;
}

.card{
    background:#222;
    padding:20px;
    margin:20px 0;
    border-radius:12px;
    text-align:left;
}

.footer{
    margin:40px 0 0;
    color:#777;
    font-size:0.9rem;
}

.tagline-rotator{
    position:relative;
    height:28px;
    margin:0 0 18px;
    color:#ddd;
    font-size:1.05rem;
    overflow:hidden;
}

.tagline-rotator span{
    position:absolute;
    left:0;
    right:0;
    opacity:0;
    animation:taglineRotate 18s linear infinite;
}

.tagline-rotator.alt span:nth-child(1){animation-delay:0s;}
.tagline-rotator.alt span:nth-child(2){animation-delay:6s;}
.tagline-rotator.alt span:nth-child(3){animation-delay:12s;}

@keyframes taglineRotate{
    0%{opacity:0; transform:translateY(8px);}
    5%{opacity:1; transform:translateY(0);}
    28%{opacity:1; transform:translateY(0);}
    33%{opacity:0; transform:translateY(-8px);}
    100%{opacity:0; transform:translateY(-8px);}
}

.cta-card{
    background:#ff9800;
    color:#000;
}

.cta-card a{
    color:#000;
    font-weight:bold;
}