/**
 * YouTube Section Background Color Change
 */

/* Add transition to body for smooth color change in both directions */
body {
    transition: background-color 0.8s ease;
}

/* Override Tailwind bg-white when youtube-active class is added */
html body.youtube-active {
    background-color: #9FA9B3;
}

/* Default color for Videos section heading and text */
body main section#youtube h2 {
    color: #E09F5D;
    transition: color 0.8s ease;
}

body main section#youtube p {
    transition: color 0.8s ease;
}

/* Change text colors to white when background is gray */
html body.youtube-active main section#youtube h2,
html body.youtube-active main section#youtube p {
    color: white;
}

/* Hide globe background when background is gray */
html body.youtube-active .globe-background {
    opacity: 0;
    transition: opacity 0.8s ease;
}