/* code by Withubb Ltd.. */
:root { --trap-color: #7030a0; --trap-color2: #b63383; } #sec{width: 80%;} #music_sect{ position: relative; height: auto; display: block; padding-bottom: 50px; }.song_container { position: relative; height: 100px; width: 45%; min-width: 200px; background-color: rgb(243, 243, 248); margin: 10px 10px 10px 20px; box-sizing: border-box; border-radius: 5px; padding-top: 10px; text-align: left; display: inline-block; box-shadow: 1px 1px 11px rgba(136, 140, 143, 0.233); } .song_icon { height: 80px; width: auto; position: absolute; left: 10px; float: left; border-radius: 40px; } .singer_name{ font-size: 12px; color: #666; } .song_title { position: absolute; height: auto; right: 5px; width: 70%; right: 12px; text-align: left; min-width: 100px; background-color: transparent; z-index: 10; } .all_songs_btn { position: absolute; bottom: 5px; display: block; height: 40px; width: 150px; border: none; box-sizing: border-box; padding-top: 10px; text-decoration: none; background-color: rgba(0, 0, 0, 0.156); color: black; text-transform: capitalize; right: 0px; } .all_songs_btn:hover { box-shadow: 0px 1px 3px black; color: rgb(27, 59, 27); text-decoration: underline; } .all_songs_btn:active { box-shadow: 0px 1px 3px black; color: rgb(27, 59, 27); text-decoration: underline; } .music_img{ position: relative; height: auto; width: 100%; display: block; background-image: url("https://nyc3.digitaloceanspaces.com/springmp3/media/music_icon.jpeg");margin-left:auto; margin-right:auto;background-repeat:repeat; background-position: center; } #all_song_btn{ position: relative; display: block; height: 40px; width: 200px; border: none; box-sizing: border-box; padding-top: 10px; left: 0px; cursor: pointer; text-decoration: none; background-color: rgba(0, 0, 0, 0.156); color: rgb(68, 65, 65); } #all_song_btn:hover{ box-shadow: 1px 0px 1px rgb(21, 49, 21); text-decoration: underline; } #all_song_btn:active{ box-shadow: 1px 0px 1px rgb(21, 49, 21); text-decoration: underline; } .singer_icon:active{ box-shadow: 2px 0px 10px rgb(21, 49, 21); } .singer_icon:hover{ box-shadow: 2px 0px 10px rgb(21, 49, 21); } /* iframe styling */ 
.connect_iframe{ position: relative; height: 300px; width: 90%; min-width: 300px; background-color: rgb(243, 243, 248); margin: 10px 10px 10px 20px; box-sizing: border-box; border: none; border-radius: 5px; padding-top: 10px; text-align: left; display: inline-block; box-shadow: 1px 1px 11px rgba(136, 140, 143, 0.233); } /* single song styling section.... */  label{font-weight: bolder;font-size: 16px;position: relative;width: 96%;background-color: inherit;text-align: left;display: block;}.comment_container{position: relative; overflow: hidden; text-overflow: hidden; margin-right: auto;margin-left: auto;display: block;height: auto;width: 96%;margin-bottom: 20px;box-sizing: border-box;}#my_comment{margin-top: 6px;font-size: 16px;position: relative;width: 96%;max-width: 400px;border-radius: 7px;height: 120px;background-color: transparent;display: block;}#commentor_name{margin-top: 6px;font-size: 16px;position: relative;width: 96%;max-width: 400px;border-radius: 7px;height: 30px;background-color: transparent;display: block;}#d_email{margin-top: 6px;font-size: 16px;position: relative;width: 96%;max-width: 400px;border-radius: 7px;height: 30px;background-color: transparent;display: block;}#subm_btn{ position: relative;display: block;height: 40px;width: 160px;font-weight: bolder;border: none;left: 20px;font-size: 18px;box-sizing: border-box;padding: 10px 10px 10px 10px;text-decoration: none;background-color: var(--trap-color);color: whitesmoke;text-transform: capitalize;border-radius: 9px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #subm_btn:hover {  box-shadow: 0px 1px 3px black; text-decoration: underline; color: rgb(27, 59, 27); background-color: var(--trap-color)52; } #subm_btn:active {  box-shadow: 0px 1px 3px black; text-decoration: underline; color: rgb(27, 59, 27); background-color: var(--trap-color)52; }.c_holder{position: relative;display: block;background-color: inherit;margin-left: auto;margin-right: auto;box-shadow: 0px 0px 6px #7e7b7b;height: auto;width: 90%;box-sizing: border-box;padding: 80px 5px 30px 60px;margin-top: 30px;text-align: left;border-radius: 0px 40px 40px 40px;min-width:200px;}.p_h{position: absolute;left: 5px;top:5px;height: 70px;width: 150px;background-color: inherit;}.pr{position: absolute;height: 52px;width: 52px;border-radius: 26px;background-color: inherit;left: 5px;box-shadow: 0px 0px 3px #665;top: 5px;overflow: hidden;}.head{position: absolute;background-color:rgb(96, 74, 123);height: 20px;width: 20px;border-radius: 15px;display: block;top: 12px;left: 16px;} .bo{position: absolute;background-color: rgb(96, 74, 123);height: 40px;width: 40px;border-radius: 15px;display: block;top: 30px;left: 6px;}.c_da{position: absolute;display: block;height: 20px;width: auto;font-weight: bolder;color: #665;background-color: transparent;right: 30px;bottom: 3px;}.nam{position: absolute;height: auto;width: auto;padding: 5px;box-sizing: border-box;background-color: inherit;left: 65px;top: 15px;font-size: 12px;text-transform: capitalize;font-weight: bolder;max-width: 100px ;max-height: 50px;overflow: hidden;text-overflow: ellipsis;}.ad_body{position: relative;display: inline-block;background-color:rgba(245, 245, 245, 0.637);margin-top: 20px;height: 200px;width: 90%;min-width:200px;}.ad_image{position: absolute;display: block;top: 0px;height: auto;width: 100%;}.value_name{font-size: 23px;text-transform: capitalize; color: #444444; text-align:left; font-family: 'Acme', sans-serif; padding: 0px 20px 0px 20px ; font-weight: bolder; }.key_name{font-size: 25px;color: rgb(35, 21, 97);font-family: 'Acme', sans-serif;padding: 0px 20px 0px 5px ;text-transform: capitalize;font-weight: bolder;text-align: left;}#my_table{position: relative;display: block;height: auto;width: 98%;margin-left: auto;margin-right: auto;}tr{height:70px;} .single_song_holder { position: relative; margin-right: auto; margin-left: auto; display: block; width: 98%; height: auto; box-shadow: 1px 1px 11px rgba(136, 140, 143, 0.233); box-sizing: border-box; } #song_url{ font-size: 18px; padding-top: 12px; font-size: 16px; left: 15px; margin-right: 8px; text-decoration: underline; } .comment{ position: relative;display: block;font-family: sans-serif; text-align:left; font-size:17px;padding-left:10px; line-height:32px; border-radius: 5px;box-sizing: border-box;height: auto;width: 96%;text-align: left;left: 3px;background-color: transparent;color: #555252;padding: 7px 5px 7px 5px; } .song_article { position: relative; display: block; margin: 15px 0px 10px 0px; background-color: rgba(245, 245, 245, 0.637); box-sizing: border-box; height: 70px; padding-top: 10px; width: 100%; font-size: 20px; } strong { position: relative; height: 70px; width: auto; left: 10px; padding-top: 22px; box-sizing: border-box; text-transform: capitalize; float: left; font-family: 'Courier New', Courier, monospace; font-size: 23px; background-color: transparent; text-align: left; } #song_icon { position: relative; height: auto; margin-right: auto; margin-left: auto; display: block; width: 260px; } #profile_holder{display: block;padding: 10px;box-sizing: border-box;position: relative;width: 96%;margin-left: auto;margin-right: auto;height:auto;background-color: inherit;transition: .35s;}.profile{position: relative;display: inline-block;height: 110px;width: 90px;background-color: transparent;margin: 5px;border-radius: 5px;box-shadow: 0px 0px 5px #bbb5b5;}.profile_image{position: absolute;display: block;top: 20px;width: 90px;height: 90px;font-weight: bolder;color: aliceblue;padding-top: 30px;box-sizing: border-box;background-color: var(--trap-color);border-radius: 0px 0px 5px 5px;}.profile_not_aval{position: absolute;top: 20px;width: 100%;text-align: center;height: 90px;box-sizing: border-box;padding-top: 20px;font-weight: bolder;background-color: inherit;color: #9e5511;text-shadow: 0px 0px 20px #080808;text-transform: capitalize;font-size: 18px;}.profile_name{position: absolute;border-bottom: 1px solid gainsboro;top: 0px;width: 100%;text-align: center;height: 20px;font-weight: bolder;background-color: aliceblue;color: #17171f;box-sizing: border-box;text-transform: capitalize;font-size: 15px;}.ad_body{position: relative;display: inline-block;background-color:rgba(245, 245, 245, 0.637);margin-top: 20px;height: 200px;width: 90%;max-width: 300px;min-width:200px;}.ad_image{position: absolute;display: block;top: 0px;height: 180px;width: 100%;}.btn2{ position: relative; bottom: 10px;display: block;height: 40px;width: 180px; font-weight: bolder;border: none;font-size: 18px;box-sizing: border-box;padding-top: 10px;text-decoration: none; background-color: var(--trap-color); color: whitesmoke; text-transform: capitalize; left: 40px; border-radius: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.btn2:hover { box-shadow: 0px 1px 3px black;text-decoration: underline;color: rgb(27, 59, 27);}.btn2:active{ box-shadow: 0px 1px 3px black;text-decoration: underline;color: rgb(27, 59, 27);}.value_name{font-size: 21px;text-transform: capitalize; font-family: 'Acme', sans-serif; padding: 0px 20px 0px 20px ; font-weight: bolder; background-color: transparent; }.key_name{font-size: 21px;color: rgb(35, 21, 97);font-family: 'Acme', sans-serif;padding: 0px 20px 0px 5px ;text-transform: capitalize;font-weight: bolder;text-align: left;background-color: transparent;}#my_table1{position: relative;display: block;height: auto;width: 98%;margin-left: auto;margin-right: auto;}tr{height:50px;}  /* related songs pane..... */ #related_songs { position: relative; margin-right: auto; margin-left: auto; display: block; width: 98%; height: auto; box-shadow: 1px 1px 11px rgba(136, 140, 143, 0.233); box-sizing: border-box; } /* all songs section style rules..*/ #all_songs_sect{ position: relative; margin-right: auto; margin-left: auto; display: block; width: 99%; height: auto; box-shadow: 1px 1px 11px rgba(136, 140, 143, 0.233); box-sizing: border-box; padding-bottom: 90px; } #pagination_holder{ position: absolute; display: block; bottom: 0px; background-color: transparent; height: 40px; width: 100%; box-sizing: border-box; } #first{ position: absolute; display: block; text-align: center; text-decoration: none; height: 50px; width: 90px; font-weight: bolder; background-color: var(--trap-color);color: whitesmoke; font-size: 20px; border-radius: 4px;padding-top: 10px; box-sizing: border-box; } #prev{ position: absolute; display: block; text-align: center; text-decoration: none; height: 50px; width: 90px; font-weight: bolder; left: 90px;background-color: var(--trap-color);color: whitesmoke; font-size: 20px; border-radius: 4px; padding-top: 10px; cursor: pointer; box-sizing: border-box; } #next{ position: absolute; display: block; text-align: center; text-decoration: none; height: 50px; width: 90px; font-weight: bolder; right: 90px; background-color: var(--trap-color);color: whitesmoke; font-size: 20px; border-radius: 4px; padding-top: 10px; box-sizing: border-box; } #last{ position: absolute; display: block; text-align: center; text-decoration: none; height: 50px; width: 90px; font-weight: bolder; right: 0px; background-color: var(--trap-color);color: whitesmoke; font-size: 20px; border-radius: 4px; padding-top: 10px; box-sizing: border-box; }#first:hover{ background-color: rgb(160, 159, 159); text-decoration: underline; color: rgba(0, 0, 0, 0.774); } #next:hover{ background-color: rgb(160, 159, 159); text-decoration: underline; color: rgba(0, 0, 0, 0.774); } #prev:hover{ background-color: rgb(160, 159, 159); text-decoration: underline; color: rgba(0, 0, 0, 0.774); } #last:hover{ background-color: rgb(160, 159, 159); text-decoration: underline; color: rgba(0, 0, 0, 0.774); } #first:active{ background-color: rgb(160, 159, 159); text-decoration: underline; color: rgba(0, 0, 0, 0.774); } #next:active{ background-color: rgb(160, 159, 159); text-decoration: underline; color: rgba(0, 0, 0, 0.774); } #prev:active{ background-color: rgb(160, 159, 159); text-decoration: underline; color: rgba(0, 0, 0, 0.774); } #last:active{ background-color: rgb(160, 159, 159); text-decoration: underline; color: rgba(0, 0, 0, 0.774); } /* search results section.... */.s_res_holder{position: relative;display: inline-block;width: 40%;max-width: 550px;height: 100px;margin: 10px;box-sizing: border-box;overflow: hidden;background-color: transparent;box-shadow: -2px -2px 3px #b6b4b4;border-radius: 5px;padding: 5px;transition: .5s;}.s_res_holder:hover{transform: scale(0.9);} .s_res_holder:active{ transform: scale(0.9);}.result_txt{ position: absolute; height: auto; width: auto; right: 5px; left: 85px; background-color: transparent; box-sizing: border-box; top: 5px; text-align: left; white-space: pre-line; text-overflow: ellipsis; padding: 5px; bottom: 0px; overflow: hidden;}.s_img_holder{ position: absolute; height: 80px; width: 80px; left: 5px; box-sizing: border-box; bottom: 10px; overflow: hidden; border-radius: 40px;}.sr_img{ height: auto; min-height: 100%; width: 100%;} /* singers styling section.. */.singer_icon { position: relative;height: auto;display: block;max-width: 500px;margin: 10px auto 10px auto;width: 98%;} #sname{ color: #135;font-size: 22px;} #more_info{ position: relative;display: inline-block;margin: 10px 0px 10px 0px;background-color: rgba(245, 245, 245, 0.637); box-sizing: border-box;height: auto;width: 120px;font-size: 19px;} #singer_icon1 { position: absolute;height: 140px;display: block;border-radius: 70px;width: 140px;bottom: 40px;right: 40px;z-index: 10;} #big_hold{ display: block; margin-right: auto; margin-left: auto; width: auto; max-width: 400px; height: auto; border-radius: 30px 30px 30px 0px; position: relative; background-color: transparent; transition: .3s; box-shadow: 1px 1px 11px rgba(136, 140, 143, 0.233);} #big_icover{ display: block; width: 100%; height: 300px; max-width: 400px; margin-right: auto; margin-left: auto; display:block; border-radius: 30px 30px 30px 0px; position: relative; background-color: black; overflow: hidden; transition: .3s;} #big_icover:hover{opacity: 0.8;} #big_icover:active{opacity: 0.8;} #s_img_cover{  display: block; position: absolute; width: 100px; height: 100px; border-radius: 50px; box-sizing: border-box; background-color: black; right: 12px; bottom: -28px; box-shadow: 1px 0px 3px gray; overflow: hidden;}  #singer_bimg{ position: relative;  height: auto;  width: 100%;  margin-left: auto;  margin-right: auto;  display: block; } #allsinger_btn{ display: block; text-decoration: none; color: #555; height: 35px; width: auto; background-color: var(--trap-color); text-align:center;  float:right;  border-radius: 3px;  box-sizing: border-box;  padding-top: 5px;  margin-top: 20px;  cursor: pointer;  position:relative;  font-size:smaller;} #allsinger_btn:active{ text-decoration: underline;  box-shadow: 0px -1px 1px green;} #allsinger_btn:hover{ text-decoration: underline;  box-shadow: 0px -1px 1px green;} #song_btn{ display: block; text-decoration: none; color: #555; height: 35px; width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: var(--trap-color); text-align:center; left: 6px; border-radius: 3px; box-sizing: border-box; padding-top: 8px; margin-top: 20px; cursor: pointer; position:relative; font-size: medium;} #song_btn:active{ text-decoration: underline; box-shadow: 0px 1px 1px green;} #song_btn:hover{ text-decoration: underline; box-shadow: 0px 1px 1px green;} #singer_info { text-align: left; box-sizing:border-box; padding-left:10px;font-size:16px; line-height: 32px; position: relative;} #allsong_bysinger_sect{ position: relative; height: auto; font-weight: bolder; display: block; width: 100%; padding-bottom: 60px;} #singer_pics{ position: relative; height: 180px; width: auto; border-radius: 55px; display: block; left: -12px; top: -10px; transition: .3s;} #singer_pics:hover{ transform: scale(0.9, 0.9); box-shadow: 0px 1px 5px #389e38;} #singer_pics:active{ transform: scale(0.9, 0.9);} #singer_country{ position: relative; display: block; text-align: left; left: -10px; font-size: 22px; height: 50px; width: 180px; top: -40px; text-decoration: none; color: #667; text-transform: capitalize;} #singer_name{ position: relative; display: block; left: 205px; text-align: left; height: 50px; width: 200px; top: -80px; text-decoration: none; color: #667; font-size: 22px; text-transform: capitalize;} #singer_name:hover{ text-decoration: underline; color: black;} #singer_name:active{ text-decoration: underline; color: black;} #singer_pane{ position: relative; height: auto; width: 100%; box-sizing: border-box; background-color: transparent; display: block;} @media screen and (max-width:400px) { .song_container { display: block; margin-right: auto; margin-left: auto; width: 96%; position: relative;} #singer_bimg{ position: relative; height: auto; width: 96%;} .all_songs_btn { position: absolute; bottom: 5px; display: block; border: none; box-sizing: border-box; padding-top: 10px; text-decoration: none; width: 100px; height: 35px; font-size: smaller; background-color: rgba(0, 0, 0, 0.156); color: black; text-transform: capitalize; right: 0px;} #allsinger_btn{  height: 30px; width: 120px; border-radius: 3px; box-sizing: border-box; padding-top: 5px; font-size: 13px;} #song_btn{ height: 28px; width: 150px; padding-top: 6px; font-size: smaller;} .song_container { position: relative; height: 100px; width: 100%; min-width: 200px;} #first{width: 70px; }   #prev{ left: 70px;width: 70px;} #next{ width: 70px;  right: 70px; } #last{ width: 70px;} .result_holder{ width: 92%;  position: relative;  margin-right: auto;  margin-left: auto;  display: block;  background-color: rgba(97, 100, 100, 0.062);} } @media screen and (max-width:600px) { .s_res_holder{width: 98%; } #sec{  width: 98%;} .song_container { display: block;  margin-right: auto;  margin-left: auto;  width: 70%;  position: relative;} .song_container { position: relative;  height: 100px;  width: 100%;  text-overflow: ellipsis;  min-width: 200px;} } @media screen and (max-width:300px) { #song_icon { width: 96%;}   .singer_icon { position: relative;  height: 280px;  margin-right: auto;  margin-left: auto;  display: block;  margin: 10px 20px 10px 20px;  width: 86%;} #singer_pics{ position: relative;  margin-left: auto;  margin-right: auto;  height: 80px;  width: 86%;  border-radius: 5px;  display: block;  left: 0px;  transition: .3s; } .song_container { position: relative;  height: 100px;  width: 100%;  min-width: 0px;  padding-top: 10px;  display: block;} .song_title { position: absolute;  height: auto;  font-size: small;  right: 6px;  width: 170px;  min-width: 0px;  z-index: 3; }} hr{ color: rgba(157, 159, 160, 0.233) }