#rules-wrapper{
    display: flex;
    gap: 40px;
}

/* Sidebar
----------------------------------------
 */

#rules-sidebar{
    width: 250px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
    align-self: flex-start;
}

#rules-sidebar div{
    background-color: var(--primaryLight);
    margin-bottom: 10px;
    padding: 10px 15px;
}

#rules-sidebar h3{
    margin: 0;
    font-size: 1.2rem;
    font-weight: normal;
    color: var(--textColor);
}

#rules-sidebar ul{
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

#rules-sidebar li{
    padding: 4px 0;
}

#rules-sidebar a{
    text-decoration: none;
}

#rules-sidebar a.active{
    color: var(--textColor);
}

#rules-search, #rules-select{
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 10px 15px;
    border: none;
    background-color: var(--primaryLight);
    color: var(--textColor);
    font-size: 1rem;
}

#rules-search::placeholder{
    color: var(--muteText);
}

#rules-select{
    display: none;
}

/* Content
----------------------------------------
 */

#rules-content{
    flex-grow: 1;
}

/* Only show the rule that was clicked, or the first one if none was */
.rule{
    display: none;
    scroll-margin-top: 250px;
}

.rule:target{
    display: block;
}

#rules-content:not(:has(:target)) .rule:first-of-type{
    display: block;
}

#rules-content h2{
    margin-top: 0;
}


#rules-content p{
    margin-top: 0;
    line-height: 1.5;
}

/* The search text, marked by rules.js */
::highlight(rules-search){
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
}

@media only screen and (width < 850px) {
    #rules-wrapper{
        flex-direction: column;
        gap: 10px;
    }

    #rules-sidebar{
        width: 100%;
        position: static;
    }

    /* Swap the category boxes for the dropdown so they don't push the rule off screen */
    #rules-sidebar div{
        display: none;
    }

    #rules-select{
        display: block;
    }
}