body {
    color: var(--text-color-body);
    background-color: var(--background-color);
    font-family: var(--text-font-family-body);
    font-weight: var(--text-font-weight-body);
    font-optical-sizing: auto;
    font-style: normal;
    font-size: var(--text-font-size-body);
}

body .dark-mode-only {
    display: none;
}

body.dark-mode .dark-mode-only {
    display: contents;
}

body .light-mode-only {
    display: contents;
}

body.dark-mode .light-mode-only {
    display: none;
} 

side-bar:not(.active) + * {
    display: block;
    position: relative;
    left: var(--sidebar-width-collapsed);
    width: calc(100% - var(--sidebar-width-collapsed));
    transition: all var(--transition-duration) ease;
}

side-bar.active + * {
    display: block;
    position: relative;
    left: var(--sidebar-width-active);
    width: calc(100% - var(--sidebar-width-active));
    transition: all var(--transition-duration) ease;
}

header {
    color: var(--text-color-header);
    background-color: var(--background-color-header);
    line-height: 1;
}

header img {
    width: auto;
    height: auto;
    max-width: calc(var(--text-font-size-xxlarge) + 1rem);
    max-height: calc(var(--text-font-size-xxlarge) + 1rem);
}

h1 { 
    font-size: var(--text-font-size-xxlarge);
    font-family: var(--text-font-family-display);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h2 { 
    font-size: var(--text-font-size-xxlarge); 
}

h3 { font-size: var(--text-font-size-xlarge); }

h4 { font-size: var(--text-font-size-large); }

h5 { font-size: var(--text-font-size-medium); }

h6 { font-size: var(--text-font-size-body); }

h2, h3, h4, h5, h6 {
    font-family: var(--text-font-family-display);
    font-optical-sizing: auto;
    font-weight: var(--text-font-weight-light);
    font-style: normal;
    padding: var(--spacing-size-medium);
}

a {
    color: var(--text-color-link);
}

strong {
    font-weight: var(--text-font-weight-bold);
}

em {
    font-family: var(--text-font-family-body);
    font-weight: var(--text-font-weight-body);
    font-style: italic;
}

/* Mono */
.roboto-mono-code-snippet {
    font-family: Roboto Mono, Consolas, monaco, monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* Body Text */
.roboto-regular {
    font-family: Roboto, Arial, Helvetica Neue, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
}
  
.roboto-medium {
    font-family: Roboto, Arial, Helvetica Neue, Helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-regular-italic {
    font-family: Roboto, Arial, Helvetica Neue, Helvetica, sans-serif;
    font-weight: 400;
    font-style: italic;
}

/* Display Text */
.roboto-slab-main-title {
    font-family: Roboto Slab, Rockwell, Georgia, Times, Times New Roman, serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
} 

.roboto-slab-title {
    font-family: Roboto Slab, Rockwell, Georgia, Times, Times New Roman, serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}