html {
    --pst-font-size-base: 17px;
}

.underline {
    text-decoration: underline;
}

/*  SCORE specfic colors 
    A list of available colro variable names for pyData Sphinx Theme can be found at
    https://pydata-sphinx-theme.readthedocs.io/en/stable/_downloads/565fbb3ecf2b3048f5fb3953890ba176/_color.scss 
    
    The base color is TEAL */


html[data-theme="light"] {
    --pst-color-primary: #547980;
    --pst-color-secondary: #45ADA8;
    --pst-color-accent: #9DE0AD;
    --pst-color-target: #E5FCC2;
    --pst-color-on-surface: #594F4F;
    --pst-color-on-background: var(--pst-color-secondary);
    --pst-color-text-muted: #FFFFFF;
    --pst-color-table-row-zebra-high-bg: #e6e7e8;
    --pst-color-table-row-hover-bg: var(--pst-color-secondary); /*#d7d6d6;*/
}

html[data-theme="dark"] {
    --pst-color-primary: #45ADA8;
    --pst-color-secondary: #547980;
    --pst-color-accent: #9DE0AD;
    --pst-color-target: #E5FCC2;
    --pst-color-on-surface: #594F4F;
    --pst-color-on-background: var(--pst-color-secondary);
    --pst-color-text-muted: #FFFFFF;
    --pst-color-table-row-zebra-high-bg: #20242b;
    --pst-color-table-row-hover-bg: var(--pst-color-secondary); /*#30353e;*/
}

html[data-theme="dark"] #logo_center_light {
    display:none;
 }
 
html[data-theme="light"] #logo_center_drk {
     display:none;        
}

.search-button-field {
    color: var(--pst-color-primary);
}
html .pst-navbar-icon:hover {
    border-bottom: max(3px,.1875rem,.12em) solid var(--pst-color-primary) !important;
    color: var(--pst-color-primary) !important;
  }

.bd-header ul.navbar-nav > li.nav-item.current > .nav-link {
    color: var(--pst-color-text-muted) !important;
    font-weight: 900 !important;
}

.bd-header ul.navbar-nav > li.nav-item > .nav-link:hover {
    color: var(--pst-color-primary);
}

ul.navbar-nav li a {
    color: var(--pst-color-primary);
  }

.bd-search input.form-control::placeholder,
.bd-search input.form-control {
    color: var(--pst-color-primary) !important;
}

/* Right sidebar */
.toc-entry a.nav-link {
    color: var(--pst-color-text-base);
}
/* Left, top SCORE brand  */
.navbar-brand p
{
    color: var(--pst-color-text-muted);
    font-weight: 900;
}
.navbar-brand:hover, .navbar-brand:visited:hover {
    text-decoration: none;
}

/* GitHub logo for shorten URL  */
a.github::before {
    content: var(--pst-icon-github);
    color: var(--pst-color-text-base);
}
a.github {
    text-decoration: none !important;
}

/* Left sidebar links */
nav.bd-links li > a {
    color: var(--pst-color-text-base);
}

/* Breadcrumbs, above page content: Link color */
ul.bd-breadcrumbs li.breadcrumb-item a {
    color: var(--pst-color-text-base);
    text-decoration: none;
}

/* Breadcrumbs, above page content: Arrow color */
ul.bd-breadcrumbs li.breadcrumb-item:not(.breadcrumb-home)::before {
    color: var(--pst-color-text-base);
}

blockquote {
    color: var(--pst-color-text-base);
}

.admonition, div.admonition {
    background-color: rgba(0,0,0,0.1);
}

/* SCORE Background video
   Source: https://www.imi21.com/background-video-full-screen.php */

div.score_banner {
    background-color: var(--pst-color-on-surface);
}
#videowrapper{  
    position: relative;
    overflow: hidden;
} 

#fullScreenDiv{
    height: 300px;
    width: 100%;
    padding:0;
    margin: 0;
    /* background-color: gray;
    position: relative; */
    container-type: inline-size;
}

#video{    
    width: 100%; 
    /* height: auto;
    margin: auto;
    display: block; */
}
@media (min-aspect-ratio: 16/9) {
  #video{
    width: 100%; 
    height:auto;
  }
}

#score-title {
    width: 100%; 
    height: 100%;
    position: absolute; 
    top: 0; 
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--pst-color-text-base);
    /* font-size: 4.5em; */
    font-size: 8.0cqw;
    font-weight: 900;
    
    /* Is somehow cool with image/video title background */
    /*animation: fadeIn 3s;  */
}

/* As long as no image or video is shown in
   the title, this is not needed, but kept 
   for future needs */
/* html[data-theme="light"] #score-title {
    background-color: rgba(0,0,0,0.3);
}
html[data-theme="dark"] #score-title {
    background-color: rgba(0,0,0,0.5);
} */

#score-subtitle {
    font-size: 0.4em;
}

#score-phrase {
    font-size: 0.3em;
    font-weight: 400;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

#logo_center_drk {
    background-color: transparent;
}