:root {
    --img_spacing: 15px;
    --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;
}

/* Remove the default body margins, to avoid edge gaps on each side of body */
body {
    margin: 0px;
    font-family: Verdana, Arial, sans-serif;
}

/* By default, remove all styling from a tag content */
a {
    /* Inherit the text colour and styling from the body */
    text-decoration: inherit;
    color: inherit;
}

*: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 */
#bwuff_img_container {
    /* 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: calc(var(--mobile_nav_bar_height)*2);
    padding-bottom: var(--mobile_nav_bar_height);
    padding-left: calc(var(--nav_left_right_padding)*2);
    padding-right: calc(var(--nav_left_right_padding)*2);
    width: 100%;
    line-height: 1.25;
    overflow: hidden;
}

#bwuff_img_container > p {
    padding-bottom: var(--img_spacing);
}

#about_main_img {
    /* Make the border appear inside the box, not outside like default  */
    box-sizing: border-box;
    display: block;
    margin-left:auto;
    margin-right: auto;
    width: 60vw;
    height: auto;
    border-radius: 5px;
}

#about_info_title {
    text-align: center;
    font-weight: bold;
    margin-bottom: calc(var(--img_spacing) * 4);
}

#comm_link {
    font-weight: bold;
    transition: opacity 0.1s ease-in-out;
}

#comm_link:hover {
    opacity: 0.6;
}




/* Desktop styling */
@media only screen and (min-width:968px) and (not (hover: none)) and (not (pointer: coarse)) {
    #bwuff_img_container {
        padding-top: var(--mobile_nav_bar_height);

        /* Move over to the right, so the navbar fits */
        float: right;

        /* Push the content back over to the left, next to navbar */
        width: calc(100% - var(--nav_desktop_minWidth));
        padding-right: calc(100% - var(--nav_desktop_minWidth) - 1000px);
    }

    #bwuff_img_container > p {
        margin-left: 42%;
    }

    #about_main_img {
        /* Make the border appear inside the box, not outside like default  */
        box-sizing: border-box;
        display: block;
        float: left;
        width: 40%;
        height: auto;
        margin-right: var(--img_spacing);
    }

    #about_info_title {
        text-align: left;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: var(--img_spacing);
    }

}