/* Global font settings */
body, h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto", sans-serif;
    margin: 0;
}

/* Sidebar styles */
.w3-sidebar {
    width: 120px;
    background: #222;
}

#main {
    margin-left: 120px;
}

@media only screen and (max-width: 600px) {
    #main {
        margin-left: 0;
    }
}

/* Paragraph spacing and line height */
p {
    font-size: 18px;
    line-height: 1.4;
    color: #ddd;
    margin-bottom: 8px;
}

/* Specific styling for 'About Jamie' section */
.about-jamie-text {
    margin-top: 5px;
}

/* Consistent margin and padding for sections */
section, .w3-padding-32 {
    margin: 5px 0;
    padding: 10px 0;
}

/* Tighten spacing for all h2 headers */
h2 {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Consistent style for all horizontal rules */
hr {
    width: 200px; /* Consistent width for all */
    border: none; /* Remove any default border */
    border-top: 1px solid #757575; /* Set the same color and thickness */
    margin-top: 5px; /* Consistent margin */
    margin-bottom: 10px; /* Consistent margin */
}


/* Style for Spotify and Apple widgets */
.spotify-widget, .apple-widget, iframe {
    margin-bottom: 8px;
    margin-top: 8px;
}

/* Reduce vertical spacing between iframe elements */
iframe {
    margin-top: 5px; /* Reduce the space between iframes */
    margin-bottom: 5px; /* Adjust the bottom spacing */
}

/* Ensuring that there's reduced space between consecutive iframes */
iframe + iframe {
    margin-top: 5px !important; /* Enforce tight spacing between widgets */
}


/* Highlight for 'Cancer' in red */
.red-text {
    color: red !important;
}

/* Animation container settings */
#large-header {
    position: absolute; /* Use absolute positioning */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Ensure it's in the background */
    overflow: hidden;
    pointer-events: none;
}


/* Full-screen canvas styling */
canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* silhouette-image logo */
.silhouette-image {
    height: 100px; /* Adjust to match heading height */
    margin-right: 20px;
    object-fit: contain;
}