#top_banner {

    --background-image: url("/img/banner/default.png");
    --banner-height: 90px;

    position: relative;

    background-color: var(--color-base);
	background: linear-gradient(to right, var(--color-base) 25%, transparent 100%), var(--background-image), var(--color-dark);
    background-position: right, center;
    background-size: cover;

    border-radius: 10px;

    height: 0px;
    animation: banner_appear 0.5s ease-in-out 0s 1 forwards;

}
#top_banner.no_animations {
    height: var(--banner-height);
    animation: unset;
}

#banner_container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    color: white;

    padding: 0 0.75em;
    box-sizing: border-box;

    overflow: hidden;

    font-family: "Libre Franklin";
    font-weight: bold;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

#banner_container:hover {
    text-decoration: none !important;
}

#banner_container::after {
    display: none;
}

#top_banner .banner_title, #top_banner .banner_subtitle {
    position: relative;
    z-index: 12;

    line-height: 1.25em;

    opacity: 0;
}

#top_banner .banner_title {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: clip visible;

    font-size: 20pt;
    font-weight: bold;

    animation: banner_title_enter 1s ease-out 1s 1 forwards;
}

#top_banner .banner_subtitle {
    font-size: 16pt;

    animation: banner_title_enter 1s ease-out 2s 1 forwards;
}

#top_banner.no_animations .banner_title, #top_banner.no_animations .banner_subtitle {
    opacity: 1;
    animation: unset;
}


#twitch_livestream {
    z-index: 11;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;

    overflow: hidden;
    pointer-events: none;

    opacity: 0;
    animation: banner_livestream_enter 3s ease-out 2s 1 forwards;
}
#twitch_livestream > iframe {

    position: absolute;
    top: -105px;
    right: 0;

    border: none;
    mask-image: linear-gradient(to right, rgb(0, 0, 0, 0) 0%, rgb(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 1) 75%);

    width: 60%;
    height: auto;
    aspect-ratio: 16 / 9;

    /*filter: blur(1px);*/

}
#top_banner_settings {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);

    cursor: pointer;
    padding: 0.25em 0.5em;
    background-color: var(--background-color);

    border-radius: 2px 2px 0 0;

    &:hover {
        color: white;
        --background-color: var(--color-dark);
    }

    &::before,
    &::after {
        content: " ";
        display: block;
        position: absolute;
        bottom: 0;

        border-width: 13px;
        border-style: solid;
        /*width: 25px;
		height: 25px;*/

        box-sizing: border-box;
    }

    &::before {
        border-color: transparent var(--background-color) var(--background-color) transparent;
        left: -26px;
    }

    &::after {
        border-color: transparent transparent var(--background-color) var(--background-color);
        right: -26px;
    }
}

/* Special styles just to move the button down when it doesn't fit between the bottom nav sections */
@media only screen and (max-width: 750px) {
    #top_banner {
        margin-bottom: 1.75em;
    }

    #top_banner_settings {
        position: absolute;
        top: unset;
        bottom: 0;
        left: unset;
        right: 10px;
        transform: translateY(100%);

        border-radius: 0 0 5px 5px;

        &::before,
        &::after {
            display: none;
        }
    }
}

@media only screen and (max-width: 916px) {
    #top_banner {
        --banner-height: 11vw;
    }

    #top_banner .banner_title {
        font-size: 2.85vw;
    }

    #top_banner .banner_subtitle {
        font-size: 2.33vw;
    }

    #twitch_livestream > iframe {
        width: 75vw;
        top: 0;
        transform: translateY(-35%);
    }

}

@media only screen and (max-width: 590px) {

    #top_banner {
        --banner-height: 14vw;
    }

    #top_banner {
        border-radius: 0;
        border-top: 2px solid black;
        border-bottom: 2px solid black;
    }

    #top_banner .banner_title {
        font-size: 4vw;
    }

    #top_banner .banner_subtitle {
        font-size: 2.5vwvw;
    }

}

@keyframes banner_appear {
	from { height: 0px;                  /*padding: 0;*/           }
	to   { height: var(--banner-height); /*padding: 0.5em 0.75em;*/}
}

@keyframes banner_title_enter {
	from { transform: translateX(-2em); opacity: 0; }
	to   { transform: translateX(0em);  opacity: 1; }
}

@keyframes banner_livestream_enter {
	from { opacity: 0; }
	to   { opacity: 1; }
}