:root {
    /* Height of the navbar */
    --mobile_nav_bar_height: 60px;
    --nav_left_right_padding: 25px;
    --nav_desktop_minWidth: 200px;
    --nav_target_pWidth: 10%;
    --focus_visible_outline: 4px solid #ffdd00;
    --light_mode_body_background_color: #fff;
    --dark_mode_body_background_color: #191919;
    --light_mode_body_font-color: #222;
    --dark_mode_body_font_color: #e2e2e2;
}

*:focus-visible {
    outline: var(--focus_visible_outline);
}

body {
    background-color: var(--light_mode_body_background_color);
    color: var(--light_mode_body_font-color);
}

body.dark-theme {
    background-color: var(--dark_mode_body_background_color);
    color: var(--dark_mode_body_font_color);
}

/* Mobile CSS first. Mobile styling must be prioritised */
#content {
    /* Make the border appear inside the box, not outside like default  */
    box-sizing: border-box;
    /* Push down as much as the navbar height on page load */
    padding-top: var(--mobile_nav_bar_height);
    padding-bottom: var(--mobile_nav_bar_height);
    padding-left: calc(var(--nav_left_right_padding));
    padding-right: calc(var(--nav_left_right_padding));
    width: 100%;
    line-height: 1.25;
    overflow: hidden;
}

.section:not(:last-of-type)  {
    padding-bottom: 64px;
}

details > summary:hover {
    opacity: 0.6;
}

details > summary {
    padding: 14px 0px 14px 0px;
    font-weight: bold;
    transition: opacity 0.1s ease-in-out;
    font-size: 1.25em;
}

/* Indent everything that's not the summary of the details section */
details > :not(summary) {
    margin-left: 12px;
}

/* Padding between the items in each section */
#tos_content > details > ol > li {
    padding-bottom: 12px;
}

/* Padding between the sub-items */
#tos_content > details > ol > li > ul > li {
    padding-top: 4px;
}

h1 {
    font-size: 2.5em;
}


/* Desktop styling */
@media only screen and (min-width:968px) and (not (hover: none)) and (not (pointer: coarse)) {
    #content {
        padding-top: 0px;
        padding-bottom: calc(var(--mobile_nav_bar_height)*2);
        padding-left: calc(var(--nav_left_right_padding) + 50px);
        padding-right: calc(var(--nav_left_right_padding)*2);
        /* Move over to the right, so the navbar fits */
        float: right;
        width: calc(100% - var(--nav_target_pWidth));
        /* Use max-width, so when the navbar hits its min width this container
        doesn't start clipping through it, cutting off photo content */
        max-width: calc(100% - var(--nav_desktop_minWidth));
    }

    .section {
        max-width: 800px;
    }

    details > summary {
        cursor: pointer;
    }

}