/*----Globals------*/
body, html, #root, .App {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    /*background-color: rgb(18, 18, 18);*/
    color: white;
    font-family: 'Lucida Console';
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
body {
    width: 100%;
    background-image: repeating-radial-gradient(circle at 17% 32%, white, black 0.00085px);
    background-position: center;
    animation: back 5s linear infinite;
}

a {
    color: #04FF00;
}

@keyframes back {
    from {
        background-size: 100% 100%;
    }

    to {
        background-size: 200% 200%;
    }
}
.clsBodyMain {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    background-color: black;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
}
.contentBlock {
    /*    border-top: .5px #BA0DFF solid;
    border-left: .5px #BA0DFF outset;
    border-right: .5px #BA0DFF inset;
    border-bottom: .5px #BA0DFF dashed;*/
    /*padding-bottom: 5%;
    padding-top: 5%;*/
    padding: 5% 5% 5% 5%;
    margin-bottom: 5%;
    /*    box-shadow: 0px 0px 70px 0px #04FF00;*/
}

    /*----NAVBAR------
.navbar-nav{
    width:100%;
    text-align:center;
}
li.nav-item{
    width:16.6%;
}
    */
    /* TvBar.css */

    .nav-item {
        position: relative;
        overflow: hidden;
        transition: opacity 0.3s ease;
    }

    .hover-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .nav-item:hover .hover-image {
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    .nav-item:hover img {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .header-image {
        display: block;
        width: 100%;
        height: auto;
    }
    /*MOBILE NAV*/

    .mobileNav {
             background-color: black;
             padding-left: 10%;
             padding-right: 10%;
         }

         .mobileNav .navbar-toggler {
             margin-left: auto;
         }

         .mobileNav .navbar-nav .nav-item {
             width: 100%;
             height: 50px;
             margin: 0;
             padding: 0;
         }

         .mobileNav .navbar-nav .nav-link {
             display: block;
             width: min(280px, 100%);
             height: 50px;
             margin: 0 auto;
             padding: 0;
         }

         #navHome {
             height: 50px;
             background-image: url('../IMG/Mobile Nav/Home.gif');
             background-position: center;
             background-repeat: no-repeat;
             background-color: black;
             background-size: min(280px, 100%) auto;
         }

         #navMusic {
             height: 50px;
             background-image: url('../IMG/Mobile Nav/Music.gif');
             background-position: center;
             background-repeat: no-repeat;
             background-color: black;
             background-size: min(280px, 100%) auto;
         }

         #navVideo {
             height: 50px;
             background-image: url('../IMG/Mobile Nav/Video.gif');
             background-position: center;
             background-repeat: no-repeat;
             background-color: black;
             background-size: min(280px, 100%) auto;
         }

         #navConcerts {
             height: 50px;
             background-image: url('../IMG/Mobile Nav/concerts.gif');
             background-position: center;
             background-repeat: no-repeat;
             background-color: black;
             background-size: min(280px, 100%) auto;
         }

         #navShop {
             height: 50px;
             background-image: url('../IMG/Mobile Nav/Shop.gif');
             background-position: center;
             background-repeat: no-repeat;
             background-color: black;
             background-size: min(280px, 100%) auto;
         }

         #navContact {
             height: 50px;
             background-image: url('../IMG/Mobile Nav/Contact.gif');
             background-position: center;
             background-repeat: no-repeat;
             background-color: black;
             background-size: min(280px, 100%) auto;
         }

    .bar {
        margin: 0 auto;
        text-align: center;
    }

    img.header-image {
        width: 100%;
    }
    /*----HOMEPAGE------*/

.divLandingMainHome {
    position: relative;
    display: inline-block; /* <= shrinks container to image size */
    transition: transform 150ms ease-in-out;
}

.home-hook {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: clamp(1rem, 5vw, 4rem);
    background: rgba(0, 0, 0, 0.42);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: white;
    text-align: center;
}

.home-hook-copy {
    width: 100%;
    max-width: 48rem;
}

.home-hook h2 {
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 4vw, 3rem);
}

.home-hook p {
    margin: 0;
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    line-height: 1.7;
}

.home-video {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.home-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.home-link-directory {
    margin: 1.5rem auto;
    padding: 0.75rem;
    border: 1px solid white;
    color: white;
    background: black;
    font-family: 'Lucida Console', monospace;
}

.home-link-directory-header {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid white;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.home-link-directory h2 {
    margin: 1rem 0;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    text-align: center;
}

.home-link-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.home-link-card {
    display: flex;
    min-height: 110px;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem;
    border: 1px solid white;
    color: white;
    text-decoration: none;
}

.home-link-card:hover,
.home-link-card:focus-visible {
    border-color: #04FF00;
}

.home-link-index {
    font-size: 0.65rem;
}

.home-link-title {
    color: #04FF00;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: underline;
}

.home-link-description {
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    line-height: 1.4;
}

.home-link-footer {
    margin: 0.75rem 0 0;
    font-size: 0.65rem;
    text-align: center;
}

@media (max-width: 575.98px) {
    .home-link-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-link-card {
        min-height: 0;
    }
}

#imgChillHome {

    margin: 0, auto;
}

#svgAthHome {
    position: absolute;
    top: 70px;
}
    .pulsate {
        animation: pulsate 1.5s infinite alternate;
    }

    .clsHeadMessage {
        text-align: center;
        font-family: 'Lucida Console';
    }

    #food {
        float: right;
    }

    @keyframes pulsate {
        100% {
            text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa;
        }

        0% {
            text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 10px #0fa, 0 0 45px #0fa, 0 0 55px #0fa, 0 0 70px #0fa, 0 0 80px #0fa;
        }
    }

#divBio {
    background-image: url('../IMG/Home/10A_0376.jpg');
    background-position: center;
    background-size: cover;
    padding: 10%;
    text-align: center;
    min-height: 337px;
}
@media (min-width: 300px) {
    #divBio {
        min-height: 250px;
        padding-top: 60px;
    }
}
@media  (min-width: 768px) {
    #divBio {
        min-height: 337px;
        padding-top: 10%;
    }
}


@media (min-width: 300px) {
    .prev {
        margin-left: -40px
    }
}
@media (min-width: 300px) {
    .forward {
        margin-right: -40px
    }
}
    #spnBioText {
        background-color: rgb(0, 0, 0, 0.8);
        font-size: larger;
        padding: 5px;
    }

    #spnBioQuote {
        font-size: x-large;
        font-style: italic;
        margin-top: 10%;
        background-color: rgb(0, 0, 0, 0.8);
        padding: 5px;
        font-family: 'Times New Roman';
    }

    .btnThoughts {
        color: white;
        font-weight: bolder;
        text-shadow: 1px 1px 3px black;
        background-color: #ba0dff96;
        float: right;
    }

    #divThoughts {
        background-image: url('../IMG/Home/lapse.gif');
        background-position: center;
        background-size: cover;
        background-color: rgb(0, 0, 0, 0.79);
        text-shadow: 1px 1px 2px black;
        padding-bottom: 10%;
    }

        #divThoughts textarea {
            color: white;
            background-color: rgb(0, 0, 0, 0.54);
        }

    #btnEmail {
        background-image: url('../IMG/Home/lapse.gif');
        background-position: center;
        background-size: cover;
        background-color: rgb(0, 0, 0, 0.79);
        text-shadow: 1px 1px 2px black;
    }

    .formmessage {
        text-align: center;
    }
    /*Form animations for sucess/error messages */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes shake {
        from, to {
            transform: translateX(0);
        }

        25%, 75% {
            transform: translateX(-10px);
        }

        50% {
            transform: translateX(10px);
        }
    }

    .fade-in {
        animation: fadeIn 1s ease-in-out;
    }

    .shake {
        animation: shake 0.5s ease-in-out;
    }

    /*-----MUSIC-------*/
    .musicimg {
        max-width: 85%;
        padding: 5%;
    }

    .spotEmbed {
        padding-top: 5%;
    }

    .musicHeader {
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
        0% {
            box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
            transform: translateY(0px);
        }

        50% {
            box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
            transform: translateY(-20px);
        }

        100% {
            box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
            transform: translateY(0px);
        }
    }

    .album {
    }

    .imgNewTrack {
        float: right;
        padding-bottom: 20px;
    }

    .h4NewTrack {
        text-align: center;
    }

    .musictext {
    }

    @media (min-width: 992px) {
        .musictext {
            font-size: 20px;
        }
    }

.imgAlbum {
    width: 100%;
    padding: 3%;
    /*margin:5%;*/
    padding-bottom: 20px;
    /*box-shadow: 0px 0px 5px purple;*/
}

.music-page {
    padding-bottom: 3rem;
}

.music-intro {
    margin: -1rem 0 2rem;
    text-align: center;
}

.music-feature {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.25rem;
    border: 1px solid white;
}

.music-feature-player {
    flex: 0 0 min(100%, 350px);
    max-width: 350px;
}

.music-feature-player iframe {
    display: block;
    width: 100%;
    height: 350px;
    border: 0;
}

.music-feature-copy {
    flex: 1;
}

.music-feature-label {
    margin-bottom: 0.5rem;
    color: white;
    font-weight: bold;
}

.music-section-label {
    margin: 0 0 0.75rem;
    color: white;
    font-size: 1.25rem;
}

.music-link-section {
    margin-bottom: 2rem;
}

.music-platform-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 0;
    padding: 1rem;
    border: 1px solid white;
}

.music-listen-section {
    margin-bottom: 2rem;
}

.music-player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    gap: 1rem;
    padding: 1rem;
    border: 1px solid white;
}

.music-player-card {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid white;
}

.music-player-grid iframe {
    display: block;
    width: 100%;
    height: 350px;
    border: 0;
}

@media (max-width: 575.98px) {
    .music-feature {
        align-items: flex-start;
        flex-direction: column;
    }

    .music-feature-player {
        width: 100%;
    }
}

    .services {
        padding: 0;
        margin: 0px;
    }
    .divServ {
        max-height: 137px;
        
    }

.services img {
    min-width: 100%;
    
}
    #imgYT{
        padding-top:10%;
    }
    #imgAmz {
        padding-top: 15%;
    }
    .limewire {
        width: 50%;
        margin-left: 25%;
        margin-top: -5%;
        margin-bottom: -5%;
    }

/*-----MUSIC PLAYER-------*/

    #player-container #play-pause {
        cursor: pointer;
        text-indent: -999999px;
        height: 40px;
        width: 40px;
        padding: 12px 18px;
        z-index: 2;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAyNHYtMjRsMjAgMTItMjAgMTJ6Ii8+PC9zdmc+);
        background-repeat: no-repeat !important;
        background-position: center;
        background-size: 16px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px;
        background-color: gainsboro;
    }

    .clsAudioPlayer {
        margin-top: -78px;
        padding-bottom: 10px;
        width: 94%;
        margin-left: 3%;
    }

    .divProgBar {
        width: 100%;
        height: 30%;
        position: fixed;
        top: 100%;
        left: 0;
        right:-55px;
        
        transform: translateY(-50%);
        background: rgb(2,0,36);
        background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(9,9,121,0) 3%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 100%);
    }
    @media (min-width: 768px) {
        .divVolBar {
            position: fixed;
            bottom: 200px;
            right: 0px;
            left: 80%;
        }
    }
    @media (max-width: 767px) {
        .divVolBar {
            display:none;
        }
    }
    #btnAudioPlay {
        background-color: transparent;
        background-repeat: no-repeat;
        border: none;
        cursor: pointer;
        overflow: hidden;
        outline: none;
    }
    @media (min-width: 768px) {
        .track {
            position: fixed;
            bottom: 190px;
            left: 45%;
        }
    }


    @media (max-width: 767px) {
        .track {
            position: fixed;
            bottom: 95px;
            left:5px;
        }
    }

     /*------VIDEO-----*/
        .video {
        padding-left: 5%;
        padding-right: 5%;
        /*  min-width: 321px;*/
    }

        .video iframe {
            /*min-width: 321px;*/
        }

    .titVideo {
        padding-bottom: 2rem;
    }

.virtual-tv {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem;
    border: 2px solid white;
    outline: none;
}

.virtual-tv:focus-visible {
    outline: 2px solid #04FF00;
    outline-offset: 4px;
}

.tv-screen-frame {
    padding: 0.75rem;
    border: 1px solid white;
}

.tv-screen {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.tv-screen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tv-static-burst {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    width: 100%;
    height: 100%;
    pointer-events: none;
    image-rendering: pixelated;
}

.tv-static-burst.active {
    display: block;
    animation: tv-static-fade var(--tv-static-duration, 1400ms) linear forwards;
}

@keyframes tv-static-fade {
    0%, 97.85% { opacity: 0.9; }
    100% { opacity: 0; }
}

.tv-channel-overlay {
    position: absolute;
    top: 5%;
    left: 5%;
    z-index: 3;
    display: none;
    padding: 0.1em 0.25em;
    color: #04FF00;
    background: rgba(0, 0, 0, 0.75);
    font-family: 'Lucida Console', monospace;
    font-size: clamp(1.5rem, 5vw, 3rem);
    line-height: 1;
    text-shadow: 0 0 0.15em #04FF00;
    pointer-events: none;
}

.tv-channel-overlay.active {
    display: block;
    animation: tv-channel-display 2s steps(1, end) forwards;
}

@keyframes tv-channel-display {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

.tv-standby {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    color: white;
    text-align: center;
    background: linear-gradient(90deg, #fff 0% 14.28%, #ff0 14.28% 28.56%, #0ff 28.56% 42.84%, #0f0 42.84% 57.12%, #f0f 57.12% 71.4%, #f00 71.4% 85.68%, #00f 85.68% 100%);
}

.tv-standby p {
    margin: 0;
    padding: 0.4rem 0.75rem;
    background: rgba(0, 0, 0, 0.8);
    font-size: clamp(1.5rem, 5vw, 3rem);
}

.tv-standby span,
.tv-instructions {
    color: white;
    font-size: 0.9rem;
}

.tv-standby span {
    padding: 0.3rem 0.5rem;
    background: rgba(0, 0, 0, 0.8);
}

.tv-instructions {
    margin: 1rem 0;
    text-align: center;
}

.tv-remote {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.tv-channel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.65rem;
    border: 1px solid white;
    color: white;
    background: black;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tv-channel:hover,
.tv-channel:focus-visible,
.tv-channel.selected {
    border-color: #04FF00;
}

.tv-power-button {
    grid-column: 1 / -1;
    justify-content: center;
}

.tv-channel-number {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    border: 1px solid currentColor;
    color: #04FF00;
}

@media (max-width: 767.98px) {
    .mobileNav .navbar-brand {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .virtual-tv {
        padding: 0.75rem;
    }

    .tv-screen-frame {
        padding: 0.4rem;
    }

    .tv-remote {
        grid-template-columns: minmax(0, 1fr);
    }
}

    /*----Concerts----*/
    .Concert {
        color: white;
        transition: opacity 500ms linear,text-shadow 500ms ease-in-out,color 300ms linear;
    }

        .Concert:hover {
            opacity: 0.8;
            text-shadow: 1px 1px #454545;
            color: lawngreen;
            text-shadow: 0px 0px 20px #000000;
            animation: myanim 100ms infinite linear;
            cursor: pointer;
        }

        .Concert:active {
            opacity: 0.8;
        }

    @keyframes myanim {
        10% {
            transform: scale(2)rotate(0deg);
        }

        20% {
            transform: scale(2)rotate(-3deg);
        }

        80% {
            transform: scale(2)rotate(3deg);
        }

        100% {
            transform: scale(2)rotate(0deg);
        }
    }

    /*----Shop----*/
    #divShop {
        background-color: blue;
        height: 100%;
        width: 100%;
        min-height: 100vh;
    }

    #divProducts {
        
        width: 80%;
    }

    .imgProduct {
        object-fit: none;
        min-height: 600px;
        
    }

    #divNumber {
        text-align: center;
    }

    #divPrice {
        padding-left: 35%;
        color: yellow;
        text-shadow: 0px 6px 0px black;
        font-size: 90pt;
        font-family: Swiss921 BT;
        position: relative;
    }

    .spnSmallPrice {
        font-size: 65pt;
        position: absolute;
        top: 15px;
    }

    .spnShipping {
        position: absolute;
        top: 120px;
        color: white;
        font-size: 15pt;
        padding: 0;
        margin: 0;
        width: 100%;
        font-family: Tahoma;
    }

    #divTextUs {
        color: white;
        font-size: 25pt;
    }

    #divTextPhone {
        color: yellow;
        text-shadow: 0px 6px 0px black;
        font-size: 55pt;
        font-family: Swiss921 BT;
    }

    .animated-product {
        animation: fadeInUp 1s ease;
        animation-fill-mode: both;
        transform: scale(0)
    }

    @keyframes fadeInUp {
        to {
            transform: scale(1);
        }
    }

    /*---------EPK-----------*/
#divEPKLanding {
    text-align: center;

}
.divLandingMain {
    position: relative;
    display: inline-block; /* <= shrinks container to image size */
    transition: transform 150ms ease-in-out;
}
#imgChill{
    height:300px;
    margin:0, auto;
}
#svgAth{
    position:absolute;
    top:70px;
}
#svgAth img {
    display: block;
    max-width: 100%;
    height: auto;
}
.accordion-button, .accordion-button:not(.collapsed), .accordion-item, .accordion-header, .accordion {
    background-color: black;
    color: white;
    border-color: white;
    font-family: 'Lucida Console';
}
    .accordion-button a, .accordion-item a, .accordion a {
        color: #04FF00;
        border-color: white;
    }
    .accordion-button:after {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2304FF00'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
        border-color: white;
    }
    .accordion-button:focus {
        border-color:white;
        box-shadow:none;
    }
    #imgThumb{
        width:100%;
    }
    

    /*---------------Footer-------------*/
.clsFooter {
    background-color: black;
    border-top: var(--bs-border-width) solid #ffffff26;
}


.nav-link {
    color: #04FF00;
}
nav-link:hover {
    color: #04FF00 !important;
}
nav-link:focus {
    color: #04FF00 !important;
}
.nav-item:hover
{
    
    color: #04FF00;
}
.nav-item:focus {
    color: #04FF00;
}
.athFoot{
    color:white;
}