styles.css

/* 
  These styles are to ensure consistency with Bioconductor.org.
  Source: https://github.com/Bioconductor/bioconductor.org/tree/devel/assets/style/base
  Adapted from Bioconductor global styles including color, typography, and layout.
*/

/* Define Bioconductor color variables */
:root {
  --gradient-brand: linear-gradient(to right, #0087af, #0484a9, #18a603);
  --primary: #3792ad;
  --primary-p500: #003242;
  --neutral-n50: #f9f9f9;
  --default-body: #070707;
  /* Add other colors as needed */
}

/* Import fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

/* Apply font to body and text elements */
body, h1, h2, h3, h4, h5, h6, p, a {
  font-family: "Atkinson Hyperlegible", sans-serif;
}

/* Body and text styling */
body {
  background-color: var(--neutral-n50);
  color: var(--default-body);
}

body a {
  color: black;
  text-decoration: underline;
}

body a:hover {
  color: var(--primary);
  text-decoration: underline;
}

body a:visited {
  color: var(--primary-p400);
}

body a:visited:hover {
  color: var(--primary-p200);
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
  line-height: 120%;
}

h1 {
  font-size: 2.25rem;
  border-bottom: 4px solid var(--primary);
  display: inline-block;
  margin-bottom: 1rem;
}

p {
  font-size: 1rem;
  line-height: 130%;
}

/* Layout and container settings */
.container {
  margin: 0 auto;
  width: calc(100% - 3rem);
  max-width: 1400px;
}

img {
  max-width: 100%;
}

/* Apply the Bioconductor blue-green gradient to the navbar */
.navbar {
  background: var(--gradient-brand) !important;  /* Apply the gradient */
  border-bottom: none;
}

/* Specific styles for the navbar logo */
img.navbar-logo {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  max-height: none;
  height: 50px;
  margin-right: 10px;
}