.c { text-align: center; }

.r { text-align: right; }

.hide { display: none; }

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    background-color: var(--white);
    position: relative;
}

main .anchor {
    height: 60px;
    margin-top: -60px;
    z-index: -1;
}

main > nav {
    position: sticky;
    text-align: center;
    z-index: 1;
}

main > nav > a {
    font-size: 18px;
    color: var(--blue);
    text-decoration: none;
    display: inline-block;
    padding: 0 10px;
    transition: color 0.3s ease;
}

main > nav > a:hover { color: var(--green); }

/* Mobile */
@media (max-width: 1399.999px) {
    main > nav {
        top: 59px;
        background-color: #fff;
        padding: 15px;
    }
}

@media (min-width: 1400px) {
    main > nav { 
        top: 22px; 
        margin: 0 240px;
    }
}

hgroup h1 {
    text-transform: uppercase;
    font-size: 32px;
    font-weight: 100;
}

h3 {
    font-weight: 300;
    font-size: 26px;
    margin: 0 0 10px 0;
}

h4 {
    font-weight: 300;
    font-size: 20px;
    margin: 10px 0;
    color: var(--text);
}

p {
    margin: 10px 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--text);
}

ul li,
ol li {
    padding: 3px 5px;
    font-size: 16px;
    line-height: 26px;
    color: var(--text);
}

ul li {
    list-style: none;
    position: relative;
}

ul li::before {
    position: absolute;
    display: block;
    content: ' ';
    border-bottom: 1px solid var(--green);
    border-right: 1px solid var(--green);
    width: 6px;
    height: 12px;
    top: 14px;
    left: -20px;
    transform: translateY(-50%) rotate(45deg);
}

.yes,
.no {
    padding-left: 30px;
    position: relative;
    font-size: 16px;
}

.yes::before {
    position: absolute;
    display: block;
    content: ' ';
    border-bottom: 1px solid var(--green);
    border-right: 1px solid var(--green);
    width: 6px;
    height: 12px;
    top: 4px;
    left: 6px;
    transform: rotate(45deg);
}

.no::before,
.no::after {
    position: absolute;
    top: 12px;
    left: 3px;
    display: block;
    content: ' ';
    border-top: 1px solid var(--red);
    width: 16px;
}

.no::before { transform: rotate(45deg); }

.no::after { transform: rotate(-45deg); }

button[type=submit] {
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button[type=submit],
a.button {
    display: inline-block;
    padding: 1px 30px 0 30px;
    border-radius: 30px;
    background-color: var(--green);
    color: white;
    font-size: 17px;
    line-height: 40px;
    cursor: pointer;
    font-family: Roboto, sans-serif;
    font-weight: 300;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .5s ease;
}

button[type=submit]:hover,
a.button:hover { background-color: var(--blue); }

a.button.star {
    background-image: url(../svg/btnstar.svg);
    background-repeat: no-repeat;
    background-position: 8px 6px;
    padding: 0 30px 0 50px;
}

div.more { padding-top: 20px; }

a.more {
    text-decoration: none;
    color: black;
    font-family: Roboto, sans-serif;
    font-weight: 300;
    font-size: 16px;
    transition: color .25s ease;
    white-space: nowrap;
    color: var(--black);
}

a.more hr {
    display: inline-block;
    border: none;
    margin: 0 0 0 10px;
    width: 30px;
    height: 1px;
    background-color: var(--blue);
    transition: width .25s ease, background-color .25s ease;
    vertical-align: middle;
}

a.more:after {
    content: '';
    display: inline-block;
    margin: 0 0 1px -6px;
    width: 0;
    height: 0;
    transform: rotate(45deg);
    border-right: 1px solid var(--blue);
    border-top: 1px solid var(--blue);
    transition: width .3s ease, height .3s ease, border-color .2s ease;
}

a.more:hover { color: var(--green); }

a.more:hover hr {
    width: 40px;
    background-color: var(--green);
}

a.more:hover:after {
    width: 6px;
    height: 6px;
    margin: 0 0 1px -8px;
    border-color: var(--green);
}

a.morebtn {
    text-decoration: none;
    text-transform: uppercase;
    color: var(--dgray);
    font-family: Roboto, sans-serif;
    font-weight: 300;
    font-size: 16px;
    transition: color .25s ease;
    white-space: nowrap;
    cursor: pointer;
}

/* main > .red a.morebtn { color: white; } */

a.morebtn span {
    padding: 11px 20px 10px 20px;
    margin: 0 5px;
    border: 1px solid var(--border);
    display: inline-block;
    vertical-align: middle;
    transition: all .25s ease;
}

main .red a.morebtn,
main .red a.morebtn span { 
    border-color: white; 
    color: white;
}

a.morebtn:hover span {
    padding: 11px 30px 10px 30px;
    margin: 0 10px;
    border-radius: 30px;
    color: white;
    background-color: var(--green);
    border-color: transparent;
}

a.morebtn hr {
    display: inline-block;
    border: none;
    margin: 0 10px;
    width: 30px;
    height: 1px;
    background-color: var(--border);
    vertical-align: middle;
    transition: width .25s ease, background-color .25s ease;
}

main > .red a.morebtn hr { background-color: white; }

a.morebtn:hover hr {
    width: 40px;
    background-color: var(--green);
}

/* INFO: https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css */
.stars {
    mask: url(../svg/stars.svg) no-repeat center / contain;
    -webkit-mask: url(../svg/stars.svg) no-repeat center / contain;
    width: 80px;
    height: 30px;
    margin: 0 auto;
}

/* INFO: https://blog.prototypr.io/css-only-multi-color-backgrounds-4d96a5569a20 */
.stars.one { background: linear-gradient(90deg, orange 20%, gray 20% ); }

.stars.two { background: linear-gradient(90deg, orange 40%, gray 40% ); }

.stars.three { background: linear-gradient(90deg, orange 60%, gray 60% ); }

.stars.four { background: linear-gradient(90deg, orange 80%, gray 80% ); }

.stars.five { background-color: orange; }

section.rules { max-width: 850px; }

section.rules aside {
    display: inline-block;
    width: 250px;
    vertical-align: top;
    position: sticky;
    top: 100px;
}

section.rules aside nav a {
    display:  block;
    padding: 5px 0;
}

/*section.rules aside nav a.current { font-weight: bold; }*/

section.rules article {
    display: inline-block;
    width: 600px;
    vertical-align: top;
}