/* To be used for the entire site */
body { /* Add some margin as a base */ margin: 5rem 2rem; }

/* Links should not be underlined until hovered over */
/* This was the behavior in Boostrap 4, but not in Boostrap 5 */
a { text-decoration: none; }

a:hover { text-decoration: underline; }

/* The exception is the navbar, which should never be underlined */
/* Again, this is to replicate the behavior of Bootstrap 4 */
/* Bootstrap 5 also does this, but the changes above broke it */
#topLevelNav a { text-decoration: none; }

/* Link to jump to the main content of the page, for accessibility */
/* We'll put it in the very top left corner of the page */
#skipToTheMain { position: absolute; top: 0; left: 0; z-index: 1000; }

/* Center objects in the page itself */
/* Have some parameters for calculating the width of objects */
#topLevelNav, #footer, #content { /* Center on the page with auto margins */ margin: auto; /* Also add some space to the bottom */ margin-bottom: 2rem; /* By default, page objects take up as much space as possible */ /* (Of course, we constrain the width to have large margins on the sides) */ /* If you need to take less, change these after inheriting */ width: 50vw; min-width: 23rem; max-width: 10in; }

/* The navigation bar and the footer take up the "full" width of the page, after centering.
*/
/* By contrast, the content is inset somewhat */
#content { width: calc(50vw - 2rem); min-width: calc(23rem - 2rem); max-width: calc(10in - 2rem); }

/* The footer link should not be underlined on hover */
/* instead, it should be a different color */
#footerLink { color: var(--bs-tertiary-color); }

#footerLink:hover { color: var(--bs-secondary-color); text-decoration: none; }

/* FIXME: Dimensions of `assets/img/profile.webp` are hard-coded here */
/* If that image changes, this has to be changed too */
/* Needed to not shift the layout on load */
#profileImgContainer { width: 100%; margin-bottom: .7rem; aspect-ratio: 0.8502155172; }

#profileImg { width: 100%; height: 100%; border-radius: 0.25rem; }

#socialMediaLinks { font-size: 300%; text-align: right; }

/* Make the social media links slightly whiter on hover. We do this by blending into the white background.
*/
.socialMediaLink:hover { opacity: .7; }

/* The RSS link is placed in an H1, so we don't need to increase the font size. We do want to make it slightly whiter on hover, though.
*/
.rssLink:hover { opacity: .7; }