html {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
}
        
.LoadingPage {
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   -moz-background-size: cover;
   -webkit-background-size: cover;
   background-size: cover;
   display: grid;
   position: fixed;
   top:0;
   left:0;
   opacity: 0;
   animation: fadeOut 10s linear;
   background-image: url("/Resource/LoadingBackground.jpg");
}
.Welcome{
    width: 80%;
    height: 80%;
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    transform: translate(10%, -18%);
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    justify-content: center;
    align-items: center;
    stroke: #06d7fc;
    stroke-dasharray: 4500;
    animation: draw ease 10s;
}

.Melyrics {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: zoom-in-zoom-out-Loding 1s ease infinite;
}
.LodingLogoImg {
    width: 14%;
    height: auto;
}

.Home {
    width: 100%;
    height: 100%;
    display: grid;
    position: fixed;
    overflow: auto;
    top:0;
    left:0;
    opacity: 1;
    animation: fadeIn 10s linear;
}

.Top {
    position: absolute;
    width: 100%;
    height: 140px;
    left: 0;
    top: 0;
    background-color: #520229; 
    display: flex;
    justify-content: center;
    align-items: center;
}
 .Top::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #501e01, #f3fe3b, #f3fe3b, #501e01);
}
.Top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #501e01, #f3fe3b, #f3fe3b, #501e01);
}

.logo {
    margin: auto;   
}

.LogoImg {
    width: 160px;
    height: auto;
}

.Main {
    position: absolute;
    width: 100%;
    height: calc(100% - 160px);
    top:140px;
    left: 0;
    background: linear-gradient(to right, #380021, #380021, #00241C, #380021, #00241C, #380021, #380021); 
    overflow: auto;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-image: url("/Resource/HomeBackground.jpg");
}

        
.video-container-background {
    position: relative;
    top: 20px;
    width: 80%;
    max-width: 800px;
    margin: 0 auto; 
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(to right, #A50363,  #501e01, #f3fe3b, #f3fe3b, #501e01, #03A581); 
    padding: 4px; 
}

.video-container {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden; 
}

.video {
    width: 100%;
    display: block;
    border-radius: 16px;
    background: Black;
}


.buffering {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    border-radius: 5px;
    animation: rotate 2s linear infinite;
}
.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to top, #FA006608, #FA00660F, #FA006614, #FA00661A); 
    padding: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.5s;
    border-radius: 0 0 16px 16px;
}

.controls.hidden {
    opacity: 0;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

 input[type="range"] {
    cursor: pointer;
}

input[type="range"]#progress {
    accent-color: #FA0072;
}

.buffered {
    background: linear-gradient(to right, #C9F0EF  0%, #C9F0EF  var(--buffered-percentage), #04C1F0 var(--buffered-percentage), #04C1F0 100%);
}
.bufferingImg {
    width: 100px;
    height: auto;
}
#progress {
    flex: 1;
    margin: 0 10px;
    height: 5px;
}

/* Change the color of the volume slider */
input[type="range"]#volume {
    accent-color: #00DEFA; 
}

#volume {
    width: 100px;
    height: 5px;
}

button#mute::before {
     content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgdmlld0JveD0iMCAwIDc1IDc1IiBoZWlnaHQ9IjE2IiB2ZXJzaW9uPSIxLjAiPjxwYXRoIGZpbGw9IiMwMDk0ZmYiIGQ9Ik00NC41MjcuNTMxYTIuNjcgMi42NyAwIDAgMC0yLjgyLjMxN0wxNS42NjQgMjEuNjJIMy4zMzZBMi42NjQgMi42NjQgMCAwIDAgLjY2OCAyNC4yOVY1MC45OGEyLjY2NyAyLjY2NyAwIDAgMCAyLjY2OCAyLjY2OGgxMi4zMjhsMjYuMDQzIDIwLjc3Yy40OC4zODMgMS4wNy41ODIgMS42NjQuNTgyLjM5NSAwIC43OS0uMDg2IDEuMTU2LS4yNjZhMi42NiAyLjY2IDAgMCAwIDEuNTEyLTIuNDAyVjIuOTM4YzAtMS4wMjgtLjU4Ni0xLjk2MS0xLjUxMi0yLjQwN1pNNDkuNDkyIDI1LjA3YTIuNjY2IDIuNjY2IDAgMCAwIDAgMy43NzRjNC4xODggNC4xOTEgNC4xODggMTMuMzkgMCAxNy41NzhhMi42NjYgMi42NjYgMCAwIDAgMCAzLjc3MyAyLjY1IDIuNjUgMCAwIDAgMS44ODcuNzg1IDIuNjUgMi42NSAwIDAgMCAxLjg4Ny0uNzg1YzYuMjI2LTYuMjIyIDYuMjI2LTE4LjkwMiAwLTI1LjEyNWEyLjY2NiAyLjY2NiAwIDAgMC0zLjc3NCAwWk02Ni42OTUgMTcuMTQ4YTIuNjc2IDIuNjc2IDAgMCAwLTMuNzczLS4xNjggMi42NzIgMi42NzIgMCAwIDAtLjE2OCAzLjc3YzMuNzQ2IDQuMTAyIDYuMDQzIDEwLjU0IDYuMTQgMTcuMjMuMDk4IDYuODQtMi4wNzggMTIuODA1LTUuOTcyIDE2LjM2OGEyLjY3MiAyLjY3MiAwIDAgMC0uMTY4IDMuNzdjLjUyNy41NzcgMS4yNS44NjYgMS45NjkuODY2LjY0NCAwIDEuMjg5LS4yMyAxLjgtLjY5NSA1LjAyLTQuNTkgNy44MjktMTIuMDIgNy43MTEtMjAuMzg3LS4xMTctNy45Ni0yLjkzMy0xNS43MTUtNy41MzktMjAuNzU0Wm0wIDAiLz48L3N2Zz4=');
}

button#mute.muted::before {
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmVyc2lvbj0iMS4wIiB2aWV3Qm94PSIwIDAgNzUgNzUiPjxwYXRoIGZpbGw9IiMwMDk0ZmYiIGQ9Im00MS4yMTkgMTQuMDg2LTEwLjM5NSAxMC4xNEgxOS4yYTYuNTgzIDYuNTgzIDAgMCAwLTYuNTg2IDYuNTgzdjEzLjc3YTYuNTcgNi41NyAwIDAgMCA2LjU4NiA2LjU3aDEuNWwyOC40ODUtMzQuMTg0Yy0uMzc1LTMuODI0LTUuMDk4LTUuNjY4LTcuOTY1LTIuODhabS05LjgwOSAzNy42OCA5LjgwOSA5LjUzOWMyLjk4NCAyLjg5NCA3Ljk4Ljc4IDcuOTgtMy4zNzVWMzAuNDA2Wm0wIDAiLz48cGF0aCBmaWxsPSIjZmYwMTZjIiBkPSJNNjQuMDIgMTAuOThDNTYuOTQgMy44OTggNDcuNTIgMCAzNy41IDBTMTguMDU5IDMuODk4IDEwLjk4IDEwLjk4QzMuODk4IDE4LjA2IDAgMjcuNDggMCAzNy41czMuODk4IDE5LjQ0MSAxMC45OCAyNi41MkMxOC4wNiA3MS4xMDIgMjcuNDggNzUgMzcuNSA3NXMxOS40NDEtMy44OTggMjYuNTItMTAuOThDNzEuMTAyIDU2Ljk0IDc1IDQ3LjUyIDc1IDM3LjVzLTMuODk4LTE5LjQ0MS0xMC45OC0yNi41MlpNNC41OSAzNy41YzAtMTguMTQ4IDE0Ljc2Mi0zMi45MSAzMi45MS0zMi45MSA3LjE0IDAgMTMuNzM4IDIuMjgxIDE5LjE0IDYuMTQ4TDE0LjYyNiA2MS4xNDFDOC40NDUgNTUuMTU2IDQuNTkgNDYuNzcgNC41OSAzNy41Wk0zNy41IDcwLjQxYTMyLjc4IDMyLjc4IDAgMCAxLTE4LjkxNC01Ljk4NEw2MC41NyAxNC4wNTVjNi4wNzUgNS45NjggOS44NCAxNC4yOCA5Ljg0IDIzLjQ0NSAwIDE4LjE0OC0xNC43NjIgMzIuOTEtMzIuOTEgMzIuOTFabTAgMCIvPjwvc3ZnPg==');
}

button#play-pause.paused::before {
     content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmVyc2lvbj0iMS4wIiB2aWV3Qm94PSIwIDAgNzUgNzUiPjxkZWZzPjxjbGlwUGF0aCBpZD0iYyI+PHBhdGggZD0iTTAgMGg3NXY3NUgweiIvPjwvY2xpcFBhdGg+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgeD0iMCUiIHk9IjAlIj48ZmVDb2xvck1hdHJpeCBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiIHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMSAwIi8+PC9maWx0ZXI+PG1hc2sgaWQ9ImIiPjxnIGZpbHRlcj0idXJsKCNhKSI+PHBhdGggZmlsbC1vcGFjaXR5PSIuNTUiIGQ9Ik0tNy41LTcuNWg5MHY5MGgtOTB6Ii8+PC9nPjwvbWFzaz48L2RlZnM+PGcgbWFzaz0idXJsKCNiKSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2MpIj48cGF0aCBmaWxsPSIjMDE0OTU5IiBkPSJNNzUgMzcuNWEzNy4yOSAzNy4yOSAwIDAgMS0uNzE5IDcuMzE2IDM4Ljc3NCAzOC43NzQgMCAwIDEtLjg5NCAzLjU3IDM3LjcxMyAzNy43MTMgMCAwIDEtMi44MTcgNi43OSAzNi4yMzUgMzYuMjM1IDAgMCAxLTEuODkgMy4xNTYgMzcuMTQzIDM3LjE0MyAwIDAgMS00LjY2NCA1LjY4NCAzNy4xNDMgMzcuMTQzIDAgMCAxLTUuNjg0IDQuNjY0IDM2LjIzNSAzNi4yMzUgMCAwIDEtMy4xNTYgMS44OSAzNy43MTMgMzcuNzEzIDAgMCAxLTYuNzkgMi44MTYgMzguNzc0IDM4Ljc3NCAwIDAgMS0zLjU3Ljg5NUEzNy4yOSAzNy4yOSAwIDAgMSAzNy41IDc1YTM3LjI5IDM3LjI5IDAgMCAxLTcuMzE2LS43MTkgMzguNzc0IDM4Ljc3NCAwIDAgMS0zLjU3LS44OTQgMzcuNzEzIDM3LjcxMyAwIDAgMS02Ljc5LTIuODE3IDM2LjIzNSAzNi4yMzUgMCAwIDEtMy4xNTYtMS44OSAzNy4xNDMgMzcuMTQzIDAgMCAxLTUuNjg0LTQuNjY0IDM3LjE0MyAzNy4xNDMgMCAwIDEtNC42NjQtNS42ODQgMzYuMjM1IDM2LjIzNSAwIDAgMS0xLjg5LTMuMTU2IDM3LjcxMyAzNy43MTMgMCAwIDEtMi44MTYtNi43OSAzOC43NzQgMzguNzc0IDAgMCAxLS44OTUtMy41N0EzNy4yOSAzNy4yOSAwIDAgMSAwIDM3LjVhMzcuMjkgMzcuMjkgMCAwIDEgLjcxOS03LjMxNmMuMjQyLTEuMjA0LjUzOS0yLjM5NS44OTQtMy41N2EzNy43MTMgMzcuNzEzIDAgMCAxIDIuODE3LTYuNzkgMzYuMjM1IDM2LjIzNSAwIDAgMSAxLjg5LTMuMTU2IDM3LjE0MyAzNy4xNDMgMCAwIDEgNC42NjQtNS42ODQgMzcuMTQzIDM3LjE0MyAwIDAgMSA1LjY4NC00LjY2NCAzNi4yMzUgMzYuMjM1IDAgMCAxIDMuMTU2LTEuODkgMzcuNzEzIDM3LjcxMyAwIDAgMSA2Ljc5LTIuODE2IDM4Ljc3NCAzOC43NzQgMCAwIDEgMy41Ny0uODk1QTM3LjI5IDM3LjI5IDAgMCAxIDM3LjUgMGEzNy4yOSAzNy4yOSAwIDAgMSA3LjMxNi43MTljMS4yMDQuMjQyIDIuMzk1LjUzOSAzLjU3Ljg5NGEzNy43MTMgMzcuNzEzIDAgMCAxIDYuNzkgMi44MTcgMzYuMjM1IDM2LjIzNSAwIDAgMSAzLjE1NiAxLjg5IDM3LjE0MyAzNy4xNDMgMCAwIDEgNS42ODQgNC42NjQgMzcuMTQzIDM3LjE0MyAwIDAgMSA0LjY2NCA1LjY4NCAzNi4yMzUgMzYuMjM1IDAgMCAxIDEuODkgMy4xNTYgMzcuNzEzIDM3LjcxMyAwIDAgMSAyLjgxNiA2Ljc5Yy4zNTYgMS4xNzUuNjUzIDIuMzY2Ljg5NSAzLjU3QTM3LjI5IDM3LjI5IDAgMCAxIDc1IDM3LjVabTAgMCIvPjwvZz48L2c+PHBhdGggZmlsbD0iI2ZmMDE2YyIgZD0ibTU4LjAxMiAzNy42Ni0yOS43MTkgMTguNWMtMS40NTMgMS40NS0zLjk1My40MjItMy45NTMtMS42MzNsLS4wNTktMzQuMDE1YzAtMi4wNTUgMi40OC0zLjA4MiAzLjk1LTEuNjNsMjkuNzggMTUuNDkzYy45MS45My45MSAyLjM3OSAwIDMuMjg1Wm0wIDAiLz48L3N2Zz4=');
}
    
button#play-pause::before {
     content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgdmlld0JveD0iMCAwIDc1IDc1IiBoZWlnaHQ9IjI0IiB2ZXJzaW9uPSIxLjAiPjxwYXRoIGZpbGw9IiNmNmE3ZDQiIGQ9Ik03NC43NzcgMzcuNWMwIDIwLjY2NC0xNi43MzggMzcuMzktMzcuMzg2IDM3LjM5QzE2LjczNCA3NC44OSAwIDU4LjE2NSAwIDM3LjUgMCAxNi44NTIgMTYuNzM0LjExIDM3LjM5LjExYzIwLjY1IDAgMzcuMzg3IDE2Ljc0MiAzNy4zODcgMzcuMzlabTAgMCIvPjxwYXRoIGZpbGw9IiNlYWY2MDAiIGQ9Ik0yNi43MDMgMjUuMDRoNy4xMjV2MjQuOTE3aC03LjEyNVpNNDAuOTUzIDI1LjA0aDcuMTIxdjI0LjkxN2gtNy4xMlptMCAwIi8+PC9zdmc+');
}


button#fullscreen::before {
   content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgdmlld0JveD0iMCAwIDc1IDc1IiBoZWlnaHQ9IjE2IiB2ZXJzaW9uPSIxLjAiPjxwYXRoIGZpbGw9IiMxMGYxYTciIGQ9Ik0wIDB2MjguMTI1aDYuMjVWNi4yNWgyMS44NzVWMFptNDYuODc1IDB2Ni4yNUg2OC43NXYyMS44NzVINzVWMFpNMCA0Ni44NzVWNzVoMjguMTI1di02LjI1SDYuMjVWNDYuODc1Wm02OC43NSAwVjY4Ljc1SDQ2Ljg3NVY3NUg3NVY0Ni44NzVabTAgMCIvPjwvc3ZnPg==');
}

button#fullscreen.exit::before {
   content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgdmlld0JveD0iMCAwIDc1IDc1IiBoZWlnaHQ9IjE2IiB2ZXJzaW9uPSIxLjAiPjxwYXRoIGZpbGw9IiNmZjAxNmMiIGQ9Ik03MC44OTggNDYuNDczaC0xOC4xMmE0LjA5MiA0LjA5MiAwIDAgMC00LjA5NCA0LjA5djIwLjMzNWE0LjA5MyA0LjA5MyAwIDEgMCA4LjE4MyAwVjU1LjM0NGgxNC4wMzFhNC4wOTIgNC4wOTIgMCAwIDAgNC4wOTQtNC4wOXYtLjY5MWE0LjA5NyA0LjA5NyAwIDAgMC00LjA5NC00LjA5Wk0yMi4yMDcgNDYuNDczSDQuMDg2YTQuMDkyIDQuMDkyIDAgMCAwLTQuMDk0IDQuMDl2LjY5YTQuMDkyIDQuMDkyIDAgMCAwIDQuMDk0IDQuMDloMTQuMDMxdjE1LjU1NWE0LjA5MiA0LjA5MiAwIDEgMCA4LjE4NCAwVjUwLjU2M2E0LjA5MiA0LjA5MiAwIDAgMC00LjA5NC00LjA5Wk03MC44OTggMTkuNjRoLTE0LjAzVjQuMDg3YTQuMDkyIDQuMDkyIDAgMSAwLTguMTg0IDB2MjAuMzM2YTQuMDkyIDQuMDkyIDAgMCAwIDQuMDkzIDQuMDloMTguMTIxYTQuMDkxIDQuMDkxIDAgMCAwIDQuMDktNC4wOXYtLjY4OGE0LjA5MiA0LjA5MiAwIDAgMC00LjA5LTQuMDkzWk0yMi4yMDctLjAwNGE0LjA5MSA0LjA5MSAwIDAgMC00LjA5IDQuMDlWMTkuNjRINC4wODZhNC4wOTMgNC4wOTMgMCAwIDAtNC4wOTQgNC4wOTN2LjY4OGE0LjA5MyA0LjA5MyAwIDAgMCA0LjA5NCA0LjA5NGgxOC4xMjFhNC4wOTMgNC4wOTMgMCAwIDAgNC4wOTQtNC4wOTRWNC4wODZhNC4wOTIgNC4wOTIgMCAwIDAtNC4wOTQtNC4wOVptMCAwIi8+PC9zdmc+');
}
.fullscreen .video-container-background { 
    border-radius: 0;
}

.fullscreen .video-container {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

.fullscreen .video {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.fullscreen .controls {
    bottom: 0;
    width: 100%;
    border-radius: 0;
}

#quality-select {
    background-color: #4B2C2C;
    color: #EFFA00AB;
    border: none;
    padding: 5px;
    font-size: 14px;
    border-radius: 25px;
    border: none;
}
#video-time {
    color: #F302A1;
    font-size: 14px;
    margin-left: 10px;
}

#video-list {
    position: relative;
    top: 24px;
    width: 100%;
    min-height: calc(100% - 574px);
    height: auto;
    display: grid;
    gap: 0;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.63);
}

#video-list::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #501e01, #f3fe3b, #f3fe3b, #501e01);
}
#video-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #501e01, #f3fe3b, #f3fe3b, #501e01);
}

.singer-group h2 {
   padding: 15px;
   color: #C09000;
}

/* Individual video item */
.video-item {
    display: inline-block;
    background-color: #B1007D69;
    border: 1px solid #FFC107;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    text-align: center;
    transition: transform 0.2s, color 0.2s;
    width: 280px;
    cursor: pointer;
    margin: 16px 6px;
}

.video-item:hover {
    transform: scale(1.05);
}


/* Video title */
.video-item h3 {
    color: #00C3B9AD;
    font-size: 18px;
    margin: 10px 0;
}

.video-item:hover h3 {
    color: #C3BF00AD;
}

/* Thumbnail image */
.video-item img {
    border-radius: 4px;
    width: 280px;
    height: auto;
    max-height: 157.5px;
    object-fit: contain;
    aspect-ratio: 16 / 9; 
}

.video-item:hover img {
    transform: scale(1.05);
}

/* Singer name */
.video-item p {
    color: #C39300AD;
    font-size: 14px;
    margin: 5px 0 0;
}

.video-item:hover p {
    color: #00C3C3AD;
}


.Footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    color: #DBC1CF;
    background-color: #17000D;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.Footer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.6px;
    background: linear-gradient(to right, #501e01, #f3fe3b, #f3fe3b, #501e01);
}

.Footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.6px;
    background: linear-gradient(to right, #501e01, #f3fe3b, #f3fe3b, #501e01);
}

.AllRightsReserved {
    font-size: 14px;
    font-family: "Segoe UI",monospace;
    color: #fbebc7;
}

.buttonContainer {
    position: relative;
    left: 0;
    width: 100%;
    height: 60px;
    margin: 40px 0;
}
#showFormButton {
    background-color: #f3fe3b;
    color: #501e01;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}
       

#showFormButton:hover {
    background-color: #501e01;
    color: #f3fe3b;
}
        
 #hideFormButton {
    background-color: red;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 auto;
}
#hideFormButton:hover {
    background-color: black;
}

#uploadForm {
    display: none;
    background-color: #F2B3D2;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #D27100;
    box-shadow: 0 0 10px #00EEFF;
    margin-top: 20px;
    margin: 0 auto;
}

label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

input[type="text"],
textarea,
input[type="file"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #DEA700;
    border-radius: 4px;
    background-color: #F2CFE0B8;
    color: #00EEFF;
}

button[type="button"] {
    background-color: #FFC107;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button[type="button"]:hover {
    background-color: #FADA79CC;
}

.status {
    color: #00A5FE;
    text-align: center;
}

.status-success {
    color: green;
    text-align: center;
}

.status-error {
    color: red;
    text-align: center;
}


.progress-container {
    width: 100%;
    background-color: #F6A4EB;
    margin-top: 10px;
}

.progress-bar {
    width: 0;
    height: 20px;
    background-color: #00A5FE;
}
       

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}


@keyframes draw {
     0% {
        stroke-dashoffset: 4500;
     }
     100% {
        stroke-dashoffset: 0;
     }
}

@keyframes zoom-in-zoom-out-Loding {
      0% {
        transform: scale(1, 1);
      }
      50% {
        transform: scale(1.5, 1.5);
      }
      100% {
        transform: scale(1, 1);
      }
}
@keyframes fadeIn {
     0%, 50% {
        opacity: 0
     }
     100% {
        opacity: 1
     }
}
@keyframes fadeOut {
      0%, 50% {
        opacity: 1
      }
      100% {
        opacity: 1
      }
}

@media only screen and (min-width: 269px) and (max-width: 631px) {

    .controls {
        display: flex;
    }

    #progress {
        width: 20px;
        flex: 1;
        margin: 0 6px;
        height: 4px;
    }

    #volume {
        width: 28px;
        height: 4px;
    }


    #quality-select {
        padding: 1px;
        font-size: 8px;
    }
    #video-time {
        font-size: 10px;
        margin-left: 4px;
    }
}

@media only screen and (min-width: 600px) and (max-width: 834px) {
.video-container-background {
            width: 86%;
            padding: 4px; 
        }
        .LodingLogoImg  {
            width: 40%;
            height: auto;
            }
           .LogoImg {
            width: 160px;
            width: 160px;
           }
           
           .singer-group h2 {
            padding: 4px;
           }
           .video-item h3 {
            font-size: 18px;
            margin: 4px 0;
           }

           .video-item:hover h3 {
            color: #C3BF00AD;
           }

           /* Singer name */
           .video-item p {
            font-size: 6px;
            margin: 4px 0 0;
           }
        }
@media only screen and (max-width: 600px) {
        .video-container-background {
            width: 96%;
            padding: 2.6px; 
        }
            .LodingLogoImg  {
            width: 40%;
            height: auto;
           }
            
           .LogoImg {
            width: 160px;
            width: 160px;
           }
           
           .singer-group h2 {
            padding: 4px;
           }
           .video-item h3 {
            font-size: 18px;
            margin: 4px 0;
           }

           .video-item:hover h3 {
            color: #C3BF00AD;
           }

           /* Singer name */
           .video-item p {
            font-size: 6px;
            margin: 4px 0 0;
           }
        }