/* Adds a colorful gradient background to the header */
.md-header {
    background: linear-gradient(300deg, #EAD6FF, #D7EBFF, #F8D6E8);
    background-size: 180% 180%;
    animation: unicorn-test 20s ease infinite;
    background-attachment: fixed;
    color:black;
    
}
.md-tabs {
    background-color: transparent;
    color: black;
}

/* Changes the color of the site title to black */
.md-header__topic {
    color:black;
}
.md-header__topic:first-child {
    font-weight: 500;
}

/* Styles the search box on desktop */
@media screen and (min-width: 60em) {
    .md-search__form {
        background-color:white;
    }
    .md-search__input::placeholder {
        color: rgba(0, 0, 0, 0.54) !important;   /* pastel lavender example */
        opacity: 1;                  /* make sure it isn't faded */
}
    .md-search__form:hover {
        background-color:white;
    }
    .md-search__input+.md-search__icon {
        color: rgba(0, 0, 0, 0.54);

    }
}

/*Hides site name from the top of the left-hand navigation menu on desktop*/
@media (min-width: 1024px) {
.md-nav__title {
    display: none;
}
}
/*Styles header for nav bar on mobile*/
@media screen and (max-width: 76.2344em) {
    .md-nav--primary .md-nav__title[for=__drawer] {
        background: linear-gradient(300deg, #EAD6FF, #D7EBFF, #F8D6E8);
        color: #6E7BA4;
        font-weight: 700;
    }
    .md-nav--primary .md-nav__title {
        background: linear-gradient(300deg, #EAD6FF, #D7EBFF, #F8D6E8);
    }
} 

.md-nav__item .md-nav__link--active, .md-nav__item .md-nav__link--active code {
    color: #5069A6;
}
.md-nav__link[href]:hover {
    color: #6E7BA4;
}
[dir=ltr] .md-nav--integrated>.md-nav__list>.md-nav__item--active .md-nav--secondary
    {
    border-left-color: #5069A6;
}


/* Right-hand Table of Contents */
.md-nav--secondary {
  font-size: 0.75rem; 
}
.md-nav--secondary .md-nav__item {
    font-size: 0.75rem;
}

/* Adds a colorful gradient background to section headlines */
.colored-headline {
    background: linear-gradient(90deg, #EAD6FF, #D7EBFF, #F8D6E8);
    background-size: 200% 200%;
    padding-left: 5px;
}

/* Footer styles */
.md-footer {
    background-color: #E3E2F6;
    color: black
}
.md-copyright {
    color: darkslategrey
}
.md-footer-meta.md-typeset a {
    color: darkslategrey !important;
}
.md-footer-meta {
    background-color: #E3E2F6;
    border-top: 1px solid darkgrey;
}

:root  > * {
  --md-primary-fg-color:        #EE0F0F;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark:  #90030C;

  --md-accent-fg-color:                #6E7BA4;
  --md-accent-fg-color--transparent:   hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
  --md-accent-bg-color:                hsla(0, 0%, 100%, 1);
  --md-accent-bg-color--light:         hsla(0, 0%, 100%, 0.7);
}