/* Universal Selector */
* {
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #121212;
}

@media screen and (min-width: 975px) {
    nav {
        width: 66.66%;
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 20px;
        position: absolute;
        left: 16.67%;
        height: 10%;
    }
    
    
    .nav-items {
        color: #bcd630;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
    }
    
    #nav-logo {
        width: 6%;
    }
    
    .nav-items:hover {
        background-color: #bcd630;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate 0.7s;
        border: 1px solid #bcd630;
    }
    
    @keyframes animate{
        0%{
            box-shadow: inset 0 -200px 0 0 #121212;
            color: #bcd630;
        }
        100%{
            box-shadow: inset 0 0 0 0 #121212;
        }
    }
    /* nav Styling Ends */
    
    /* Carousel Styling */
    #carousel {
        width: 100%;
        margin: auto;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        overflow: hidden;
        height: 80%;
    }
    
    #carousel-images {
        display: flex;
        width: 100%;
        animation: slide 20s infinite;
    }
    @keyframes slide{
        0%{
            transform: translate(0);
        }
        10%{
            transform: translate(0);
        }
        20%{
            transform: translate(-100%);
        }
        30%{
            transform: translate(-100%);
        }
        40%{
            transform: translate(-200%);
        }
        50%{
            transform: translate(-200%);
        }
        60%{
            transform: translate(-300%);
        }
        70%{
            transform: translate(-300%);
        }
        80%{
            transform: translate(-400%);
        }
        100%{
            transform: translate(-400%);
        }
    }
    
    #carousel img{
        width: 100%;
    }
    
    #band-name {
        color: white;
        position: absolute;
        width: 50%;
        margin-left: 50%;
        display: flex;
        justify-content: center;
        height: 80%;
        top: 10%;
        align-items: center;
    }
    
    #band-name p{
        font-family: Impact, sans-serif;
        font-size: 8vw;
        color: #bcd630; 
        text-shadow: 5px 5px #5ea8aa;
        -webkit-text-stroke: 2px #121212;
    }
    /* Carousel Styling Ends */
    
    /* Body Content Styling */
    #content-index {
        position: absolute;
        top: 90%;
    }
    
    /* Band About */
    #about-band {
        width: 40%;
        margin: auto;
        margin-top: 3%;
        border-top: 1px solid #bcd630;
        border-bottom: 1px solid #bcd630;
    }
    
    #about-band p{
        width: 85%;
        margin: auto;
        color: white;
        font-family: "Montserrat", sans-serif;
        font-weight: lighter;
        text-align: center;
        font-size: 1vw;
        line-height: 170%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    #about-logo-full {
        max-width: 20%;
        margin: auto;
        margin-top: 50px;
    }
    /* About Band Info Styling Ends */
    
    /* Band Genre Section Styling */
    #band-description {
        margin-top: 50px;
    }
    
    .row {
        width: 100%;
        display: flex;
        margin: auto;
    }
    
    .col-60{
        width: 60%;
        height: 40dvh;
    }
    
    .col-40 {
        width: 40%;
        height: 40dvh;
    }
    
    .col-40 img, .col-60 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    #yellow {
        color: #bcd630;
        font-family: Impact, sans-serif;
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        font-size: 7.2dvw;
        text-shadow: 5px 5px #5ea8aa;
        -webkit-text-stroke: 2px #121212;
        animation: bounce;
        -webkit-animation: bounce 1s ease infinite alternate;
    }
    
    @keyframes bounce {
        100%{
            transform: translateY(-20px);
        }
    }
    
    #blue {
        color: #5ea8aa;
        font-family: Impact, sans-serif;
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        font-size: 7.2dvw;
        text-shadow: 5px 5px #bcd630;
        -webkit-text-stroke: 2px #121212;
        animation: bounce;
        -webkit-animation: bounce 1s ease infinite alternate;
    }
    
    .col-text-yellow {
        border: 5px solid #bcd630;
    }
    
    .col-text-blue {
        border: 5px solid #5ea8aa;
    }
    /* Band Genre Styling Ends */
    
    /* Styling Footer */
    footer {
        margin-top: 20px;
    }
    
    #icons {
        margin: auto;
        display: flex;
        width: 100%;
        justify-content: center;
    }
    
    #icons img{
        width: 40px;
        padding-left: 5px;
        padding-right: 5px;
    }
    
    #copyright {
        padding: 20px;
        display: flex;
        justify-content: center;
        color: white;
        font-family: "League Spartan", sans-serif;
    }
    /* Footer Ends */
    
    /* Styling About Page */
    #content-about {
        position: absolute;
        top: 10%;
    }
    
    /* Styling Bbanner */
    #banner {
        width: 100dvw;
        height: 60dvh;
    }
    
    #banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    /* Banner Styling Ends */
    
    /* Band History */
    #band-history-about {
        width: 50%;
        margin: auto;
        margin-top: 50px;
        border-top: 1px solid #bcd630;
        border-bottom: 1px solid #bcd630;
    }
    
    #band-history-about p {
        width: 85%;
        margin: auto;
        color: white;
        text-align: center;
        padding: 10px;
        font-size: 1vw;
        font-family: "Montserrat", sans-serif;
        font-weight: lighter;
        line-height: 170%;
    }
    /* Band Hisory Styling Ends */
    
    /* Styling Section for Artist Bio's */
    .col-50 {
        width: 100%;
        height: 60dvh;
        display: flex;
        align-items: center;
    }
    
    .col-50 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #artists-bio-about {
        margin-top: 50px;
    }
    
    
    .name {
        color: #bcd630;
        font-family: Impact, sans-serif;
        font-size: 5vw;
        text-align: center;
        text-shadow: #5ea8aa 5px 5px;
        -webkit-text-stroke: #121212 2px;
    }
    
    .band-position {
        color: #5ea8aa;
        font-family: 'League Spartan', sans-serif;
        font-style: italic;
        font-size: 1vw;
        text-align: center;
    }
    
    .bio {
        color: white;
        font-family: "Montserrat", sans-serif;
        width: 60%;
        text-align: center;
        margin: auto;
        line-height: 150%;
        padding: 10px;
    }
    
    .artist-personal-ig {
        color: #bcd630;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 30%;
        margin: auto;
        text-align: center;
    }
    
    .artist-personal-ig:hover {
        background-color: #bcd630;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate 0.7s;
        border: 1px solid #bcd630;
    }
    
    hr {
        margin: auto;
        border: 1px solid #bcd630;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    /* Styling for Bio's Section Ends */
    
    /* Band Album Release Link Styling */
    #band-album-about {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    
    #band-album-about a {
        color: #5ea8aa;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 30%;
        margin: auto;
        text-align: center;
    }
    
    #band-album-about a:hover {
        background-color: #5ea8aa;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate-blue 0.7s;
        border: 1px solid #5ea8aa;
    }
    
    @keyframes animate-blue{
        0%{
            box-shadow: inset 0 -200px 0 0 #121212;
            color: #5ea8aa;
        }
        100%{
            box-shadow: inset 0 0 0 0 #121212;
        }
    }
    /* Band Album Release Link Styling Ends */
    /* About Page Styling Ends */
    
    /* Styling Music Page */
    #content-music {
        position: absolute;
        top: 10%;
    }
    
    /* Styling Album Logo */
    #album {
        display: flex;
        justify-content: center;
        padding: 20px;
    }
    
    #album img{
        max-height: 30dvh;
    }
    
    #album img:hover {
        scale: 1.05;
    }
    
    /* Album Description Styling Starts */
    #album-description {
        width: 60%;
        margin: auto;
        border-top: 1px solid #bcd630;
        border-bottom: 1px solid #bcd630;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    #album-description p {
        color: white;
        font-family: "Montserrat", sans-serif;
        font-weight: lighter;
        text-align: center;
        line-height: 150%;
        padding: 10px;
        width: 80%;
        margin: auto;
    }
    /* Album Description Styling Ends */
    
    /* Adding Vinyl Designs */
    #vinyl {
        width: 100dvw;
        display: flex;
        justify-content: center;
        gap: 50px;
    }
    
    #vinyl img {
        max-height: 50dvh;
        animation: rotate 20s infinite linear running;
        animation-fill-mode: forwards;
    }
    
    #vinyl img:hover {
        animation-play-state: paused;
    }
    
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Styling Song Section */
    .left-col {
        width: 50%;
        display: flex;
        justify-content: end;
        gap: 5%;
        margin-top: 50px;
        margin-bottom: 50px;
        margin-right: 1.25%;
        margin-left: 1.25%;
        padding-bottom: 50px;
    }
    
    .right-col {
        width: 50%;
        display: flex;
        justify-content: start;
        gap: 5%;
        margin-top: 50px;
        margin-bottom: 50px;
        margin-left: 1.25%;
        margin-right: 1.25%;
        padding-bottom: 50px;
    }
    
    .song {
        width: 40%;
        height: 40dvh;
        border-radius: 20px 20px 0px 0px ;
        box-shadow: 0px 0px 5px #5ea8aa;
    }
    
    .song-image {
        width: 100%;
        height: 100%;
        border-radius: 20px 20px 0px 0px;
        border: 2px solid #bcd630;
    }
    
    .song-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px 20px 0px 0px;
    }
    
    /* Adding Audio Elements */
    audio {
        width: 100%;
        height: 50px;
    }
    
    audio::-webkit-media-controls-enclosure {
        border-radius: 0px 0px 20px 20px;
        background-color: #bcd630;
    }
    
    .left-col p, .right-col p{
        color: white;
        text-align: center;
        font-family: "League Spartan", sans-serif;
        padding: 10px;
    }
    /* Styling for Songs Section Ends */
    
    /* Styling Link to Spotify */
    #full-album a{
        color: #5ea8aa;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 30%;
        margin: auto;
        text-align: center;
    }
    
    #full-album a:hover {
        background-color: #5ea8aa;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate-blue 0.7s;
        border: 1px solid #5ea8aa;
    }
    /* Music Page Styling Ends */
    
    /* Styling Event Pages */
    #content-event {
        position: absolute;
        top: 10%;
    }
    
    #tour-heading {
        color: #bcd630;
        font-family: Impact, sans-serif;
        font-size: 5vw;
        text-align: center;
        text-shadow: #5ea8aa 5px 5px;
        -webkit-text-stroke: #121212 2px;
        margin-top: 20px;
    }
    
    /* Styling Table for Tour Dates Starts */
    table {
        margin: auto;
        margin-top: 20px;
        text-align: center;
    }
    
    .location {
        color: #bcd630;
        font-family: Impact, sans-serif;
        font-size: 2dvw;
        padding: 10px;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }
    
    .venue {
        color: #5ea8aa;
        font-family: "Montserrat", sans-serif;
        font-style: italic;
        font-size: 1dvw;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }
    
    .date {
        color: #5ea8aa;
        font-family: Impact, sans-serif;
        font-size: 1.5dvw;
        padding: 10px;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }
    
    .time {
        color: #bcd630;
        font-family: "Montserrat", sans-serif;
        font-style: italic;
        font-size: 1dvw;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }
    /* Styling Table for Tour Dates Ends */
    
    /* Contact Page Link */
    #contact-link a{
        color: #5ea8aa;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 30%;
        margin: auto;
        text-align: center;
        margin-top: 20px;
    }
    
    #contact-link a:hover {
        background-color: #5ea8aa;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate-blue 0.7s;
        border: 1px solid #5ea8aa;
    }
    /* Styling for Events Page Ends */
    
    /* Styling Contact Page */
    #content-contact {
        position: absolute;
        top: 10%;
    }
    
    #contact-elements {
        width: 100dvw;
        margin-bottom: 20px;
    }
    
    /* Styling Contact Form */
    #contact-form {
        width: 50dvw;
    }
    
    form {
        justify-content: center;
    }
    
    form label {
        color: #5ea8aa;
        font-family: "Montserrat", sans-serif;
        display: block;
        width: 50%;
        margin-left: 45%;
        padding: 10px;
        font-size: 1dvw;
        margin-top: 20px;
    }
    
    form input[type="text"], input[type="email"], textarea {
        background-color: #121212;
        border: 1px solid #bdd63091;
        padding: 10px;
        width: 50%;
        color: #5ea8aa;
        font-family: "Montserrat", sans-serif;
        margin-left: 45%;
        font-size: 1dvw;
        padding: 20px;
    }
    
    ::placeholder {
        color: #5ea8aa;
    }
    
    form input[type="submit"] {
        background-color: #121212;
        color: #5ea8aa;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 50%;
        margin-left: 45%;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    form input[type="submit"]:hover {
        background-color: #5ea8aa;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate-blue 0.7s;
        border: 1px solid #5ea8aa;
    }
    /* Contact Form Styling Ends */
    
    /* Styling Map */
    #map {
        width: 50dvw;
        margin-bottom: 20px;
    }
    
    iframe {
       width: 50%;
       height: 100%;
    }
    /* Styling for Contact Page Ends */
}

@media screen and (max-width: 975px) and (min-width: 750px){
    nav {
        width: 80%;
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 20px;
        position: absolute;
        left: 10%;
        height: 10%;
    }
    
    
    .nav-items {
        color: #bcd630;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        text-align: center;
    }
    
    #nav-logo {
        width: 10%;
    }
    
    .nav-items:hover {
        background-color: #bcd630;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate 0.7s;
        border: 1px solid #bcd630;
    }
    
    @keyframes animate{
        0%{
            box-shadow: inset 0 -200px 0 0 #121212;
            color: #bcd630;
        }
        100%{
            box-shadow: inset 0 0 0 0 #121212;
        }
    }
    /* nav Styling Ends */
    
    /* Carousel Styling */
    #carousel {
        width: 100%;
        margin: auto;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        overflow: hidden;
        height: 80%;
    }
    
    #carousel-images {
        display: flex;
        width: 100%;
        animation: slide 20s infinite;
    }
    @keyframes slide{
        0%{
            transform: translate(0);
        }
        10%{
            transform: translate(0);
        }
        20%{
            transform: translate(-100%);
        }
        30%{
            transform: translate(-100%);
        }
        40%{
            transform: translate(-200%);
        }
        50%{
            transform: translate(-200%);
        }
        60%{
            transform: translate(-300%);
        }
        70%{
            transform: translate(-300%);
        }
        80%{
            transform: translate(-400%);
        }
        100%{
            transform: translate(-400%);
        }
    }
    
    #carousel img{
        width: 100%;
    }
    
    #band-name {
        color: white;
        position: absolute;
        width: 50%;
        margin-left: 50%;
        display: flex;
        justify-content: center;
        height: 80%;
        top: 10%;
        align-items: center;
    }
    
    #band-name p{
        font-family: Impact, sans-serif;
        font-size: 10vw;
        color: #bcd630; 
        text-shadow: 5px 5px #5ea8aa;
        -webkit-text-stroke: 2px #121212;
    }
    /* Carousel Styling Ends */
    
    /* Body Content Styling */
    #content-index {
        position: absolute;
        top: 90%;
    }
    
    /* Band About */
    #about-band {
        width: 40%;
        margin: auto;
        margin-top: 3%;
        border-top: 1px solid #bcd630;
        border-bottom: 1px solid #bcd630;
    }
    
    #about-band p{
        width: 85%;
        margin: auto;
        color: white;
        font-family: "Montserrat", sans-serif;
        font-weight: lighter;
        text-align: center;
        font-size: 1.2vw;
        line-height: 170%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    #about-logo-full {
        max-width: 20%;
        margin: auto;
        margin-top: 50px;
    }
    /* About Band Info Styling Ends */
    
    /* Band Genre Section Styling */
    #band-description {
        margin-top: 50px;
    }
    
    .row {
        width: 100%;
        display: flex;
        margin: auto;
    }
    
    .col-60{
        width: 60%;
        height: 40dvh;
    }
    
    .col-40 {
        width: 40%;
        height: 40dvh;
    }
    
    .col-40 img, .col-60 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    #yellow {
        color: #bcd630;
        font-family: Impact, sans-serif;
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        font-size: 7.2dvw;
        text-shadow: 5px 5px #5ea8aa;
        -webkit-text-stroke: 2px #121212;
        animation: bounce;
        -webkit-animation: bounce 1s ease infinite alternate;
    }
    
    @keyframes bounce {
        100%{
            transform: translateY(-20px);
        }
    }
    
    #blue {
        color: #5ea8aa;
        font-family: Impact, sans-serif;
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        font-size: 7.2dvw;
        text-shadow: 5px 5px #bcd630;
        -webkit-text-stroke: 2px #121212;
        animation: bounce;
        -webkit-animation: bounce 1s ease infinite alternate;
    }
    
    .col-text-yellow {
        border: 5px solid #bcd630;
    }
    
    .col-text-blue {
        border: 5px solid #5ea8aa;
    }
    /* Band Genre Styling Ends */
    
    /* Styling Footer */
    footer {
        margin-top: 20px;
    }
    
    #icons {
        margin: auto;
        display: flex;
        width: 100%;
        justify-content: center;
    }
    
    #icons img{
        width: 40px;
        padding-left: 5px;
        padding-right: 5px;
    }
    
    #copyright {
        padding: 20px;
        display: flex;
        justify-content: center;
        color: white;
        font-family: "League Spartan", sans-serif;
    }
    /* Footer Ends */
    
    /* Styling About Page */
    #content-about {
        position: absolute;
        top: 10%;
    }
    
    /* Styling Bbanner */
    #banner {
        width: 100dvw;
        height: 60dvh;
    }
    
    #banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    /* Banner Styling Ends */
    
    /* Band History */
    #band-history-about {
        width: 50%;
        margin: auto;
        margin-top: 50px;
        border-top: 1px solid #bcd630;
        border-bottom: 1px solid #bcd630;
    }
    
    #band-history-about p {
        width: 85%;
        margin: auto;
        color: white;
        text-align: center;
        padding: 10px;
        font-size: 1vw;
        font-family: "Montserrat", sans-serif;
        font-weight: lighter;
        line-height: 170%;
    }
    /* Band Hisory Styling Ends */
    
    /* Styling Section for Artist Bio's */
    .col-50 {
        width: 100%;
        height: 60dvh;
        display: flex;
        align-items: center;
    }
    
    .col-50 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #artists-bio-about {
        margin-top: 50px;
    }
    
    
    .name {
        color: #bcd630;
        font-family: Impact, sans-serif;
        font-size: 5vw;
        text-align: center;
        text-shadow: #5ea8aa 5px 5px;
        -webkit-text-stroke: #121212 2px;
    }
    
    .band-position {
        color: #5ea8aa;
        font-family: 'League Spartan', sans-serif;
        font-style: italic;
        font-size: 1vw;
        text-align: center;
    }
    
    .bio {
        color: white;
        font-family: "Montserrat", sans-serif;
        width: 60%;
        text-align: center;
        margin: auto;
        line-height: 150%;
        padding: 10px;
    }
    
    .artist-personal-ig {
        color: #bcd630;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 30%;
        margin: auto;
        text-align: center;
    }
    
    .artist-personal-ig:hover {
        background-color: #bcd630;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate 0.7s;
        border: 1px solid #bcd630;
    }
    
    hr {
        margin: auto;
        border: 1px solid #bcd630;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    /* Styling for Bio's Section Ends */
    
    /* Band Album Release Link Styling */
    #band-album-about {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    
    #band-album-about a {
        color: #5ea8aa;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 30%;
        margin: auto;
        text-align: center;
    }
    
    #band-album-about a:hover {
        background-color: #5ea8aa;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate-blue 0.7s;
        border: 1px solid #5ea8aa;
    }
    
    @keyframes animate-blue{
        0%{
            box-shadow: inset 0 -200px 0 0 #121212;
            color: #5ea8aa;
        }
        100%{
            box-shadow: inset 0 0 0 0 #121212;
        }
    }
    /* Band Album Release Link Styling Ends */
    /* About Page Styling Ends */
    
    /* Styling Music Page */
    #content-music {
        position: absolute;
        top: 10%;
    }
    
    /* Styling Album Logo */
    #album {
        display: flex;
        justify-content: center;
        padding: 20px;
    }
    
    #album img{
        max-height: 30dvh;
    }
    
    #album img:hover {
        scale: 1.05;
    }
    
    /* Album Description Styling Starts */
    #album-description {
        width: 60%;
        margin: auto;
        border-top: 1px solid #bcd630;
        border-bottom: 1px solid #bcd630;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    #album-description p {
        color: white;
        font-family: "Montserrat", sans-serif;
        font-weight: lighter;
        text-align: center;
        line-height: 150%;
        padding: 10px;
        width: 80%;
        margin: auto;
    }
    /* Album Description Styling Ends */
    
    /* Adding Vinyl Designs */
    #vinyl {
        width: 100dvw;
        display: flex;
        justify-content: center;
        gap: 50px;
    }
    
    #vinyl img {
        max-height: 50dvh;
        animation: rotate 20s infinite linear running;
        animation-fill-mode: forwards;
    }
    
    #vinyl img:hover {
        animation-play-state: paused;
    }
    
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Styling Song Section */
    .left-col {
        width: 50%;
        display: flex;
        justify-content: end;
        gap: 5%;
        margin-top: 50px;
        margin-bottom: 50px;
        margin-right: 1.25%;
        margin-left: 1.25%;
        padding-bottom: 50px;
    }
    
    .right-col {
        width: 50%;
        display: flex;
        justify-content: start;
        gap: 5%;
        margin-top: 50px;
        margin-bottom: 50px;
        margin-left: 1.25%;
        margin-right: 1.25%;
        padding-bottom: 50px;
    }
    
    .song {
        width: 40%;
        height: 40dvh;
        border-radius: 20px 20px 0px 0px ;
        box-shadow: 0px 0px 5px #5ea8aa;
    }
    
    .song-image {
        width: 100%;
        height: 100%;
        border-radius: 20px 20px 0px 0px;
        border: 2px solid #bcd630;
    }
    
    .song-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px 20px 0px 0px;
    }
    
    /* Adding Audio Elements */
    audio {
        width: 100%;
        height: 50px;
    }
    
    audio::-webkit-media-controls-enclosure {
        border-radius: 0px 0px 20px 20px;
        background-color: #bcd630;
    }
    
    .left-col p, .right-col p{
        color: white;
        text-align: center;
        font-family: "League Spartan", sans-serif;
        padding: 10px;
    }
    /* Styling for Songs Section Ends */
    
    /* Styling Link to Spotify */
    #full-album a{
        color: #5ea8aa;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 30%;
        margin: auto;
        text-align: center;
    }
    
    #full-album a:hover {
        background-color: #5ea8aa;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate-blue 0.7s;
        border: 1px solid #5ea8aa;
    }
    /* Music Page Styling Ends */
    
    /* Styling Event Pages */
    #content-event {
        position: absolute;
        top: 10%;
    }
    
    #tour-heading {
        color: #bcd630;
        font-family: Impact, sans-serif;
        font-size: 6vw;
        text-align: center;
        text-shadow: #5ea8aa 5px 5px;
        -webkit-text-stroke: #121212 2px;
        margin-top: 20px;
    }
    
    /* Styling Table for Tour Dates Starts */
    table {
        margin: auto;
        margin-top: 20px;
        text-align: center;
    }
    
    .location {
        color: #bcd630;
        font-family: Impact, sans-serif;
        font-size: 3dvw;
        padding: 10px;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }
    
    .venue {
        color: #5ea8aa;
        font-family: "Montserrat", sans-serif;
        font-style: italic;
        font-size: 1.5dvw;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }
    
    .date {
        color: #5ea8aa;
        font-family: Impact, sans-serif;
        font-size: 2.5dvw;
        padding: 10px;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }
    
    .time {
        color: #bcd630;
        font-family: "Montserrat", sans-serif;
        font-style: italic;
        font-size: 1.5dvw;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }
    /* Styling Table for Tour Dates Ends */
    
    /* Contact Page Link */
    #contact-link a{
        color: #5ea8aa;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 30%;
        margin: auto;
        text-align: center;
        margin-top: 20px;
    }
    
    #contact-link a:hover {
        background-color: #5ea8aa;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate-blue 0.7s;
        border: 1px solid #5ea8aa;
    }
    /* Styling for Events Page Ends */
    
    /* Styling Contact Page */
    #content-contact {
        position: absolute;
        top: 10%;
    }
    
    #contact-elements {
        width: 100dvw;
        margin-bottom: 20px;
    }
    
    /* Styling Contact Form */
    #contact-form {
        width: 50dvw;
    }
    
    form {
        justify-content: center;
    }
    
    form label {
        color: #5ea8aa;
        font-family: "Montserrat", sans-serif;
        display: block;
        width: 60%;
        margin-left: 35%;
        padding: 10px;
        font-size: 1.5dvw;
        margin-top: 20px;
    }
    
    form input[type="text"], input[type="email"], textarea {
        background-color: #121212;
        border: 1px solid #bdd63091;
        padding: 10px;
        width: 60%;
        color: #5ea8aa;
        font-family: "Montserrat", sans-serif;
        margin-left: 35%;
        font-size: 1.5dvw;
        padding: 20px;
    }
    
    ::placeholder {
        color: #5ea8aa;
    }
    
    form input[type="submit"] {
        background-color: #121212;
        color: #5ea8aa;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 60%;
        margin-left: 35%;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    form input[type="submit"]:hover {
        background-color: #5ea8aa;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate-blue 0.7s;
        border: 1px solid #5ea8aa;
    }
    /* Contact Form Styling Ends */
    
    /* Styling Map */
    #map {
        width: 50dvw;
        margin-bottom: 20px;
    }
    
    iframe {
       width: 70%;
       height: 100%;
    }
    /* Styling for Contact Page Ends */
}

@media screen and (max-width: 750px){
    nav {
        width: 100%;
        margin: auto;
        display: block;
        align-items: center;
        padding: 20px;
    }
    
    
    .nav-items {
        color: #bcd630;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        text-align: center;
        display: block;
    }

    #nav-logo {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    #nav-logo img{
        max-width: 20%;
    }
    
    .nav-items:hover {
        background-color: #bcd630;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate 0.7s;
        border: 1px solid #bcd630;
    }
    
    @keyframes animate{
        0%{
            box-shadow: inset 0 -200px 0 0 #121212;
            color: #bcd630;
        }
        100%{
            box-shadow: inset 0 0 0 0 #121212;
        }
    }
    /* nav Styling Ends */
    
    /* Carousel Styling */
    #carousel {
        width: 100%;
        margin: auto;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 90%;
        left: 50%;
        overflow: hidden;
        height: 80%;
    }
    
    #carousel-images {
        display: flex;
        width: 100%;
        animation: slide 20s infinite;
    }
    @keyframes slide{
        0%{
            transform: translate(0);
        }
        10%{
            transform: translate(0);
        }
        20%{
            transform: translate(-100%);
        }
        30%{
            transform: translate(-100%);
        }
        40%{
            transform: translate(-200%);
        }
        50%{
            transform: translate(-200%);
        }
        60%{
            transform: translate(-300%);
        }
        70%{
            transform: translate(-300%);
        }
        80%{
            transform: translate(-400%);
        }
        100%{
            transform: translate(-400%);
        }
    }
    
    #carousel img{
        width: 100%;
    }
    
    #band-name {
        color: white;
        position: absolute;
        width: 50%;
        margin-left: 25%;
        display: flex;
        justify-content: center;
        height: 80%;
        top: 40%;
        align-items: center;
    }
    
    #band-name p{
        font-family: Impact, sans-serif;
        font-size: 10vw;
        color: #bcd630; 
        text-shadow: 5px 5px #5ea8aa;
        -webkit-text-stroke: 2px #121212;
    }
    /* Carousel Styling Ends */
    
    /* Body Content Styling */
    #content-index {
        position: absolute;
        top: 120%;
    }
    
    /* Band About */
    #about-band {
        width: 80%;
        margin: auto;
        margin-top: 3%;
        border-top: 1px solid #bcd630;
        border-bottom: 1px solid #bcd630;
    }
    
    #about-band p{
        width: 85%;
        margin: auto;
        color: white;
        font-family: "Montserrat", sans-serif;
        font-weight: lighter;
        text-align: center;
        font-size:2vw;
        line-height: 170%;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    #about-logo-full {
        max-width: 40%;
        margin: auto;
        margin-top: 50px;
    }
    /* About Band Info Styling Ends */
    
    /* Band Genre Section Styling */
    #band-description {
        margin-top: 50px;
    }
    
    .row {
        width: 100%;
        margin: auto;
        margin-top: 10px;
    }
    
    .col-60{
        width: 100%;
        height: 40dvh;
    }
    
    .col-40 {
        width: 100%;
        height: 40dvh;
    }
    
    .col-40 img, .col-60 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    #yellow {
        color: #bcd630;
        font-family: Impact, sans-serif;
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        font-size: 7.2dvw;
        text-shadow: 5px 5px #5ea8aa;
        -webkit-text-stroke: 2px #121212;
        animation: bounce;
        -webkit-animation: bounce 1s ease infinite alternate;
    }
    
    @keyframes bounce {
        100%{
            transform: translateY(-20px);
        }
    }
    
    #blue {
        color: #5ea8aa;
        font-family: Impact, sans-serif;
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
        font-size: 7.2dvw;
        text-shadow: 5px 5px #bcd630;
        -webkit-text-stroke: 2px #121212;
        animation: bounce;
        -webkit-animation: bounce 1s ease infinite alternate;
    }
    
    .col-text-yellow {
        border: 5px solid #bcd630;
    }
    
    .col-text-blue {
        border: 5px solid #5ea8aa;
    }
    /* Band Genre Styling Ends */
    
    /* Styling Footer */
    footer {
        margin-top: 20px;
    }
    
    #icons {
        margin: auto;
        display: flex;
        width: 100%;
        justify-content: center;
    }
    
    #icons img{
        width: 40px;
        padding-left: 5px;
        padding-right: 5px;
    }
    
    #copyright {
        padding: 20px;
        display: flex;
        justify-content: center;
        color: white;
        font-family: "League Spartan", sans-serif;
    }
    /* Footer Ends */
    
    /* Styling About Page */
    #content-about {
        position: absolute;
        top: 50%;
    }
    
    /* Styling Bbanner */
    #banner {
        width: 100dvw;
        height: 60dvh;
    }
    
    #banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    /* Banner Styling Ends */
    
    /* Band History */
    #band-history-about {
        width: 80%;
        margin: auto;
        margin-top: 50px;
        border-top: 1px solid #bcd630;
        border-bottom: 1px solid #bcd630;
    }
    
    #band-history-about p {
        width: 85%;
        margin: auto;
        color: white;
        text-align: center;
        padding: 10px;
        font-size: 2vw;
        font-family: "Montserrat", sans-serif;
        font-weight: lighter;
        line-height: 170%;
    }
    /* Band Hisory Styling Ends */
    
    /* Styling Section for Artist Bio's */
    .col-50 {
        width: 100%;
        height: 60dvh;
        display: flex;
        align-items: center;
    }
    
    .col-50 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #artists-bio-about {
        margin-top: 50px;
    }
    
    
    .name {
        color: #bcd630;
        font-family: Impact, sans-serif;
        font-size: 5vw;
        text-align: center;
        text-shadow: #5ea8aa 5px 5px;
        -webkit-text-stroke: #121212 2px;
    }
    
    .band-position {
        color: #5ea8aa;
        font-family: 'League Spartan', sans-serif;
        font-style: italic;
        font-size: 1vw;
        text-align: center;
    }
    
    .bio {
        color: white;
        font-family: "Montserrat", sans-serif;
        width: 60%;
        text-align: center;
        margin: auto;
        line-height: 150%;
        padding: 10px;
    }
    
    .artist-personal-ig {
        color: #bcd630;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 30%;
        margin: auto;
        text-align: center;
    }
    
    .artist-personal-ig:hover {
        background-color: #bcd630;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate 0.7s;
        border: 1px solid #bcd630;
    }
    
    hr {
        margin: auto;
        border: 1px solid #bcd630;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    /* Styling for Bio's Section Ends */
    
    /* Band Album Release Link Styling */
    #band-album-about {
        margin-top: 50px;
        margin-bottom: 50px;
    }
    
    #band-album-about a {
        color: #5ea8aa;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 30%;
        margin: auto;
        text-align: center;
    }
    
    #band-album-about a:hover {
        background-color: #5ea8aa;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate-blue 0.7s;
        border: 1px solid #5ea8aa;
    }
    
    @keyframes animate-blue{
        0%{
            box-shadow: inset 0 -200px 0 0 #121212;
            color: #5ea8aa;
        }
        100%{
            box-shadow: inset 0 0 0 0 #121212;
        }
    }
    /* Band Album Release Link Styling Ends */
    /* About Page Styling Ends */
    
    /* Styling Music Page */
    #content-music {
        position: absolute;
        top: 50%;
    }
    
    /* Styling Album Logo */
    #album {
        display: flex;
        justify-content: center;
        padding: 20px;
    }
    
    #album img{
        max-height: 30dvh;
    }
    
    #album img:hover {
        scale: 1.05;
    }
    
    /* Album Description Styling Starts */
    #album-description {
        width: 80%;
        margin: auto;
        border-top: 1px solid #bcd630;
        border-bottom: 1px solid #bcd630;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    #album-description p {
        color: white;
        font-family: "Montserrat", sans-serif;
        font-weight: lighter;
        text-align: center;
        line-height: 150%;
        padding: 10px;
        width: 80%;
        margin: auto;
    }
    /* Album Description Styling Ends */
    
    /* Adding Vinyl Designs */
    #vinyl {
        width: 100dvw;
        display: flex;
        justify-content: center;
        gap: 50px;
    }
    
    #vinyl img {
        max-height: 50dvh;
        animation: rotate 20s infinite linear running;
        animation-fill-mode: forwards;
    }
    
    #vinyl img:hover {
        animation-play-state: paused;
    }
    
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    /* Styling Song Section */
    .left-col {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 5%;
        margin-top: 50px;
        margin-bottom: 50px;
        padding-bottom: 50px;
    }
    
    .right-col {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 5%;
        margin-top: 50px;
        margin-bottom: 50px;
        padding-bottom: 50px;
    }
    
    .song {
        width: 40%;
        height: 40dvh;
        border-radius: 20px 20px 0px 0px ;
        box-shadow: 0px 0px 5px #5ea8aa;
    }
    
    .song-image {
        width: 100%;
        height: 100%;
        border-radius: 20px 20px 0px 0px;
        border: 2px solid #bcd630;
    }
    
    .song-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px 20px 0px 0px;
    }
    
    /* Adding Audio Elements */
    audio {
        width: 100%;
        height: 50px;
    }
    
    audio::-webkit-media-controls-enclosure {
        border-radius: 0px 0px 20px 20px;
        background-color: #bcd630;
    }
    
    .left-col p, .right-col p{
        color: white;
        text-align: center;
        font-family: "League Spartan", sans-serif;
        padding: 10px;
    }
    /* Styling for Songs Section Ends */
    
    /* Styling Link to Spotify */
    #full-album a{
        color: #5ea8aa;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 30%;
        margin: auto;
        text-align: center;
    }
    
    #full-album a:hover {
        background-color: #5ea8aa;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate-blue 0.7s;
        border: 1px solid #5ea8aa;
    }
    /* Music Page Styling Ends */
    
    /* Styling Event Pages */
    #content-event {
        position: absolute;
        top: 50%;
    }
    
    #tour-heading {
        color: #bcd630;
        font-family: Impact, sans-serif;
        font-size: 7vw;
        text-align: center;
        text-shadow: #5ea8aa 5px 5px;
        -webkit-text-stroke: #121212 2px;
        margin-top: 20px;
    }
    
    /* Styling Table for Tour Dates Starts */
    table {
        margin: auto;
        margin-top: 20px;
        text-align: center;
    }
    
    .location {
        color: #bcd630;
        font-family: Impact, sans-serif;
        font-size: 4dvw;
        padding: 10px;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }
    
    .venue {
        color: #5ea8aa;
        font-family: "Montserrat", sans-serif;
        font-style: italic;
        font-size: 2dvw;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }
    
    .date {
        color: #5ea8aa;
        font-family: Impact, sans-serif;
        font-size: 3.5dvw;
        padding: 10px;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }
    
    .time {
        color: #bcd630;
        font-family: "Montserrat", sans-serif;
        font-style: italic;
        font-size: 2dvw;
        margin-left: 5dvw;
        margin-right: 5dvw;
    }
    /* Styling Table for Tour Dates Ends */
    
    /* Contact Page Link */
    #contact-link a{
        color: #5ea8aa;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 30%;
        margin: auto;
        text-align: center;
        margin-top: 20px;
    }
    
    #contact-link a:hover {
        background-color: #5ea8aa;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate-blue 0.7s;
        border: 1px solid #5ea8aa;
    }
    /* Styling for Events Page Ends */
    
    /* Styling Contact Page */
    #content-contact {
        position: absolute;
        top: 50%;
    }
    
    #contact-elements {
        width: 100dvw;
        margin-bottom: 20px;
    }
    
    /* Styling Contact Form */
    #contact-form {
        width: 100dvw;
    }
    
    form {
        justify-content: center;
    }
    
    form label {
        color: #5ea8aa;
        font-family: "Montserrat", sans-serif;
        display: block;
        width: 90%;
        margin-left: 5%;
        padding: 10px;
        font-size: 2.5dvw;
        margin-top: 20px;
    }
    
    form input[type="text"], input[type="email"], textarea {
        background-color: #121212;
        border: 1px solid #bdd63091;
        padding: 10px;
        width: 90%;
        color: #5ea8aa;
        font-family: "Montserrat", sans-serif;
        margin-left: 5%;
        font-size: 2.5dvw;
        padding: 20px;
    }
    
    ::placeholder {
        color: #5ea8aa;
    }
    
    form input[type="submit"] {
        background-color: #121212;
        color: #5ea8aa;
        font-family: "League Spartan", sans-serif;
        font-size: 150%;
        text-decoration: none;
        padding: 2%;
        transition: ease-in-out 0.5s;
        border: 1px solid #121212;
        display: block;
        width: 90%;
        margin-left: 5%;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    form input[type="submit"]:hover {
        background-color: #5ea8aa;
        color: #121212;
        padding: 2%;
        box-shadow: inset 0 100% 0 0 #121212;
        animation: animate-blue 0.7s;
        border: 1px solid #5ea8aa;
    }
    /* Contact Form Styling Ends */
    
    /* Styling Map */
    #map {
        width: 100dvw;
        margin-bottom: 20px;
    }
    
    iframe {
       width: 100%;
       height: 100%;
    }
    /* Styling for Contact Page Ends */
}