@font-face {
    font-family: Gilroy-Light;
    src: url('../gilroy/Gilroy-Light.ttf');
}

@font-face {
    font-family: Gilroy-Bold;
    src: url('../gilroy/Gilroy-Bold.ttf');
}

@font-face {
    font-family: Gilroy-Medium;
    src: url('../gilroy/Gilroy-Medium.ttf');
}

:root {
    --color-white: #fff;
    --color-white-02: hsla(0, 0%, 100%, 0.2);
    --color-white-04: hsla(0, 0%, 100%, 0.4);
    --color-white-06: hsla(0, 0%, 100%, 0.6);
    --color-white-08: hsla(0, 0%, 100%, 0.8);
    --color-off-white: #f8f8f8;
    --color-off-white-02: hsla(0, 0%, 97.3%, 0.2);
    --color-off-white-04: hsla(0, 0%, 97.3%, 0.4);
    --color-off-white-06: hsla(0, 0%, 97.3%, 0.6);
    --color-off-white-08: hsla(0, 0%, 97.3%, 0.8);
    --color-story: #070707;
    --color-dark-grey: #0d0e13;
    --color-dark-grey-02: rgba(13, 14, 19, 0.2);
    --color-dark-grey-04: rgba(13, 14, 19, 0.4);
    --color-dark-grey-06: rgba(13, 14, 19, 0.6);
    --color-dark-grey-08: rgba(13, 14, 19, 0.8);
    --color-light-grey: #e4e0db;
    --color-light-grey-02: rgba(228, 224, 219, 0.2);
    --color-light-grey-06: rgba(228, 224, 219, 0.6);
    --color-light-grey-08: rgba(228, 224, 219, 0.8);
    --color-sand: #e0ccbb;
    --color-sand-06: rgba(224, 204, 187, 0.6);
    --color-sand-08: rgba(224, 204, 187, 0.8);
    --font-f-Bold: Gilroy-Bold;
    --font-f-Medium: Gilroy-Medium;
    --font-f-Light: Gilroy-Light;
    --font-s-h0: 25.6vw;
    --font-lh-h0: 25.6vw;
    --font-ls-h0: -1.2vw;
    --font-s-h1: 16vw;
    --font-lh-h1: 16vw;
    --font-ls-h1: -.4vw;
    --font-s-h2: 7.73333vw;
    --font-lh-h2: 9.06667vw;
    --font-ls-h2: -.26667vw;
    --font-s-h3: 6.4vw;
    --font-lh-h3: 8vw;
    --font-ls-h3: -.13333vw;
    --font-s-h4: 4.8vw;
    --font-lh-h4: 6.4vw;
    --font-ls-h4: 0vw;
    --font-s-p: 3.73333vw;
    --font-lh-p: 5.6vw;
    --font-ls-p: .02667vw;
    --font-s-p-small: 3.73333vw;
    --font-lh-p-small: 5.6vw;
    --font-ls-p-small: .02667vw;
    --font-s-subtitle: 3.2vw;
    --font-lh-subtitle: 4.26667vw;
    --font-ls-subtitle: .02667vw;
    --font-s-cta: 4.26667vw;
    --font-lh-cta: 4.26667vw;
    --font-ls-cta: 0vw;
    --font-s-label: 3.73333vw;
    --font-lh-label: 3.73333vw;
    --font-ls-label: 0vw;
    --mob-line-height: 7.5vw;
    --main-dark-color: #121212;
}


@media (min-width: 601px) {
    :root {
        --font-s-h0: 17.36111vw;
        --font-lh-h0: 15.69444vw;
        --font-ls-h0: -.79861vw;
        --font-s-h1: 10vw;
        --font-lh-h1: 10vw;
        --font-ls-h1: -.34722vw;
        --font-s-h2: 3.61111vw;
        --font-lh-h2: 4.44444vw;
        --font-ls-h2: -.10417vw;
        --font-s-h3: 2.22222vw;
        --font-lh-h3: 2.77778vw;
        --font-ls-h3: -.00694vw;
        --font-s-h4: 1.66667vw;
        --font-lh-h4: 2.22222vw;
        --font-ls-h4: 0vw;
        --font-s-p: 1.11111vw;
        --font-lh-p: 1.66667vw;
        --font-ls-p: .00694vw;
        --font-s-subtitle: .83333vw;
        --font-lh-subtitle: 1.11111vw;
        --font-ls-subtitle: .00694vw;
        --font-s-p-small: .97222vw;
        --font-lh-p-small: 1.45833vw;
        --font-ls-p-small: .00694vw;
        --font-s-cta: 1.11111vw;
        --font-lh-cta: 1.11111vw;
        --font-ls-cta: 0vw;
        --font-s-label: .97222vw;
        --font-lh-label: .97222vw;
        --font-ls-label: 0vw;
        --main-tex-color: #a49981;
    }
}

/* @media (max-width: 782px) {
    :root {
        --font-s-h0: 7vw;
        --font-lh-h0: 6.5vw;
        --font-ls-h0: -0.5vw;
        --font-s-h1: 4.5vw;
        --font-lh-h1: 4.5vw;
        --font-ls-h1: -0.2vw;
        --font-s-h2: 2.8vw;
        --font-lh-h2: 3vw;
        --font-ls-h2: -0.1vw;
        --font-s-h3: 1.8vw;
        --font-lh-h3: 2.2vw;
        --font-ls-h3: -0.05vw;
        --font-s-h4: 1.2vw;
        --font-lh-h4: 1.8vw;
        --font-ls-h4: 0vw;
        --font-s-p: 0.8vw;
        --font-lh-p: 1.2vw;
        --font-ls-p: 0.05vw;
        --font-s-subtitle: 0.7vw;
        --font-lh-subtitle: 0.9vw;
        --font-ls-subtitle: 0.05vw;
        --font-s-p-small: 0.7vw;
        --font-lh-p-small: 1vw;
        --font-ls-p-small: 0.05vw;
        --font-s-cta: 0.8vw;
        --font-lh-cta: 0.8vw;
        --font-ls-cta: 0vw;
        --font-s-label: 0.7vw;
        --font-lh-label: 0.7vw;
        --font-ls-label: 0vw;
    }
} */

*,
:after,
:before {
    box-sizing: border-box
}



ol,
ul {
    padding: 0;
    list-style: none
}

blockquote,
body,
dd,
dl,
figcaption,
figure,
h1,
h2,
h3,
h4,
input,
li,
ol,
p,
ul {
    margin: 0
}


html {

    margin: 0;
    padding: 0;
    overflow-x: auto;

}

body {
    margin: 0;
    background-color: #0D0D0D;
    margin: 0;
    padding: 0;

}

body::-webkit-scrollbar {
    width: 0;
    height: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
}

button {
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-style: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    vertical-align: baseline;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

a,
button {
    color: inherit
}

a {
    text-decoration: none
}

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

img,
svg {
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

img {
    pointer-events: none
}

button,
input,
select,
textarea {
    font: inherit;
    border-radius: 0;
    box-shadow: none;

    outline: 0;
    border: 0
}

/*button,*/
/*input,*/
/*select,*/
/*textarea {*/
/*    -webkit-appearance: none;*/
/*    background: 0 0*/
/*}*/

select {
    border: none
}

footer,
section {
    position: relative
}


body {
    color: #0d0e13;
    color: var(--color-dark-grey);
    background: #fff;
    background: var(--color-white)
}

img,
video {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover
}

section {
    margin-top: -1px
}

@media (min-width: 601px) {

    footer,
    header,
    section {
        will-change: transform
    }
}

picture {
    width: 100%;
    height: 100%;
    display: block
}

button {
    cursor: pointer
}

.app {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden
}

.page {
    bottom: 0
}

.overlay,
.page {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1
}

.overlay {
    height: 150vh;
    background: #0d0e13;
    background: var(--color-dark-grey);
    pointer-events: none;
    opacity: .2;
    transform: translateZ(0)
}

@media (max-width: 767px) {
    
    .overlay {
  
    opacity: .3;
   
}
}


.scroll {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.is-touch .scroll {
    overflow: hidden;
    overflow-y: scroll
}

.is-loading .scroll {
    overflow: hidden
}

.is-current {
    pointer-events: none
}

.has-padding-top {
    padding-top: 21.33333vw
}


.has-border {
    background: #0d0e13;
    background: var(--color-dark-grey);
    border: .8vw solid #0d0e13;
    border: .8vw solid var(--color-dark-grey)
}

h1 {
    font-size: var(--font-lh-h1);
    font-family: var(--font-f-Bold);
    line-height: 9vw;
    text-align: center;
}

@media (max-width: 767px) {
    h1 {
        font-size: 12vw;
        line-height: 9vw;

    }

    .sub-title h2 {
        text-align: center;
        font-family: var(--font-f-Light);
        font-size: var(--font-s-h4);
    }

    .logo strong {
        font-size: 9vw !important;
    }
}

.main {
    height: auto;
}

.main-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    border-bottom: 1px solid rgba(183, 173, 157, 0.1);
    transition: 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.main-title h1 {
    font-family: var(--font-f-Light);
    line-height: 2vw;

    margin: 0 8.8vw;
}



.social {
    position: absolute;
    margin-left: 4vw;
}

.social a {
    filter: grayscale(1);
}

.logo {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    mix-blend-mode: difference;
    justify-content: space-between;
    align-items: flex-start;
    color: white;
    width: 100%;
    font-family: var(--font-f-Bold);
    padding: 3vw 8.8vw;

    z-index: 999;

}

.enter-title {
    margin-bottom: 2vw;
}





.enter-title h2 {
    font-family: var(--font-f-Bold) !important;
}


@media (max-width: 767px) {
    .header-title {
        display: flex;

        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .header-title h1 {
        color: #fff;
    }


}



.enter-page {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    gap: 1vw;
    background-color: #fff;
    z-index: 9999;
}


.enter-page h2 {
    text-align: center;
    font-family: var(--font-f-Light);
}

.enter-page-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    cursor: pointer;
}

.sub-title {
    margin: 0 8.8vw;
}

.load {
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: .2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.logo strong {
    font-size: 3vw;
}

.f-l {
    position: absolute;
    margin-left: -1.3vw;
    transform: rotateY(180deg);
}

@media (max-width: 767px) {
    .f-l {

        margin-left: -4.6vw;

    }

    .destop {
        display: none;
    }

    .mob {
        display: block;
    }


    .video-button {

        bottom: 13vw;

    }

    li.destop {
        display: none;
    }

    #play-video {

        width: 5em !important;
        height: 5em !important;
    }

    .social-media ul li {
        position: absolute;
        bottom: 7vw;
    }
}

.destop {
    display: block;
}

.mob {
    display: none;
}

.social-media {
    position: absolute;
    display: flex;
    /* width: 50%; */
    /* justify-content: space-between; */
    /* align-items: center; */
    /* padding: 0 8.8vw; */
    bottom: 7vw;
    left: 8.8vw;
    z-index: 2;

}

.video-button {
    position: absolute;
    bottom: 9vw;
    right: 8.8vw;
    z-index: 2;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#play-video {
    animation: rotate 40s linear infinite;
    /* Adjust duration for desired speed */
}

#play-video {
    cursor: pointer;
    width: 8vw;
    height: 8vw;
}

.video-button:after {
    position: absolute;
    border-color: transparent transparent transparent var(--main-dark-color);
    border-style: solid;
    border-width: .5625rem 0 .5625rem .875rem;
    content: "";
    height: 0;
    left: 50%;
    pointer-events: none;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 0;
}

.header-items {

    z-index: 1;
}

.social-media ul li {
    font-size: 1.5rem;
    padding: 1vw 0;
    color: var(--main-dark-color);
    cursor: pointer;
}

.social-media ul li:hover {
    transform: scale(1.1);
    opacity: .7;
}



.hamburger ul li {
    text-align: right;
}

.t-2 {
    position: relative;
    justify-content: space-between;

}

.sec {
    position: absolute;
    left: 8.8vw;
}

.main-img {
    position: absolute;
    left: 10vw;
    width: 10vw;
    height: 10vw;
    overflow: hidden;
    border-radius: 50%;
}


@media (max-width: 767px) {
    .main-img-mob {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: auto;
        left: auto;
        width: 85vw;
        height: 85vw;
        z-index: -1;
        opacity: 1;
    }

    .sub-title {
        position: absolute;
        bottom: 16%;
    }



    .hamburger ul li {
        padding: 1.2vw 0;
    }
}

.video-background {
    position: fixed;
    top: -100%;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    transition: .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    z-index: 999;
}

.btn-close {
    margin-bottom: 5vw;
    font-family: var(--font-f-Bold);
    cursor: pointer;
}

.active {
    top: 0;
}

.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10vw;
    height: 10vw;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-dark-grey);
    transition: .2s cubic-bezier(0.215, 0.610, 0.355, 1);

}

@media (max-width: 767px) {
    .circle {
        width: 25vw;
        height: 25vw;
    }
}


.t-1,
.t-2,
.t-3 {
    display: inline-block;
    opacity: 1;
    /* Hide initially */
}

.circle:hover .fa-play {
    transform: scale(1.3);

}

.neck-git-connection {
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
    background-color: #070707;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
}

.inner {
    position: absolute;
}

.sub-title {
    margin-top: 5vw;
}

.sub-title h2 {
    text-align: center;
    font-family: var(--font-f-Light);
}

.guitar {
    position: absolute;
    display: flex;
}

.string {
    width: 1px;
    height: 100vh;
    margin: 2.8vw;
    background-color: #e4e0db;
    cursor: pointer;
}

.string:hover {
    background-color: #c4c1bd;
    opacity: .3;
    width: 2px;
}

.shake {
    animation: shake 0.1s;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

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

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}


/* ///////////////////////////////////////ABOUT ME SECTION////////////////////////////////////////////////////// */


.about-me {
    background-color: var(--main-dark-color);
    padding-bottom: 25vw;
}

.devider-section {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 15%;
    overflow: hidden;
    background: #fff;
}

.info-section {
    padding-top: 30vw;
}

.devider-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 160%;
    height: 520%;
    background: var(--main-dark-color);
    border-radius: 100%;

}

.about-me-text {
    margin: 0 8.8vw;
}

.about-me-text h3 {
    font-family: var(--font-f-Bold);
    margin-bottom: 3vw;
    color: #fff;
}

.about-me-text h2 {
    font-family: var(--font-f-Light);
    color: var( --color-off-white-06);
}

/* #show-more-btn {
    height: 10vw;
    width: 10vw;
    border: 1px solid rgba(18, 18, 18, 0.2);

    border-radius: 50%;
}

#show-more-btn:hover {
    border: 1px solid rgba(18, 18, 18, 1);
} */

.show-more-cont {
    margin-top: 10vw;
    font-family: var(--font-f-Bold);
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    padding-top: 10vw;
    justify-content: center;
}

.circle-section {
    height: 20vw;
    width: 20vw;
    background-color: #fff;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    align-items: center;

    cursor: pointer;
}

.rotateAnimation {
    animation: rotateInfinitely 35s linear infinite;
}





@media (max-width: 767px) {
    .circle-section {
        height: 55vw;
        width: 55vw;

    }
}

@keyframes rotateInfinitely {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}




.circle-section h3 {
    font-family: var(--font-f-Bold);
    color: var(--main-dark-color);
    text-align: center;
}

.album-cover-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 10vw;
    align-items: center;
}

.about-album h2 {

    font-family: var(--font-f-Light);
    color: var( --color-off-white-06);
}

.song-info-cont {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
    align-items: center;

}

.guitar-devider {}

.song-info p {
    font-family: var(--font-f-Bold);
    color: var(--color-off-white);
    text-align: center;
}

.album-cover-img img {
    opacity: .5;
}

.album-big-text {

    position: absolute;
    font-family: var(--font-f-Medium);
    color: #fff;
    text-align: center;
    font-size: var(--font-s-h1);
}


.album-section {
    margin: 20vw 8.8vw 3vw;
}

.album-section-title {
    margin-bottom: 3vw;
    font-family: var(--font-f-Bold);
    color: #fff;
}

.songs-prev h4 {
    font-family: var(--font-f-Medium);
    color: #fff;
    text-align: center;
}

.songs-prev ul li {
    font-family: var(--font-f-Light);
    color: white;
    font-size: var(--font-lh-p);
    padding: .4vw 0;
    cursor: pointer;
    border-bottom: 1px solid #fff;
}



/* //////////////////////////////////////////SHOWS SECTION////////////////////////////////////////////////////////////////////// */

.shows {
    height: auto;
    overflow: hidden;
}

.shows {
    position: relative;
    /* Make the section position relative */
}

.show-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
}

.show-bg img {
    max-width: 100%;
    max-height: 100%;
}


.shows-items {
    margin: 20vw 8.8vw;
}


.shows-items h3 {
    font-family: var(--font-f-Bold);
    margin-bottom: 3vw;
    color: var(--main-dark-color);

}

.show-bg {
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: -1;
}

.show-bg img {
    opacity: .08;
}

@media (max-width: 767px) {
    .shows-info ul li {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 10vw 0 !important;

    }



}

.shows-info h5 {
    font-family: var(--font-f-Light);
    text-align: center;
    font-size: var(--font-lh-h3);
}


.shows-info ul li {
    font-family: var(--font-f-Light);
    color: var(--main-dark-color);
    font-size: var(--font-s-h3);
    display: flex;
    text-align: center;
    align-items: center;
    padding: 2vw 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);

}

@media(max-width: 767px) {
    .flatpickr-calendar {
        right: 50px !important;
    }
}



.shows-info span {
    border-right: 1px solid var(--main-dark-color);
    padding: 0 1vw;
    width: 100% !important;

}

.day {
    font-family: var(--font-f-Bold);
}


.footer-item {
    margin: 20vw 8.8vw;
}

.footer-info-contact {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

@media (max-width: 897px) {
    .footer-info-contact {
        display: flex;
        gap: 20vw;
        flex-direction: column-reverse;
    }
}

.footer-info ul {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}


.footer-info ul li {
    font-family: var(--font-f-Light);
    font-size: var(--font-lh-subtitle);
}

.footer-item h3 {
    color: var(--main-dark-color);
    font-family: var(--font-f-Bold);
    margin-bottom: 3vw
}


label {
    font-family: var(--font-f-Light);
}

.footer-info-contact form {
    width: 500px;
    margin: 0 auto;
}


@media (max-width: 767px) {
    .footer-info-contact form {
        width: 100%;

    }

    .footer-info-form {
        width: 100%;
    }

    .footer-info ul li {
        padding: 1.2vw 0;
    }
}



.footer-info-contact input,
.footer-info-contact textarea {
    width: 100%;
    padding: 12px;
    border-bottom: 1px solid #ccc;
    font-family: var(--font-f-Medium);
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

.submit-btn {
    width: 120px;
    height: 120px;
    background-color: var(--main-dark-color);
    color: #fff;
    font-family: var(--font-f-Medium);
    border-radius: 50%;
}

.submit-btn:hover {
    transform: rotate(-15deg);
}

.footer-info-contact input[type=submit]:hover {
    background-color: var(--main-dark-color);
}


.contact-big-subtitle {
    margin: 0 0 10vw 0;
}

.contact-big-subtitle h2 {
    font-family: var(--font-f-Bold);
    font-size: var(--font-lh-h1);
}


.fa-phone,
.fa-spotify,
.fa-youtube,
.fa-facebook,
.fa-instagram,
.fa-envelope {
    margin-right: 1vw;
}


.fa-phone:hover,
.fa-spotify:hover,
.fa-youtube:hover,
.fa-facebook:hover,
.fa-instagram:hover,
.fa-envelope:hover {
    transform: scale(1.1);
    opacity: .7;
}



.footer-info-copy {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 2vw;
    gap: 5vw;

}

.footer-info-copy p {
    font-family: var(--font-f-Medium);


}



.education-items h3 {
    font-family: var(--font-f-Bold);
    margin-bottom: 3vw;

}

.education-items h2 {
    font-family: var(--font-f-Light);


}

img.udemy-icon {
    width: 10vw;
}

@media (max-width: 767px) {
    img.udemy-icon {
        width: 40vw;
    }
}

img.nota-bene-logo {
    width: 10vw;
}

.notaBene-records {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.notaBene-records p {
    font-family: var(--font-f-Bold);
    text-align: center;
}

.d {
    font-family: var(--font-f-Bold);
}





.song-controls {

    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.song-controls button {

    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.song-controls button:hover {
    background-color: #555;
}

#prevButton {

    margin-right: 20px;
}







/* ///////////////////////////////////ADMIN CSS////////////////////////////////////////// */


/* Sidebar */
.sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    font-family: var(--font-f-Medium);
    background-color: #111;
    padding-top: 20px;
}

.side-bar-cont {
    margin-top: 10vw;
}

.sidebar a {
    padding: 10px;
    text-decoration: none;
    font-size: 18px;
    color: #818181;
    display: block;
}

.sidebar a:hover {
    color: #f1f1f1;
}


.content {
    margin-left: 250px;
    padding: 20px;
}

.table {
    margin-top: 10vw;
    font-family: var(--font-f-Medium);
}


table {
    width: 100%;
    border-collapse: collapse;
}

table,
th,
td {}

/* Add zebra striping to the table */
tr:nth-child(even) {
    background-color: #fff;
}


th,
td {
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

#label {
    padding: 0 2vw;

}

label {
    font-family: var(--font-f-Bold);
    padding: 1vw 0;
}

.action {
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: space-around;
    cursor: pointer;

}

.fa-trash:hover {
    transform: scale(1.1);

}

.fa-pencil-alt:hover {
    transform: scale(1.1);

}



.modal {
    display: none;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.modal-content {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(228, 224, 219, 0.8);
    backdrop-filter: blur(5px);
    /* Add blur effect */
}

#modal-content {
    filter: blur(.5);
}


.form {
    display: flex;
    flex-direction: column;
    width: 70%;
}

.close {
    padding: 2vw 0;
    font-family: var(--font-f-Bold);
    cursor: pointer;
}

#add-album-btn,
#add-show-btn {
    font-family: var(--font-f-Bold);

}

.submit-btn {
    background-color: #121212;
}

input.update {
    background-color: transparent;

}

#add-video-btn {
    font-family: var(--font-f-Bold);
}




 .custom-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.custom-checkbox input[type="checkbox"] {
    /* Uklanja osnovni stil checkbox-a */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #121212;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    outline: none;
    transition: all 0.3s ease;
}

.custom-checkbox input[type="checkbox"]:checked {
    background-color: #121212;
    border-color: #121212;
}

.custom-checkbox input[type="checkbox"]:checked::after {
    content: '\2713'; /* Unicode za čekiranu oznaku */
    color: white;
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 4px;
    font-weight: bold;
}

.custom-checkbox label {
    margin-left: 10px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
}