index.css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: background 0.5s ease;
    background-size: cover;

}

/* Main container */
.abcd{
    box-shadow: 0 0 10px 5px red;
    /* outline-style: solid; Ensure outline style is solid */
    animation: outlineAnimation  0.5s infinite;
}
@keyframes outlineAnimation {
    /* 0% {
        outline:5px dotted rgb(111, 77, 77);
    }
    50% {
        outline:10px dotted rgb(7, 202, 82);
    }
    100% {
        outline:5px dotted rgb(191, 255, 0);
    } */
    /* 0% { box-shadow: 0 0 20px 10px rgb(242, 255, 0); }
    50% { box-shadow: 0 0 20px 10px rgb(255, 149, 0); }
    100% { box-shadow: 0 0 20px 10px rgb(234, 255, 0); } */
    0% { box-shadow: 0 0 20px 10px rgb(226, 226, 226); }
    50% { box-shadow: 0 0 20px 10px rgb(255, 149, 0); }
    100% { box-shadow: 0 0 20px 10px rgb(247, 247, 247); }
    
  }
#Rcontainer{
    width: 100%;
    margin: 0px auto;
    height: 100%;
    margin-top: 1.5rem;
    padding: 10px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 20% 78%;
    justify-content: center;
    box-sizing: border-box;
    gap: 20px;
}


/* Main Container End */

.music-list {
    /* margin-top: 3rem; */
    padding: 1rem;
    /* width: 1230px; */
    display: grid;
grid-template-columns: repeat(3,1fr);
    height: 100vh;
    overflow-y: scroll;
    /* display: flex;
    flex-wrap: wrap; */
    gap: 2rem;
    /* margin-left: 25rem; */
    border-radius: 1rem;
    /* justify-content: space-around; */
    background-color: #2a0845;

  
}

.song {
    background-color: #9562b3;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px;
    height: 320px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.3s ease;
    /* width: 300px; */
    color: #fff;
    
}

.song:hover {
    transform: scale(1.05);
}

.song img {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    object-fit: cover;
    
}

.song-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.song-info h3 {
    margin: 10px 0 5px;
}

.song-info p {
    margin: 0;
}

.player-popup {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 3rem;
padding-top: 1rem;
width: 100%;
/* margin-left: 28rem; */
border-radius: 1rem;
    height: 100%;
    background: #2f0743;
    opacity: 0.8;
    display: none;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.5s;
    z-index: -1;
}

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

.player-content {
    position: relative;
    text-align: center;
    color: #fff;
}

#close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.song-box {
    display: flex;
    flex-direction: column;
    z-index: 100;
    align-items: center;
    background: #9562b3;
    opacity: 10;
    padding: 20px;
    border-radius: 10px;
    border: 5px solid transparent;
    
    /* animation: borderAnimation 2s infinite; */
}



.song-box img {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    object-fit: cover;
}

.song-details {
    margin-top: 20px;
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.controls button {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s;
}

.controls button:hover {
    transform: scale(1.3);
}

audio {
    background: none;
    border: none;
    color: #fff;
}

/* Ritik Code Start */

.sidebar{
    /* width: 420px; */
    border: 1px solid;
    border-radius: 10px;
    /* padding: 20px; */
    box-sizing: border-box;
    background-color: #2a0845;
    display: flex;
    flex-direction: column;
    gap: 20px;

    
}


#searchAndSelectBar{
    width: inherit;
    height: 25%;
    /* border: 1px solid; */
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    box-sizing: border-box;
}

#RsearchInput{
    width: calc(100% -20px);
    padding: 15px;
    border-radius: 8px;
    outline: none;
    display: block;
    border: none;
    text-align: center;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
    color: rgb(18, 18, 18);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
#RCategorySearch{
    width: calc(100%);
    margin: 10px 0px;
    padding: 15px;
    border-radius: 35px;
    outline: none;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

#CategoryCatalog{
    width: inherit;
    height: 75%;
    overflow-y: scroll;
    /* scrollbar-color: inherit; */
    border-right: 1px solid;
    box-sizing: border-box; 
    padding: 10px;
    
}

#CategoryCatalog>div{
    width: calc(100%);
    border-radius: 35px;
    background-color: white;
    margin: 10px 0px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    font-size: 20px;
}
#CategoryCatalog>div>img{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 20px;
    border-radius: 35px;
}
#CategoryCatalog>div>button{
    position: absolute;
    right: 25px;
    border: none;
}


/* Master player */

#playAndPauseBtn{
    width: 820px;
    height: 80px;
    margin: 10px auto;
    border-radius: 35px;
    background-color: white;
    position: fixed;
    bottom: 15px;
    left: 50%; 
    transform: translateX(-50%);
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    background: linear-gradient(black, blueviolet);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    transition: 0.5s;
    
    background-size: 200% auto;
}

#playAndPauseBtn:hover{
    color: #fff;
    text-decoration: none;
    background-position: right center;
    background-image: linear-gradient(
      to right,
      #6441a5 0%,
      #2a0845 51%,
      #6441a5 100%
    );
}

#playAndPauseBtn>button{
    border-radius: 50%;
    width: 50px;
    padding: 8px;
    background: transparent;
    border: none;
    color: white;
    font-size: large;
}

#playAndPauseBtn2{
    width: 1024px;
    height: 80px;
    border-radius: 35px;
    background-color: white;
    position: fixed;
    bottom: 15px;
    left: 50%; 
    transform: translateX(-50%);
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    background: linear-gradient(black, blueviolet);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

#playAndPauseBtn2>button{
    text-align: center;
    border-radius: 50%;
    width: 50px;
    padding: 8px;
    background: transparent;
    border: none;
    color: white;
    font-size: large;
}
/* Ritik code end */

@media screen and (max-width: 600px) {
    .music-list {
        /* margin-top: 3rem; */
        padding: 1rem;
        /* width: 1230px; */
        display: grid;
        grid-template-columns: 100% ;

}
#Rcontainer{
    width: 100%;
  
    grid-template-columns: 100%;
    padding: 0px;
}
.song{
    width: 100%;
    height: 100%;
    /* height: 400px1; */
    padding: 0px;
}
.song img {
    width: 100%;
     height: 350px;
    /* border-radius: 5px; */
    /* object-fit: contain; */
    
}

.song-info h3 {
    margin: 0;
}
.song-info {
    padding: 20px 0;
}

#playAndPauseBtn {
width: 100%;
}
#RsearchInput{
    width: 100%;
    border-radius: 4px;
}
#RCategorySearch{
    border-radius: 4px;
}

#searchAndSelectBar {
    height: auto;
}
}