html {
     height: 100%;
     margin: 0;
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     height: 100%;
     margin: 0;
     display: flex;
     flex-direction: column;
     min-height: 120vh;
     margin: 0;
     padding: 0;
     background: linear-gradient(135deg, #e0c3fc, #8ec5fc);
     background-size: cover;
     background-attachment: fixed
 }

 #app {
     flex: 1;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 50px;
     width: 100%;
 }

 .content {
     display: flex;
     max-width: 800px;
     min-width: 800px;
     width: 100%;
     background: #fff;
     border-radius: 20px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
     margin-bottom: 25px;

 }


 .player {
     flex: 0;
     padding: 10px;
     width: 35%;
     text-align: center;
     border-right: 1px solid #e0e0e0;
     padding: 20px;
     color: #333;
 }

  .profile-image {
     margin: 20px auto;
     width: 180px;
     height: 180px; 
     border-color: rgb(248, 35, 78);
     border-style: solid;
     border-width: 5px;
     overflow: hidden;
     border-radius: 50%;
     animation: normal-rotate 10s linear infinite;
     transition: all 2.0s;
 }

 .profile-image img {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     object-fit: cover;
 }

 .progress-bar-container {
     width: 100%;
     margin: 10px 0;
     background: #e0e0e0;
     border-radius: 5px;
     overflow: hidden;
 }

 .progress-bar {
     height: 5px;
     background: #ff2d55;
     width: 45%;
 }

 .controls {
     display: flex;
     justify-content: space-around;
     align-items: center;
     margin-top: 15px;
 }

 .controls button {
     background: transparent;
     border: none;
     font-size: 20px;
    cursor: pointer;
    color: #f94163;
    padding: 10px;
}
.controls button:hover{
    scale:1.10;
    transition: all 0.3s;
}

.controls .play-button {
    font-size: 30px;
    color: #ff2d55;
}

img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

.random-song-button {
    font-size: 18px;
    font-weight: 600;
    background-color: #ffffff;
    color: rgb(253, 28, 47);
    cursor: pointer;
    border:none;
    border-radius: 15px;
    transition: background 0.3s ease, transform 0.3s ease; 
}
.random-song-button:hover {
    background-color: #ffed2a24;
transform: scale(1.05); 
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-7px); }
    50% { transform: translateX(7px); }
    75% { transform: translateX(-7px); }
    100% { transform: translateX(0); }
}
.shake {
    animation: shake 0.3s ease-in-out;
}
@keyframes quick-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.quick-rotate {
    animation: quick-rotate 0.5s linear;
}

@keyframes normal-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes back-rotate {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

.normal-rotate {
    animation: normal-rotate 10s linear infinite;
}

 .intro-panel {
     flex: 1;
     padding: 20px;
     position: relative;
     overflow: hidden;
     justify-content: left;
     align-items: left;
 }

 .intro-panel h2 {
     margin-top: 0;
     margin-bottom: 0;
     text-align: left;
     font-size : 26px;
     color: #ff2d55;
 }

 .intro-panel .button-container {
     width: 100%;
     font-weight: 500;
     font-size: 1.2em;
     display: flex;
     gap: 10px;
     color:#df2a2a;
 }
 .button-container button{
    display:flex;
    align-items: center;
    padding:0;
    position:relative;
    max-height: 25px;
    width:fit-content;
 }
 .button-container button i {
    color: #ff2d55;
    margin-right: 8px;
    position: relative;
 }
 .button-container sup{
    font-size: 0.45em;
    color: #ff411e;
    margin:0;
    position: absolute;
    top:-5px;
    right:-9px;
 }

 .intro-panel .link-button {
     font-size: 20px;
     border: 3px;
     border-color: #007bff;
     background-color: #fdfdfd;
     color: rgb(0, 0, 0);
     cursor: pointer;
     border-radius: 5px;
     outline:none;
     text-align: left;
     padding: 10px;
     text-decoration: none;
     transition: background-color 0.3s ease;
     display: flex;
     align-items: center;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
 }
 .link-button:hover {
    /* background-color: #f094a37a;*/

    background-color: #ffed2a24;
     color: rgb(27, 22, 24);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }


 .intro-panel .link-button{
    display: flex;
    align-items: center;
 }

 .intro-panel .intro-background {
     position: absolute;
     top: 30%;
     left: 0;
     width: 95%;
     height: 65%;
     /*background: url('ForWeb.JPG') no-repeat center center;*/
     background-size: cover;
     opacity: 0.68;
     pointer-events: none;
     margin-top: 1%;
     margin-left: 2%;
     margin-right: 5%;
     border-radius: 10px;
 }

 .intro-text {
     position: absolute;
     top: 30%;
     left: 0;
     width: 95%;
     height: 65%;
     margin-top: 1%;
     margin-left: 2%;
     margin-right: 5%;
     border-radius: 10px;
     display: flex;
     align-items: left;
     justify-content: left;
     color: #000000;
     overflow: hidden;
     background-color: rgba(255, 255, 255, 0.8);
     padding: 0;
 }
 .video-container iframe{
	 position: absolute;
	 top:0;
	 left:0;
	 width: 100%;
	 height: 95%;
	 border: none;
	 border-radius:10px;
 }
 .video-container{
	 position:relative;
	 width:100%;
	 padding-bottom:5%;
	 border-radius: 10px;
	 overflow:hidden;
 }

 .intro-text p {
    text-align: left;
    padding: 10px;
    width: 80%;
    height: 80%;
     font-size: 22px;
     font-weight: 400;
     margin: 0;
     line-height: 2.5;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
     color: black;

 }

.intro-panel .button-container button
{
    color: #333;

}
.intro-panel .button-container i {
    color: #ff2d55; /* Ensuring icons and text inside buttons in the button-container are this color */
}


#world-clock {
    position: fixed;
    top: 10px;
    right: 10px;
    background: #f3f3f360;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    padding: 10px;
    text-align: right;
    display: none;
}

.time-zone {
    margin-bottom: 10px;
}

#world-clock .time-zone:last-c/backhild {
    margin-bottom: 0;
}

.header {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    min-width: 800px;
}

.fa-dice,
.fa-blog {
    color: #ff2d55;
}

.fa-house,
.content .fa-bilibili {
    color: #007bff
}

.search-container {
    display: flex;
}




.list-container {
    padding-top: 5px;
    padding-left: 15px;
    padding-right: 15px;
    color: #333;
    background: #fff;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    max-width: 770px;
    min-width: 770px;
    width: auto;
}

.search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.search-container input,
.search-container select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    outline: none;
    width: 48%;
}

.search-container input:focus,
.search-container select:focus {
    border-color: #007aff;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    border-radius: 5px;
    overflow: hidden;
}

th,
td {
    text-align: center;
    padding: 10px 20px;
}

th {
    background-color: #f5f5f5;
    color: #fc2a51;
    font-weight: bold;
    font-size: large;
}

tr {
    border-bottom: 1px solid #e0e0e0;
}

td {
    color: #666;
    padding: 10px;
    text-align: center;
    font-size: 22px;
}

th.songname,
td.songname {
    width: 45%;
}

th.artist,
td.artist {
    width: 25%;
}

th.genre,
td.genre {
    width: 20%;
}

th.cpbutton,
td.cpbutton {
    width: 5%;
}
th.bplay,
td.bplay {
    width: 5%;
}


/*
tr:nth-child(odd) {
    background-color: #ffffff;
}

tr:nth-child(even) {
    background-color: #efefef;
}
*/

table tr {
    cursor: pointer;
     transition: background-color 0.5s ease;
}

tr:hover {
    background-color: #ffed2a24;
}


.copy-button {
    padding: 3px 12px;
    border: none;
    background-color: #f31246;
    color: rgb(255, 255, 255);
    cursor: pointer;
    border-radius: 10px;
    font-size: 22px;
}

.bplay-button{
    padding: 3px 10px;
    border: none;
    background-color: #f31246;
    color: white;
    cursor: pointer;
    border-radius: 10px;
    font-size: 22px;
}
.copy-button:hover,
.bplay-button:hover{

    background-color: #005bb5;
    scale: 1.05;
}

.copy-confirmation {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff2d55ea;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    gap: 5px;
    animation: returnUp 0.7s ease-in-out forwards;
}
.copy-confirmation i{
    color: mediumspringgreen;
}

.copy-confirmation.show {
    animation: dropDown 0.7s ease-out forwards;

}
@keyframes dropDown {
    0% {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    30% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes returnUp {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    70% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
}

  .back-to-top {
      position: fixed;
      bottom: 40px;
      left: 40px;
      background-color: #df2b2b;
      color: white;
      opacity: 0;
      cursor: pointer;
      font-size: 22px;
      line-height: 46px;
      width: 46px;
      height: 45px;
      visibility: hidden;
      border-radius: 53%;
      align-items: center;
      text-align: center;
      box-shadow: 2 2px 5px rgba(0, 0, 0, 0.3);
      /*text-align: center;*/
      transition: background-color 0.3s;
  }

  .back-to-top:hover {
      background-color: #2c8af5;
  }

  .blinking {
      animation: blinkingText 1.2s infinite;
      font-size: xx-small;
      vertical-align: 120%;
      text-align: left;
      font-style: italic;

  }

  @keyframes blinkingText {
      0% {
          color: rgb(245, 22, 96);
      }

      50% {
          color: transparent;
      }

      100% {
          color: rgb(245, 22, 96);
      }
  }

  .back-to-top.show {
      opacity: 1;
      transform: trasnslateX(0);
      visibility: visible;
  }

  .text-container {
      text-align: center;
      font-size: 16px;
  }

  .back-to-top i {
      margin-right: 5px;
  }

  [v-cloak] {
      display: none;
  }

  footer {
      text-align: center;
      margin-top: 20px;
      padding: 15px;
  }

  footer p {
      margin: 0;
      padding: 0;
      color: #333;
  }

  footer a {
      color: #007bff;
  }

  .video-player-container {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 640px;
      height: 480px;
      z-index: 1000;
  }

  .video-player-container iframe {
      width: 100%;
      height: 100%;
  }

.video-controls {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: -40px;
    right: 0px;
}

.video-controls button {
    background-color: #ff0055;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
    font-size: 16px;
}

.video-controls button:hover {
    background-color: #005bb5;
}
.resize-button {
    margin-right: 10px;
}

.resize-button i {
    font-size: 18px;
}


.video-player-container.minimized {
    width: 150px;
    height: 0px;
}

.video-player-container.medium {
    width: 640px;
    height: 480px;
}

.video-player-container.large {
    width: 70%;
    height: 70%;
    min-width: 768px;
}




  @media only screen and (hover: none) and (pointer: coarse) {

      .random-song-button {
          font-size: 16px;
          align-items: center;
          text-align: center;
          max-height: 30px;
      }


  }