body{
    margin:0px;
    padding: 0px;
    background-color: rgb(22, 5, 37);
}

#loader{
    min-height: 100vh;
    display: grid;
    place-items: center;
    background-color: rgb(22, 5, 37);
    z-index: 9999;
}

.preloader a{
    font-size: 80px;
    text-decoration: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.747);
    border: 8px solid rgb(228, 7, 180);
    padding: 30px 60px;
    border-radius: 20px;
    background-color: rgba(36, 1, 56, 0.63);
    text-shadow: 0 0 0.2em rgba(255, 255, 255, 0.959);
    box-shadow:0 0 0.3em 0.01em rgba(226, 0, 154, 0.247);
    animation: mymove 3s infinite;
}

@keyframes mymove{
        50%{text-shadow: 0 0 0.6em rgb(255, 176, 238);
        box-shadow: 0 0 1em 0.01em rgb(187, 27, 136);
        border: 8px solid rgb(255, 238, 251);
    }
    }

.bar{
    position: relative;
    height: 10px;
    width: 40%;
    background-color: rgba(226, 0, 154, 0.247);
    box-shadow:0 0 0.7em 0.01em rgba(226, 0, 154, 0.856);
}

.progress{
    position: absolute;
    height: 8px;
    width: 0%;
    background-color: rgba(236, 153, 218, 0.815) ;
    border: 1px solid rgb(236, 153, 218);
    border-radius: 20px;
    box-shadow:0 0 0.7em 0.1em rgba(226, 0, 154, 0.856);
    animation: probar 3s infinite alternate;
}

@keyframes probar{
    100%{width:100%;}
}
.afterload{
    display: flex;
}
.boxcontain{
    position:fixed;
}
.leftmenu{
    color:rgb(184, 48, 154);
    padding-top:20px ;
    font-size: 32px;
    height: 100vh;
    min-width: 238px;
    background-color: rgba(28, 3, 43, 0.63);
}

.leftmenu li{
    list-style: none;
    display: block;
    margin: 25px 10px;
}

.leftmenu button{
    cursor: pointer;
    border: none;
    font-size: 20px;
    background-color: rgb(22, 5, 37);
    color: rgb(184, 173, 173);
}

.leftmenu button:hover{
    transform: scale(1.01);
    transition: 300ms ease-in-out;
    color: rgb(245, 242, 242);
   
}

.logo{
    color: rgb(235, 230, 230);;
    position: relative;
    left:35px;
    border: orchid solid;
    border-radius:5px;
    width: fit-content;
    padding: 8px 15px;
}
.content{
    padding-left: 10px;
    color: white;
}
.searchbar{
    border-radius: 15px;
    width: 450px;
    height: 30px;
    outline: none;
    text-align: center;
}
@media only screen and (max-width: 700px){
    .searchbar{
        width:200px;
    }
}
.search{
    background-color: rgb(22, 5, 37);
    padding: 25px;
    padding-left: 10px;
    position: sticky;
    top:0px;
    margin-bottom:25px;
    margin-top: 0px;
    margin-left: 0px;
}
.playbox{
    float: left;
    margin: 10px;
     height:200px;
    width:200px;
    border-radius: 5px;
}
.playnames{
    color: snow;
    margin-left:10px ;
    font-size: 30px;
}
.box1{
    background-color: #ceeeaeea;
    background-image: url(/images/tn1.jpg);
    
}
.box2{
    background-color: #c67acee5;
}
.box3{
    background-color: #ff998cdc;
}

.genres{
    display: table;
    content:" ";
    clear:both;
}
.playbtn{
    cursor: pointer;
    border: none;
    border-radius: 10px;
    position: relative;
    top:75%;
    left:65%;
    height: 40px;
    width:60px;
}

.box4{
    background-color: #c67acee5;
}
.box5{
    background-color: #ff998cdc;
}
.box6{
    background-color: #ceeeaeea;
}