.highlight {
    background-color: #003057;
    text-align: center;
    margin: 1.6% 0 0 0;
    padding: 3% 2% 3% 2%;
}

.highlight p {
    font-family: "avenir-light", sans-serif;
    font-size: 17px;
    text-align: center;
    color: white;
    margin: 0.5% 0 0.5% 0;
}

.highlight .title {
    font-family: "avenir-black", sans-serif;
    font-size: 22px;
    text-align: center;
    color: white;
    margin: 1% 0 0.5% 0;
}

.highlight .detail {
    font-family: "avenir-light", sans-serif;
    font-size: 13px;
    text-align: center;
    color: white;
}

.highlight .note {
    font-family: "avenir-light", sans-serif;
    font-size: 11px;
    text-align: center;
    color: white;
}

.highlight .small-note {
    font-family: "avenir-light", sans-serif;
    font-size: 8px;
    text-align: center;
    color: white;
}

.footer {
    background-color: #696c6f;
    color: white;
    padding: 0.5% 2% 1.5% 2%;
}

.official-rules-link {
    font-size: 20px;
}

.official-rules {
    font-family: "avenir-light", sans-serif;
    font-size: 1.2em;
    text-align: center;
    color: #003057;
    margin: 1em 1em 3em 1em;
}

.official-rules .title {
    font-family: "avenir-light", sans-serif;
    font-size: 3em;
    text-align: center;
    color: #003057;
}

.official-rules .sub-title {
    text-align: center;
}

.official-rules .content {
    text-align: left;
}

.official-rules p {
    margin: 1em 1em 2em 1em;
    line-height: 1.3;
}