html,
body {
    background: transparent !important;
}

body {
    position: relative !important;
}

/* Tessellation background */
#tessellation-canvas {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Keep the page content above the canvas */
body > *:not(#tessellation-canvas) {
    position: relative;
    z-index: 1;
}

/* Let the tessellation show through */
#content {
    background-color: transparent !important;
}

/* Subtle dark background behind blog post text */
article.page-content {
    background-color: rgba(0, 0, 0, 0.75) !important;
    padding: 2rem !important;
    border-radius: 15px;
}
/* Subtle dark background behind blog content */
#primary-font.content {
    background: rgba(40, 42, 46, 0.0);
    padding: 2rem;
    border-radius: 15px;
}
#primary-font p {
    font-size: 1.15rem; !important;
    color: #ffffff; !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}
#about .content {
    background-color: rgba(28, 30, 34, 0.0) !important;
    padding: 2rem !important;
    border-radius: 15px;
}
#about h3{
    font-size: 2.5rem; !important;
    color: #ffffff: !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}
#about p{
    font-size: 1.1rem; !important;
    color: #ffffff: !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}
#experience .experience-container {
    background-color: rgba(0, 0, 0, 0.90) !important;
    padding: 1rem !important;
    border-radius: 15px;
}
#experience h3{
    font-size: 2.5rem; !important;
    color: #ffffff: !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}
/* Darken the header */
#profileHeader {
    background-color: rgba(0, 0, 0, 0.50) !important;
}

/* Hide the light/dark mode toggle */
#theme-toggle {
    display: none !important;
}
html body.light.dark > footer {
    background-color: rgba(24, 25, 26, 0.0) !important;
    background-image: none !important;
}
#list-page .card {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

#list-page .post-footer {
    background-color: rgba(0, 0, 0, 0.50) !important;
}
#list-page .bg-transparent {
    background-color: rgba(0, 0, 0, 0.00) !important;
}
#list-page .card-text * {
    background-color: rgba(0, 0, 0, 0.00) !important;
}

#list-page .post-footer a {
    background-color: rgba(0, 0, 0, 0.00) !important;
    color: #ffffff: !important;
}

#single aside {
    background-color: rgba(0, 0, 0, 0.75) !important;
    color: #ffffff: !important;
}