/* custom.css */

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

/* plasma colors
#0d0887 (dark purple)
#5e02a3 (purple)
#9c179e (violet)
#d41a74 (magenta)
#f4513b (red)
#f98e10 (orange)
#fbf400 (yellow)
#fbf100 (light yellow)
#e6e900 (chartreuse)
#c6fd05 (lime green)

# FROM LOGO
#731251 (pink)
#150140 (dark lila)
#D6D984
#BF7417

# gray
333333ff
# light gray
808080ff
# light lila
16003f62
D6D3EF

# 80% opacity -- last digits
33
# 50% opacity
80


pastel colors

#8e44ad (Light Purple)
#b25dc6 (Light Magenta)
#e085b2 (Soft Pink)
#e9ac96 (Peach)
#f2c365 (Light Yellow)
#f9e051 (Pale Yellow)
#f6ed2f (Lemon Yellow)
#f0e63d (Pastel Yellow-Green)
#d7d71e (Soft Lime)
#b8f34b (Pale Green)

*/

body {
    font-family: 'Open Sans', sans-serif !important;
    background-color: #EFE9F2
}

/* Change heading colors */
h1, h2, h3, h4, h5 {
    font-family: 'Fira Sans', sans-serif !important;
    font-weight: 600;
}


/* Change the background color of the upper-left sidebar where the logo is */
.wy-side-nav-search {
    background-color: #15014033;
}

/* Change sidebar background */
.wy-nav-side {
    background-color: #150140 !important; /* Dark blue */
  }

/* Change sidebar text color */
.wy-menu-vertical a, .wy-menu-vertical li.toctree-l1 > a {
    color: #ffffff !important;
    background-color: #15014080 !important; /* Dark blue */
}

/* Change link hover effect */
.wy-menu-vertical a:hover {
    background-color: #15014033 !important; /* */
}

/* Change the color of all links in the documentation */
a {
    color: #15014080;  /* Blue color for links */
}

/* Change the color of links on hover */
a:hover {
    color: #731251;  /* Pink color on hover */
}

/* Change the color of inline code in Markdown */
code {
    color: #731251 !important; /* You can choose any color here (e.g., a shade of red) */
    background-color: #f4f4f4 !important; /* Optional: light background for inline code */
    border-radius: 3px; /* Optional: rounded corners for inline code */
    padding: 0 4px; /* Optional: space around the code */
}

/* Make the slideshow container responsive */
.youtube-slideshow {
    position: relative;
    width: 100%;
    max-width: 960px; /* Max width for larger screens */
    margin: 0 auto; /* Centering */
    padding-top: 56.25%; /* 16:9 aspect ratio (height / width = 9 / 16) */
    background-color: #000; /* Black background to fill empty space */
}

/* Make the iframe responsive */
.youtube-slideshow iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Button Styles */
.slideshow-button {
    font-size: 2em; /* Larger font size for arrows */
    padding: 10px;
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 10; /* Ensure buttons appear on top of the video */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Position buttons on left and right */
.prev-button {
    left: 10px;
}

.next-button {
    right: 10px;
}

/* Hover effect for buttons */
.slideshow-button:hover {
    background-color: rgba(0, 0, 0, 0.5); /* Darken button on hover */
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
    .slideshow-button {
        font-size: 1.5em; /* Smaller arrows on mobile */
    }
    .youtube-slideshow {
        padding-top: 56.25%; /* Maintain aspect ratio */
    }
}