.mybottom a{
 
 text-decoration:none;
 
 
 
 }
 
 .thecardtest a{
 
 text-decoration:none;
 
 
 }
 
 .onetwo{
 margin-bottom:40px;
 }
 
 .mysong{
 
 font-size:18px;
 text-align:center;
 color:#00ccff;
 
 
 }
 
 
 
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 
 
 
 
 
 .posts{
 
 font-size:18px;
 text-align:center;
 margin-top:20px;
 color:#12054a;
 }
 
 .container10 {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 margin:8px;
 }
 
 .paris {
 display: flex;
 align-items: center;
 margin-bottom: 20px;
 
 padding-bottom: 20px;
 }
 
 .imageparis  {
 width: 150px;
 height: 150px;
 margin-right: 20px;
 border: 1px solid #00ccff;;
 border-radius:8px;
 }
 
 .description {
 font-size: 16px;
 }
 .onefive{
 
 font-size:22px;
 font-weight:bold;
 color:#00ccff;
 margin:12px;
 }
 
 
 /* Dark Mode */
 @media (prefers-color-scheme: dark) {
 
 
 
 .thecardtest {
      background-color: #1e1e1e;
      border: 1px solid #333;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 1.5rem;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
      max-width: 500px;
      
    
    }
 
    .card-img {
      width: 100%;
      height: auto;
      display: block;
    }
 
    .card-body {
      padding: 1rem;
    }
 
    .card-body h2 {
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
      font-weight: 700;
      color: #ffffff;
    }
 
    .card-body p {
      font-size: 0.95rem;
      color: #cccccc;
      line-height: 1.4;
    }
    
 
 
 
 
 .playsong{
 
 text-align:center;
 color:#00ccff;
 font-size:22px;
 font-family:serif;
 }
 
 
 body {
 font-family: Arial, sans-serif;
 background: #111;
 color: #f0f8ff;
 }
 
 /* Navbar */
 .navbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 20px;
 /*
 background: linear-gradient(to right, #12054a, #08a9df);
 border-bottom: 1px solid #ccc;
 
 background:black;
 
 */
 background: #ffffff;
 
 
 
 
 
 position: fixed;
 top: 0;
 width: 100%;
 height: 60px;
 z-index: 3000;
 /*
 
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.3);
 */
 transition: 0.3s;
 
 }
 
 .nav-left {
 display: flex;
 align-items: center;
 gap: 10px;
 }
 
 .hamburger {
 width: 30px;
 height: 20px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 cursor: pointer;
 }
 
 .bar {
 height: 3px;
 width: 100%;
 background: #00CFFF;
 border-radius: 5px;
 transition: all 0.3s ease;
 }
 
 .hamburger.active .bar:nth-child(1) {
 transform: rotate(45deg) translate(5px, 5px);
 }
 
 .hamburger.active .bar:nth-child(2) {
 opacity: 0;
 }
 
 .hamburger.active .bar:nth-child(3) {
 transform: rotate(-45deg) translate(5px, -5px);
 }
 
 .logo-img {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 object-fit: cover;
 }
 
 .nav-right {
 display: flex;
 align-items: center;
 gap: 10px;
 }
 
 .search-container {
 display: flex;
 align-items: center;
 position: relative;
 }
 
 .search-icon {
 font-size: 24px;
 color: #00CFFF;
 cursor: pointer;
 }
 
 .search-input {
 display: none;
 height: 30px;
 border: none;
 border-radius: 20px;
 padding: 5px 10px;
 outline: none;
 margin-left: 10px;
 transition: width 0.3s ease;
 }
 
 .search-input.active {
 display: block;
 width: 180px;
 }
 
 /* Menu */
 .menu-links {
 position: fixed;
 top: 60px;
 left: -100%;
 width: 100%;
 height: calc(100vh - 60px);
 background: #111;
 color: white;
 display: flex;
 flex-direction: column;
 
 padding: 40px 20px;
 
 transition: left 0.4s ease;
 z-index: 2500;
 padding-top:10px;
 }
 
 .menu-links.active {
 left: 0;
 }
 
 .menu-links a {
 color: #00CFFF;
 text-decoration: none;
 font-size: 18px;
 margin-bottom: 20px;
 margin-top:2px;
 display: flex;
 align-items: center;
 margin:15px 0;
 }
 
 .menu-links a:hover {
 color: white;
 }
 
 
 
 .menu-links a {
 margin: 20px 0; /* Increase vertical spacing between list items */
 
 }
 
 .menu-links li a {
 display: block;
 padding: 10px 0;
 
 }
 
 /* Slideshow */
 .slideshow-container {
 margin-top: 70px;
 width: 100%;
 height: 300px;
 position: relative;
 overflow: hidden;
 background: linear-gradient(to bottom, #e7e7e7, #f7f7f7);
 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 }
 
 .slide {
 position: absolute;
 width: 100%;
 height: 100%;
 opacity: 0;
 transition: opacity 1s;
 }
 
 .slide.active {
 opacity: 1;
 }
 
 .slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 }
 
 /* Bottom Navigation */
 .bottom-nav {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 background: #111;
 display: flex;
 justify-content: space-around;
 align-items: center;
 height: 60px;
 /*
 box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
 */
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 z-index: 1000;
 
 }
 
 .bottom-nav i {
 font-size: 24px;
 color: #00CFFF;
 transition: color 0.3s;
 cursor: pointer;
 }
 
 .bottom-nav i:hover {
 color: white;
 }
 
 /* Particles Background */
 #particles-js {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 
 }
 
 
 .image-container {
 display: flex;
 overflow-x: auto;
 scroll-behavior: smooth;
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 
 
 }
 
 
 
 
 
 
 
 
 
 
 .imageitemtry {
 width: 150px; /* adjust the width as needed */
 height: 150px; /* adjust the height as needed */
 margin: 10px; /* adjust the margin as needed */
 object-fit: cover;
 border-radius:50%;
 border:1px solid #12054a;
 /*
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 */
 }
 
 .image-container2 a{
 
 text-decoration:none;
 
 }
 
 
 .image-item{
 
 margin:10px;
 display:flex;
 flex-direction:column;
 flex-shrink:0;
 background-color:#f7f7f7f7;
 align-items:center;
 flex-shrink:0;
 padding:10px;
 border-radius: 10px; /* Add a border radius */
 /*
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 */
 /*
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a box shadow */
 
 
 transition: transform 0.2s ease-in-out; /* Add a transition effect */
 */
 
 flex: 0 0 auto;
 margin-right: 10px; /* some space between items */
 }
 
 
 
 
 
 
 
 .top-songs, .featured-artists {
 display: flex;
 overflow-x: auto;
 gap: 15px;
 padding: 20px;
 scroll-behavior: smooth;
 }
 .top-songs::-webkit-scrollbar, .featured-artists::-webkit-scrollbar {
 display: none;
 }
 .song-item, .artist-item {
 flex: 0 0 auto;
 text-align: center;
 background: #111;
 padding: 10px;
 border-radius: 12px;
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 width: 150px;
 }
 .song-item:hover, .artist-item:hover {
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.6);
 transform: translateY(-5px);
 }
 .song-item img, .artist-item img {
 width: 150px;
 height: 150px;
 object-fit: cover;
 border-radius: 8px;
 border: 3px solid #00CFFF;
 
 
 }
 
 
 .image-item a{
 display:block;
 
 }
 
 .image-item:hover {
 transform: scale(1.05); /* Add a hover effect */
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Enhance the box shadow on hover */
 }
 
 .image-text {
 font-size: 0.8rem;
 text-align: center;
 margin-top: 5px;
 color: #333; /* Change the text color */
 font-weight: bold; /* Make the text bold */
 }
 /* image container 2*/
 .image-container2 {
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 
 
 
 }
 
 
 /*
 
 .image-container2 img {
 width: 120px; /* adjust the width as needed */
 /* height: 120px; /* adjust the height as needed */
 /* margin: 10px; /* adjust the margin as needed */
 /* object-fit: cover;
 /*border-radius:12px;
 }
 */
 
 
 
 .imageitemtry2 {
 width: 150px; /* adjust the width as needed */
 height: 150px; /* adjust the height as needed */
 margin: 10px; /* adjust the margin as needed */
 object-fit: cover;
 
 border-radius:12px !important;
 border:1px solid #12054a;
 /*
 
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 */
 }
 
 .imageitemtry2 a {
 text-decoration:none;
 
 }
 
 
 .image-item2 a {
 text-decoration: none;
 color: #333;
 font-size: 0.8rem;
 text-align: center;
 margin-top: 5px;
 /*
 transition: color 0.2s ease-in-out; /* Add a transition effect to the text */
 */
 }
 
 .image-item2 a:hover {
 color: purple; /* Change the text color on hover */
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 .image-item2, .image-item, .image-item3 {
 flex: 0 0 auto;
 text-align: center;
 background: #111;
 padding: 10px;
 border-radius: 12px;
 /*
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 */
 width: 150px;
 }
 .song-item:hover, .artist-item:hover {
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.6);
 transform: translateY(-5px);
 }
 .song-item img, .artist-item img {
 width: 150px;
 height: 150px;
 object-fit: cover;
 border-radius: 8px;
 border: 3px solid #00CFFF;
 }
 .image-text {
 color: #00CFFF;
 font-weight: bold;
 margin-top: 8px;
 text-align: center;
 }
 
 .image-item2 img{
 width: 150px;
 height: 150px;
 object-fit: cover;
 border-radius: 8px;
 border: 2px solid #00CFFF;
 }
 .image-item2:hover, .image-item3:hover {
 /*
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.6);
 transform: translateY(-5px);
 */
 }
 
 
 
 
 
 .image-item3 img  {
 width: 150px;
 height: 150px;
 object-fit: cover;
 border-radius: 8px;
 border: 3px solid #00CFFF;
 }
 .image-item3:hover {
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.6);
 transform: translateY(-5px);
 }
 .image-item3 {
 flex: 0 0 auto;
 text-align: center;
 background: #111;
 padding: 10px;
 border-radius: 12px;
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 
 width: 150px;
 }
 
 
 
 
 .image-item3 a {
 text-decoration: none;
 color: #333;
 font-size: 0.8rem;
 text-align: center;
 margin-top: 5px;
 /*
 transition: color 0.2s ease-in-out; /* Add a transition effect to the text */
 */
 }
 .me{
 margin:8px;
 color:#12054a;
 
 
 }
 .me2{
 
 color:#12054a;
 
 text-align:center;
 font-size:18px;
 margin-top:60px;
 
 }
 
 
 .image-item2{
 
 margin:10px;
 display:flex;
 flex-direction:column;
 align-items:center;
 flex-shrink:0;
 }
 .image-item a{
 display:block;
 
 }
 
 
 
 
 
 /*style for the slides show*/
 
 
 .slideshow-container {
 position: relative;
 width: 100%;
 height: 300px; /* adjust the height as needed */
 overflow: hidden;
 background-image: linear-gradient(to bottom, #f7f7f7, #e7e7e7);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 
 position: relative;
 z-index: 1;
 
 }
 
 
 .slideshow-container {
 margin-top: calc(54px + 6px); /* adjust the margin top to match the navbar height and any additional padding */
 }
 
 .slide {
 position: absolute;
 width: 100%;
 height: 100%;
 transition: opacity 1s;
 }
 
 .slide.active {
 opacity: 1;
 z-index: 1;
 }
 
 .slide:not(.active) {
 opacity: 0;
 z-index: 0;
 }
 
 .slide img {
 width: 100%;
 height: 100%; /* adjust the height as needed */
 object-fit: cover;
 }
 
 .slide-button {
 position: absolute;
 bottom: 10%;
 left: 50%;
 transform: translateX(-50%);
 
 padding: 10px 20px;
 text-decoration:none;
 
 border: none;
 
 cursor: pointer;
 
 padding: 10px 30px 10px 30px;
 border-radius: 20px;
 
 border: 0px;
 
 background: linear-gradient(to right, #08a9df, #12054a);
 color: #ffffff;
 }
 
 
 
 
 /* style for images and text on one line  ie  for recomended songs */
 .image-text-container {
 display: flex;
 align-items: center;
 background-image: linear-gradient(to bottom, , #5E72EB);
 }
 
 
 .image{
 width: 100px; /* adjust the width as needed */
 height: auto; /* adjust the height as needed */
 margin-right: 20px; /* adjust the margin as needed */
 border-radius:8px;
 border: 1px solid #12054a;
 
 
 }
 
 .image-text_container{
 
 display:flex;
 align-items:flex-start;
 }
 .image-text-container {
 display: flex;
 align-items: center;
 background-image: linear-gradient(to bottom, , #5E72EB);
 margin: 20px; /* add margin to create gap from the edges */
 }
 
 .image-text-container + .image-text-container {
 margin-top: 40px; /* add margin top to create gap between containers */
 }
 
 .text {
 font-size: 12px; /* adjust the font size as needed */
 font-family: Arial, sans-serif; /* adjust the font family as needed */
 margin-bottom:10px;
 color:ffffff;
 }
 .text-container{
 display:flex;
 flex-direction: column;
 
 }
 /* style for the song in the for you       */
 .container1 {
 width: 80%; /* adjust the width as needed */
 height: 400px; /* adjust the height as needed */
 margin: 40px auto; /* adjust the margin as needed */
 /* adjust the gradient colors as needed */
 border: 1px solid #ddd; /* adjust the border color and width as needed */
 border-radius: 10px; /* adjust the border radius as needed */
 /* adjust the box shadow as needed */
 position:relative;
 
 background: linear-gradient(to bottom, #f7f7f7, #e7e7e7);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 
 .centered-image {
 position: absolute; /* add this property */
 top: 40%; /* adjust the top position as needed */
 left: 50%; /* add this property */
 transform: translateX(-50%); /* add this property */
 width: 40%; /* adjust the width as needed */
 height: auto; /* add this property */
 border-radius: 40%; /* add this property */
 /* add this property */
 
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 
 
 .text1{
 font-size: 18px; /* adjust the font size as needed */
 font-family: Arial, sans-serif; /* adjust the font family as needed */
 text-align:center;
 margin-top:20px;
 color:black;
 }
 
 .text2{
 font-size: 18px; /* adjust the font size as needed */
 font-family: Arial, sans-serif; /* adjust the font family as needed */
 text-align:center;
 margin-top:12px;
 color:black;
 }
 
 
 
 #rotating-image {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100px; /* adjust the size as needed */
 height: 100px; /* adjust the size as needed */
 border-radius: 40%;
 }
 .rotate {
 animation: rotate 2s linear infinite;
 }
 
 @keyframes rotate {
 0% {
 transform: translate(-50%, -50%) rotate(0deg);
 }
 100% {
 transform: translate(-50%, -50%) rotate(360deg);
 }
 }
 
 #rotating-image {
 position: absolute;
 top: 40%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100px; /* adjust the size as needed */
 height: 100px; /* adjust the size as needed */
 border-radius: 40%;
 border:4px solid #6082B6;
 }
 
 /* style for recent uploads ie two images on the same line  */
 
 
 .picture-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 }
 
 .picture-row {
 display: flex;
 
 justify-content: space-around;
 
 
 align-items: center;
 margin-bottom: 20px;
 }
 
 .picture {
 width: 45%;
 /*
 border-radius: 8px;
 */
 overflow: hidden;
 
 }
 
 .picture img {
 width: 150px;
 height: 150px;
 }
 
 .recentimages{
 
 width: 150px;
 height: 150px;
 
 
 }
 
 .uto{
 text-align:center;
 font-family:serif;
 color:black;
 }
 .one{
 text-align:margin;
 margin:2px;
 font-size:25px;
 font-family:serif;
 color:#FFFFFF;
 }
 .onethree{
 text-align:margin;
 margin:8px;
 font-size:20px;
 font-family: sans serif;
 font-weight:bold;
 color:#12054a;
 }
 .meu{
 margin:8px;
 }
 
 
 .my-images {
 text-align: center;
 margin:40px auto;
 width: 80%;
 
 }
 
 /* adjust the height as needed */
 /* adjust the margin as needed */
 
 /*
 .my-images img {
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 
 
 max-width: 90%; 
 height:300px; 
 
 }
 */
 
 .my-images img{
 
 
 object-fit:cover;
 
 width:100%;
 }
 
 
 .my-images a {
 text-decoration: none;
 color: #333;
 font-size:18px;
 }
 .image-item a{
 
 text-decoration:none;
 
 
 }
 
 
 .some-words a {
 text-decoration: none;
 text-align:center;
 color:#fff;
 
 font-family:serif;
 font-size:18px;
 align-items:center;
 margin:4px;
 }
 .some-words {
 text-decoration: none;
 text-align:center;
 color:#fff;
 }
 .some-words a:hover{
 text-decoration:none;
 color:#00ccff;
 
 }
 .my-images p {
 font-size: 18px;
 margin-top: 10px;
 }
 .gradients{
 
 
 background-color: #f1f1f1;
 
 }
 
 .gradients2{
 
 
 background-color: #6082B6;
 
 }
 
 .gradient3{
 
 
 
 
 background-color:#111;
 /*
 border:1px solid #ddd;
 */
 border-radius:8px;
 }
 
 
 .lists{
 
 margin:12px;
 font-size:20px;
 padding:8px;
 color:#00CCFF;
 }
 .button5{
 color: #ffffff;
 padding: 10px 30px;
 border-radius: 20px;
 background: linear-gradient(to right, #08a9df, #12054a);
 align-items:center;
 justify-content:center
 border: none;
 }
 
 .buttons{
 
 text-align:center;
 
 }
 
 
 .Card{
 background-color:#111;
 color: #00CCff;
 text-align: center;
 font-size:18px;
 font-family:Arial,sans-serif;
 padding-bottom:20px;
 width:100%;
 }
 .Kevin{
 align-items: center;
 align-content: center;
 text-align: center;
 padding-bottom:30px;
 
 }
 .fa {
 padding: 10px;
 font-size: 20px;
 width: 30px;
 text-align: center;
 text-decoration: none;
 margin: 5px 2px;
 border-radius:40%;
 }
 
 .fa:hover {
 opacity: 0.7;
 }
 
 .fa-facebook socials {
 background: #3B5998;
 color: white;
 }
 
 .fa-twitter socials{
 background: #55ACEE;
 color: white;
 }
 
 .fa-snapchat-ghost socials {
 background: #fffc00;
 color: white;
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
 }
 
 .fa-youtube socials {
 background: #bb0000;
 color: white;
 }
 
 .fa-instagram socials{
 background: #50C878;
 color: white;
 }
 
 .Card a{
 
 text-decoration:none;
 color:#00ccff;
 
 
 }
 .Card a: hover{
 
 text-decoration:none;
 color:grey;
 
 
 }
 
 .founder-image img{
 border:2px solid #ffffff;
 border-radius:50%;
 text-align:center;
 width:100px;
 height:100px;
 
 }
 .founder-image{
 text-align:center;
 
 }
 
 
 
 
 
 /* Recommended Section */
 .related-music-texts {
 font-size: 30px;
 font-weight: bold;
 margin: 5px 10px 10px 10px;
 text-align: center;
 /*
 color: #00ccff;
 */
 text-shadow: 0 0 15px #08a9df;
 
 
 
 color: #00CFFF;
 
 
 }
 
 
 .related-music-texts2 {
 font-size: 25px;
 font-weight: bold;
 margin: 5px 10px 10px 30px;
 
 /*
 color: #00ccff;
 */
 /*
 text-shadow: 0 0 15px #08a9df;
 */
 
 
 color: #00CFFF;
 
 
 }
 
 
 .related-music-container {
 background: rgba(17, 17, 17, 0.85);
 padding: 15px;
 margin: 15px;
 border-radius: 16px;
 border: 1px solid #08a9df44;
 box-shadow: 0 0 20px #08a9df22;
 transition: transform 0.4s, box-shadow 0.4s;
 animation: fadeIn 1s ease;
 }
 .related-music-container:hover {
 transform: translateY(-5px) scale(1.02);
 box-shadow: 0 0 25px #08a9df88, 0 0 50px #08a9df33;
 }
 
 .image-text-play-container {
 display: flex;
 align-items: center;
 }
 .related-music-image {
 width: 140px;
 height: 140px;
 border-radius: 14px;
 margin-right: 20px;
 object-fit: cover;
 border: 2px solid #08a9df;
 transition: transform 0.3s, box-shadow 0.3s;
 }
 .related-music-image:hover {
 transform: scale(1.07);
 box-shadow: 0 0 20px #08a9df;
 }
 .text-play-container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 }
 .related-music-text {
 font-size: 14px;
 margin-right: 15px;
 color: #ffffff;
 line-height: 1.5;
 /*
 text-shadow: 0 0 10px #08a9df77;
 */
 }
 
 
 
 /*
 
 .related-music-container .text-play-container a {
 margin-left: auto;
 margin-right: 2px;
 }
 
 */
 .download-button {
 margin-top: 20px;
 text-align: center;
 }
 
 .download-button button {
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 background-color: #4CAF50;
 color: white;
 cursor: pointer;
 padding: 10px 30px 10px 30px;
 border-radius: 20px;
 background: linear-gradient(to right, #08a9df, #12054a);
 align-items: center;
 }
 
 .download-button button:hover {
 background-color: #3e8e41;
 }
 
 .related-music-container {
 margin: 2px; /* Add a 2px margin to the container */
 }
 
 .related-music-item {
 margin: 2px; /* Add a 2px margin to each item */
 }
 
 
 .related{
 
 font-size:25px;
 margin:2px;
 
 
 }
 .related-music-texts{
 font-size: 20px;
 font-family: Halvetica,sansserif;
 font-weight: bold;
 margin:20px;
 
 color:#00Ccff;
 }
 .onetwo{
 margin-bottom:40px;
 }
 
 .image-container6 {
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 
 border-radius:4px;
 
 }
 
 .image-item6 {
 margin: 10px;
 width: 150px; /* adjust the width as needed */
 height: 150px; /* adjust the height as needed */
 display: flex;
 flex-direction: column;
 border:2px solid #f1f1f1;
 border-radius:8px;
 
 }
 
 
 
 .image-part {
 width: 100%;
 height: 60%; /* increased the height to 80% */
 background-size: cover;
 background-position: center;
 }
 .image-part img{
 width: 100%;
 height: auto; /* increased the height to 80% */
 object-fit: cover;
 
 }
 .text-part {
 width: 100%;
 height: 40%; /* decreased the height to 20% */
 padding: 4px;
 background-color: #ffffff;
 }
 
 
 
 .social-sharing {
 margin-top: 0px;
 padding: 20px;
 
 
 border-radius:20px;
 border:none;
 
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 
 border-bottom:none;
 }
 
 .social-sharing a {
 margin-right: 20px;
 }
 
 .social-sharing a:last-child {
 margin-right: 0;
 }
 
 .songnames{
 
 font-size:18px;
 padding:4px;
 }
 
 .artistname{
 
 font-size:15px;
 
 }
 
 .mysong{
 
 font-size:18px;
 
 color:#00ccff;
 
 
 }
 
 .onefour{
 font-size:18px;
 text-align:center;
 color: #12054a;
 font-weight:bold;
 font-family:serif;
 }
 
 
 .urban-audio {
 width: 300px;
 padding: 20px;
 
 /*
 border: 1px solid #12054a;
 */
 border-radius: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 margin: 0 auto;
 text-align: center;
 }
 .download-button {
 
 
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 margin:10px auto;
 padding: 10px 20px;
 border-radius: 20px;
 
 border: 0px;
 
 background: linear-gradient(to right, #08a9df, #12054a);
 color: #ffffff;
 
 
 }
 
 .download-button:hover {
 background-color: #3e8e41;
 }
 .some-words {
 text-decoration: none;
 text-align:center;
 
 }
 .some-words a:hover{
 text-decoration:none;
 color:#00ccff;
 
 }
 .my-images p {
 font-size: 18px;
 margin-top: 10px;
 }
 
 .gradients5{
 background-color: #111;
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 
 margin: 0px;
 padding: 10px;
 box-sizing: border-box;
 }
 .greek-container {
 width: 250px;
 height: 250px;
 background-color: #ccc;
 border-radius: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
 border:2px solid #00ccff;
 /*
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 */
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 }
 .greek-container img {
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 width: 60%;
 height: 75%;
 }
 .main-song{
 font-size:18px;
 }
 .song-words{
 text-align:center;
 margin-top:20px;
 
 }
 .urban-audio {
 margin-top:20px;
 }
 .download-button {
 margin-top:20px;
 text-align:center;
 }
 
 
 
 .download-button button {
 padding:10px 20px;
 border:none;
 border-radius:5px;
 background-color:#4CAF50;
 color:white;
 cursor:pointer;
 padding: 10px 30px 10px 30px;
 border-radius: 20px;
 background: linear-gradient(to right, #08a9df, #12054a);
 align-items:center;
 }
 .download-button button:hover {
 background-color:#3e8e41;
 }
 
 
 .submitbutton {
 
 
 padding: 20px 20px;
 border: none;
 cursor: pointer;
 margin:10px auto;
 padding: 10px 20px;
 border-radius: 8px;
 margin-top:40px;
 border: 0px;
 
 background: linear-gradient(to right, #08a9df, #12054a);
 color: #ffffff;
 
 }
 
 .submitbutton5 {
 
 
 padding: 20px 20px;
 border: none;
 cursor: pointer;
 margin:10px auto;
 padding: 10px 20px;
 border-radius: 8px;
 margin-top:40px;
 border: 0px;
 margin:20px;
 background: linear-gradient(to right, #08a9df, #12054a);
 color: #ffffff;
 }
 .center{
 width:100%;
 height:250px;
 border-radius:8px;
 border:2px solid #f1f1f1;
 object-fit:cover;
 }
 .light-mode .my-images img{
 
 
 border:1px solid #12054a;
 
 
 }
 /*
 .image-grid {
 display: flex;
 justify-content: space-between;
 
 }
 */
 .image-grid {
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 gap: 10px;
 }
 
 .image-grid img {
 width: 100%; /* adjust the width as needed */
 height: 150px; /* adjust the height as needed */
 object-fit: cover;
 border-radius: 8px;
 margin: 0;
 }
 
 
 .image-container60 {
 width: 100%;
 margin: 10px;
 border: 4px solid #f1f1f1;
 height: 350px;
 border-radius:8px;
 
 
 
 }
 
 .sameimage {
 height: 75%;
 background-size: 300px 300px;
 background-position: center;
 background-repeat: no-repeat;
 position: relative;
 
 width:200px;
 }
 
 .image-text60 {
 font-size: 12px;
 height: 25%;
 background-color: #f0f0f0;
 padding: 10px;
 margin:0px;
 overflow: hidden;
 border: 4px solid #f1f1f1;
 
 
 
 }
 
 .image-time {
 font-size: 8px;
 color: #666;
 
 }
 
 .image-time::before {
 content: "\25CF";
 font-size: 10px;
 color: #666;
 margin: 0px;
 }
 /*
 .video-icon {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 24px;
 color: #ff0000;
 }
 */
 .image-text26{
 border-bottom: 4px solid #f1f1f1;
 
 
 padding:6px;
 font-size:5px;
 }
 
 
 .image-container6 {
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 
 border-radius:4px;
 
 }
 
 .image-item6 {
 margin: 10px;
 width: 100%; /* adjust the width as needed */
 height: 150px; /* adjust the height as needed */
 display: flex;
 flex-direction: column;
 border:2px solid #f1f1f1;
 border-radius:8px;
 
 }
 /*
 .gradients5 {
 background-image: linear-gradient(to bottom, #50C878, #f1f1f1;);
 padding: 40px;
 border-radius: 20px;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 margin: 20px;
 text-align: center;
 color: #f0f0f0;
 }
 
 .gradients5 h1, .gradients5 h2, .gradients5 p {
 color: #12054a;
 text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .gradients5 img {
 border-radius: 20px;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 margin: 20px;
 }
 
 */
 .image-container60 a {
 text-decoration: none;
 color: #333;
 font-size: 0.8rem;
 
 margin-top: 5px;
 
 transition: color 0.2s ease-in-out; /* Add a transition effect to the text */
 
 }
 
 .image-container60 a:hover {
 color: purple; /* Change the text color on hover */
 }
 
 
 
 .myaudioplayer{
 font-family: Arial, sans-serif;
 background-color: #111;
 color: #00ccff;
 padding:0;
 margin:0;
 
 box-sizing: border-box;
 }
 
 .audio-player2 {
 width: 350px;
 max-width:150%;
 margin: 50px auto;
 padding: 20px;
 background-color: #111;
 border-radius: 20px;
 /*
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 */
 transition: 0.3s;
 
 /*
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 */
 }
 
 .audio-player2 .cover-art {
 width: 100%;
 height: 200px;
 border-radius: 10px 10px 0 0;
 background-size: cover;
 background-position: center;
 /*
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 */
 }
 
 .audio-player2 .audio-info {
 padding: 20px;
 }
 
 .audio-player2 .audio-info .title {
 font-size: 18px;
 font-weight: bold;
 margin-bottom: 10px;
 }
 
 .audio-player2 .audio-info .artist {
 font-size: 16px;
 color: #666;
 }
 
 .audio-player2 .mycontrols {
 padding: 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 
 .audio-player2 .mycontrols button {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: #ddd;
 color: #333;
 border: none;
 cursor: pointer;
 
 transition: background-color 0.2s ease-in-out;
 
 }
 
 .audio-player2 .mycontrols button:hover {
 
 
 background-color: #ccc;
 
 
 }
 
 
 .mainheading{
 
 font-size:25px;
 
 }
 .audio-player2 .mycontrols .play-pause-btn {
 width: 60px;
 height: 60px;
 font-size: 24px;
 }
 
 .audio-player2 .myprogress-bar {
 width: 100%;
 height: 4px;
 background-color: #ccc;
 border-radius: 10px;
 overflow: hidden;
 }
 
 .audio-player2 .myprogress-bar .myprogress {
 width: 0%;
 height: 100%;
 background-color: #66ccff;
 transition: width 0.1s linear;
 }
 
 .download-btn-bottom {
 
 position: relative;
 bottom: 20%;
 left: 50%;
 transform: translateX(-50%);
 
 padding: 10px 20px;
 
 margin-top:50px;
 border: none;
 
 cursor: pointer;
 
 padding: 10px 30px 10px 30px;
 border-radius: 8px;
 
 border: 0px;
 
 background: linear-gradient(to right, #08a9df, #12054a);
 color: #ffffff;
 }
 
 /* Increase spacing between menu items */
 .menu-links a {
 margin-bottom: 15px; /* Increased from 20px */
 display: flex;
 align-items: center;
 gap: 18px; /* Increased space between icon and text */
 }
 
 /* Push the first link down a bit */
 .menu-links a:first-child {
 margin-top: 20px;
 }
 
 .picture-container a{
 
 text-decoration:none;
 color:#ddd;
 
 
 }
 
 .picture-container a:hover{
 
 text-decoration:none;
 color:#00ccff;;
 
 
 }
 
 
 
 .shareitems{
 
 text-align:center;
 align-self:center;
 align-items:center;
 }
 .thetitle{
 
 font-size:25px ;
 padding:10px;
 text-align:center;
 
 }
 
 
 .titleparagraph{
 
 text-align:center;
 
 }
 .gradient3 img{
 
 
 object-fit:cover;
 
 width:100%;
 }
 
 .flex-containerbluetick2 {
 font-size: 1rem;
 gap: 10px;
 }
 
 .flex-containerbluetick2 img {
 width: 24px;
 height: 24px;
 vertical-align:middle;
 }
 
 .flex-containerbluetick {
 font-size: 1rem;
 gap: 10px;
 }
 
 .flex-containerbluetick img {
 width: 24px;
 height: 24px;
 vertical-align:middle;
 }
 
 
 
 
 
 .social-links {
 display: flex;
 justify-content: center;
 margin-top: 40px;
 }
 
 .social-link {
 margin: 0 10px;
 font-size: 24px;
 }
 
 .myicons a{
 text-decoration:none;
 
 }
 
 .flex-containerbluetick {
 display: flex;
 padding:10px;
 align-items:center;
 }
 
 .flex-containerbluetick img {
 margin-left: 5px; /* Optional: adds some space between the word and image */
 width:10px;
 height:10px;
 border-radius:50%;
 object-fit:cover;
 border:none;
 
 }
 
 .flex-containerbluetick2 img {
 margin-left: 5px; /* Optional: adds some space between the word and image */
 width:15px;
 height:15px;
 border-radius:50%;
 object-fit:cover;
 border:none;
 vertical-align:middle;
 
 }
 .mysocials2{
 border:none;
 
 }
 
 
 .top-songs, .featured-artists {
 display: flex;
 overflow-x: auto;
 gap: 15px;
 padding: 20px;
 scroll-behavior: smooth;
 }
 .top-songs::-webkit-scrollbar, .featured-artists::-webkit-scrollbar {
 display: none;
 }
 .song-item, .artist-item {
 flex: 0 0 auto;
 text-align: center;
 background: #111;
 padding: 10px;
 border-radius: 12px;
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 width: 150px;
 }
 .song-item:hover, .artist-item:hover {
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.6);
 transform: translateY(-5px);
 }
 .song-item img, .artist-item img {
 width: 150px;
 height: 150px;
 object-fit: cover;
 border-radius: 8px;
 border: 3px solid #00CFFF;
 }
 
 .play-button8 {
 /*
 padding: 12px 28px;
 */
 padding: 10px 30px;
 border: none;
 border-radius: 8px;
 background: linear-gradient(135deg, #08a9df, #12054a);
 color: #ffffff;
 font-weight: bold;
 font-size: 16px;
 cursor: pointer;
 transition: all 0.3s ease;
 box-shadow: 0 0 15px #08a9df88;
 animation: pulse 2s infinite;
 letter-spacing: 1px;
 font-size:12px;
 }
 
 
 
 
 /* Bottom Nav Default (dark mode) */
 .bottom-nav a {
 text-decoration: none;
 color: #f0f0f0;
 font-size: 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 transition: color 0.3s, text-shadow 0.3s;
 }
 
 /* When active */
 .bottom-nav a.active {
 color: #00CFFF;
 text-shadow: 0 0 10px #00CFFF;
 
 }
 
 /* Hover effect */
 .bottom-nav a:hover {
 color: #00CFFF;
 text-shadow: 0 0 10px #00CFFF;
 }
 
 
 
 
 .play-button8:hover {
 background: linear-gradient(135deg, #ffffff, #08a9df);
 color: #000;
 transform: scale(1.1);
 box-shadow: 0 0 30px #08a9df;
 }
 @keyframes pulse {
 0% { box-shadow: 0 0 10px #08a9df66; }
 50% { box-shadow: 0 0 20px #08a9dfaa; }
 100% { box-shadow: 0 0 10px #08a9df66; }
 }
 h1, h2, h3 {
 color: #00CFFF;
 margin: 8px;
 
 }
 p {
 color: #ccc;
 margin: 10px 0;
 }
 
 
 
 
 .mybluetick{
 
 
 
 
 
 width: 10px; 
 height: 10px;
 
 }
 
 
 .menu-links {
 padding-top: 10px;
 
 }
 
 .menu-links li {
 margin: 15px 0;
 }
 
 .menu-links li a {
 font-size: 1.5rem;
 color: #f0f0f0;
 transition: color 0.3s;
 }
 
 .menu-links li a:hover {
 color: #00CFFF;
 }
 
 
 
 
 .artistlyrics{
 
 text-align:center;
 
 
 
 }
 /*
 .lyrics{
 
 text-align:center;
 padding:40px;
 
 
 }
 
 */
 .mylyrics{
 font-family: 'Georgia', serif;
 
 padding: 40px;
 color: #333;
 line-height: 1.6;
 }
 .lyrics {
 
 padding: 30px;
 border-radius: 10px;
 max-width: 700px;
 margin: auto;
 box-shadow: 0 0 10px rgba(0,0,0,0.1);
 }
 
 
 
 .artistinfo summary{
 
 margin:40px;
 
 
 }
 .artistinfo p{
 
 margin:20px;
 
 
 }
 
 
 .artistinfo .flex-containerbluetick span{
 
 margin-left:10px;
 text-decoration:none;
 
 }
 
 
 .buttonothers {
 margin:60px;
 display: inline-block;
 padding: 10px 20px;
 background-color: #fff;
 color: #12054a;
 font-weight:bold;
 text-decoration: none;
 border-radius: 10px;
 box-shadow: 0px 5px 0px #00ccff;
 transition: all 0.3s ease-in-out;
 border: 1px solid #00ccff;
 
 }
 
 .buttonothers:hover {
 background-color: #f7f7f7;
 box-shadow: 0px 5px 0px #3e8e41;
 transform: translateY(-5px);
 border:1px solid #3e8e41;
 color: #3e8e41;
 }
 
 .buttonothers:active {
 box-shadow: none;
 transform: translateY(5px);
 }
 
 .buttonothers::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.05);
 border-radius: 10px;
 transform: scale(0);
 transition: all 0.3s ease-in-out;
 }
 
 .buttonothers:hover::before {
 transform: scale(1);
 }
 
 
 
 
 
 
 }
 
 
 
 
 @media (prefers-color-scheme: light) {
 
 .playsong{
 
 text-align:center;
 color:#00ccff;
 font-size:22px;
 font-family:serif;
 }
 
 
 
 body {
 font-family: Arial, sans-serif;
 background: #ffffff;
 color: #111111;
 }
 
 /* Navbar */
 .navbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 20px;
 /*
 background: linear-gradient(to right, #e0e0f8, #0055aa);
 */
 background:#ffffff;
 position: fixed;
 top: 0;
 width: 100%;
 height: 60px;
 z-index: 3000;
 
 
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 
 }
 
 .nav-left {
 display: flex;
 align-items: center;
 gap: 10px;
 }
 
 .hamburger {
 width: 30px;
 height: 20px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 cursor: pointer;
 }
 
 .bar {
 height: 3px;
 width: 100%;
 background: #0066cc;
 border-radius: 5px;
 transition: all 0.3s ease;
 }
 
 .hamburger.active .bar:nth-child(1) {
 transform: rotate(45deg) translate(5px, 5px);
 }
 
 .hamburger.active .bar:nth-child(2) {
 opacity: 0;
 }
 
 .hamburger.active .bar:nth-child(3) {
 transform: rotate(-45deg) translate(5px, -5px);
 }
 
 .logo-img {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 object-fit: cover;
 }
 
 .nav-right {
 display: flex;
 align-items: center;
 gap: 10px;
 }
 
 .search-container {
 display: flex;
 align-items: center;
 position: relative;
 }
 
 .search-icon {
 font-size: 24px;
 color: #0066cc;
 cursor: pointer;
 }
 
 .search-input {
 display: none;
 height: 30px;
 border: none;
 border-radius: 20px;
 padding: 5px 10px;
 outline: none;
 margin-left: 10px;
 transition: width 0.3s ease;
 }
 
 .search-input.active {
 display: block;
 width: 180px;
 }
 
 /* Menu */
 .menu-links {
 position: fixed;
 top: 60px;
 left: -100%;
 width: 100%;
 height: calc(100vh - 60px);
 background: #ffffff;
 color: #111111;
 display: flex;
 flex-direction: column;
 
 padding: 40px 20px;
 
 transition: left 0.4s ease;
 z-index: 2500;
 padding-top:10px;
 }
 
 .menu-links.active {
 left: 0;
 }
 
 .menu-links a {
 color: #0066cc;
 text-decoration: none;
 font-size: 18px;
 margin-bottom: 20px;
 margin-top:2px;
 display: flex;
 align-items: center;
 margin:15px 0;
 }
 
 .menu-links a:hover {
 color: #111111;
 }
 
 
 
 .menu-links a {
 margin: 20px 0; /* Increase vertical spacing between list items */
 
 }
 
 .menu-links li a {
 display: block;
 padding: 10px 0;
 
 }
 
 /* Slideshow */
 .slideshow-container {
 margin-top: 70px;
 width: 100%;
 height: 300px;
 position: relative;
 overflow: hidden;
 /*
 background: linear-gradient(to bottom, #111333, #fafafa);
 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 */
 
 }
 
 .slide {
 position: absolute;
 width: 100%;
 height: 100%;
 opacity: 0;
 transition: opacity 1s;
 }
 
 .slide.active {
 opacity: 1;
 }
 
 .slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 }
 
 /* Bottom Navigation */
 .bottom-nav {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 background: #ffffff;
 display: flex;
 justify-content: space-around;
 align-items: center;
 height: 60px;
 /*
 box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
 */
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 z-index: 1000;
 
 }
 
 .bottom-nav i {
 font-size: 24px;
 color: #0066cc;
 transition: color 0.3s;
 cursor: pointer;
 }
 
 .bottom-nav i:hover {
 color: #111111;
 }
 
 /* Particles Background */
 #particles-js {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 
 }
 
 
 .image-container {
 display: flex;
 overflow-x: auto;
 scroll-behavior: smooth;
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 
 
 }
 
 
 
 
 
 
 
 
 
 
 .imageitemtry {
 width: 150px; /* adjust the width as needed */
 height: 150px; /* adjust the height as needed */
 margin: 10px; /* adjust the margin as needed */
 object-fit: cover;
 border-radius:50%;
 border:1px solid #e0e0f8;
 /*
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 */
 }
 
 .image-container2 a{
 
 text-decoration:none;
 
 }
 
 
 .image-item{
 
 margin:10px;
 display:flex;
 flex-direction:column;
 flex-shrink:0;
 background-color:#fafafaf7;
 align-items:center;
 flex-shrink:0;
 padding:10px;
 border-radius: 10px; /* Add a border radius */
 /*
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 */
 /*
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a box shadow */
 
 
 transition: transform 0.2s ease-in-out; /* Add a transition effect */
 */
 
 flex: 0 0 auto;
 margin-right: 10px; /* some space between items */
 }
 
 
 
 
 
 
 
 .top-songs, .featured-artists {
 display: flex;
 overflow-x: auto;
 gap: 15px;
 padding: 20px;
 scroll-behavior: smooth;
 }
 .top-songs::-webkit-scrollbar, .featured-artists::-webkit-scrollbar {
 display: none;
 }
 .song-item, .artist-item {
 flex: 0 0 auto;
 text-align: center;
 background: #ffffff;
 padding: 10px;
 border-radius: 12px;
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 width: 150px;
 }
 .song-item:hover, .artist-item:hover {
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.6);
 transform: translateY(-5px);
 }
 .song-item img, .artist-item img {
 width: 150px;
 height: 150px;
 object-fit: cover;
 border-radius: 8px;
 border: 3px solid #0066cc;
 
 
 }
 
 
 .image-item a{
 display:block;
 
 }
 
 .image-item:hover {
 transform: scale(1.05); /* Add a hover effect */
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Enhance the box shadow on hover */
 }
 
 .image-text {
 font-size: 0.8rem;
 text-align: center;
 margin-top: 5px;
 color: #111; /* Change the text color */
 font-weight: bold; /* Make the text bold */
 }
 /* image container 2*/
 .image-container2 {
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 
 
 
 }
 
 
 /*
 
 .image-container2 img {
 width: 120px; /* adjust the width as needed */
 /* height: 120px; /* adjust the height as needed */
 /* margin: 10px; /* adjust the margin as needed */
 /* object-fit: cover;
 /*border-radius:12px;
 }
 */
 
 
 
 .imageitemtry2 {
 width: 150px; /* adjust the width as needed */
 height: 150px; /* adjust the height as needed */
 margin: 10px; /* adjust the margin as needed */
 object-fit: cover;
 
 border-radius:12px !important;
 border:1px solid #e0e0f8;
 /*
 
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 
 
 transition: 0.3s;
 */
 }
 
 .imageitemtry2 a {
 text-decoration:none;
 
 }
 
 
 .image-item2 a {
 text-decoration: none;
 color: #111;
 font-size: 0.8rem;
 text-align: center;
 margin-top: 5px;
 /*
 transition: color 0.2s ease-in-out; /* Add a transition effect to the text */
 */
 }
 
 .image-item2 a:hover {
 color: purple; /* Change the text color on hover */
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 .image-item2, .image-item, .image-item3 {
 flex: 0 0 auto;
 text-align: center;
 background: #ffffff;
 padding: 10px;
 border-radius: 12px;
 /*
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 */
 width: 150px;
 }
 .song-item:hover, .artist-item:hover {
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.6);
 transform: translateY(-5px);
 }
 .song-item img, .artist-item img {
 width: 150px;
 height: 150px;
 object-fit: cover;
 border-radius: 8px;
 border: 3px solid #0066cc;
 }
 .image-text {
 color: #0066cc;
 font-weight: bold;
 margin-top: 8px;
 text-align: center;
 }
 
 .image-item2 img{
 width: 150px;
 height: 150px;
 object-fit: cover;
 border-radius: 8px;
 border: 2px solid #0066cc;
 }
 .image-item2:hover, .image-item3:hover {
 /*
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.6);
 transform: translateY(-5px);
 */
 }
 
 
 
 
 
 .image-item3 img  {
 width: 150px;
 height: 150px;
 object-fit: cover;
 border-radius: 8px;
 border: 3px solid #0066cc;
 }
 .image-item3:hover {
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.6);
 transform: translateY(-5px);
 }
 .image-item3 {
 flex: 0 0 auto;
 text-align: center;
 background: #ffffff;
 padding: 10px;
 border-radius: 12px;
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 
 width: 150px;
 }
 
 
 
 
 .image-item3 a {
 text-decoration: none;
 color: #111;
 font-size: 0.8rem;
 text-align: center;
 margin-top: 5px;
 /*
 transition: color 0.2s ease-in-out; /* Add a transition effect to the text */
 */
 }
 .me{
 margin:8px;
 color:#e0e0f8;
 
 
 }
 .me2{
 
 color:#e0e0f8;
 
 text-align:center;
 font-size:18px;
 margin-top:60px;
 
 }
 
 
 .image-item2{
 
 margin:10px;
 display:flex;
 flex-direction:column;
 align-items:center;
 flex-shrink:0;
 }
 .image-item a{
 display:block;
 
 }
 
 
 
 
 
 /*style for the slides show*/
 
 
 .slideshow-container {
 position: relative;
 width: 100%;
 height: 300px; /* adjust the height as needed */
 overflow: hidden;
 background-image: linear-gradient(to bottom, #fafafa, #111333);
 /*
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 */
 position: relative;
 z-index: 1;
 
 }
 
 
 .slideshow-container {
 margin-top: calc(54px + 6px); /* adjust the margin top to match the navbar height and any additional padding */
 }
 
 .slide {
 position: absolute;
 width: 100%;
 height: 100%;
 transition: opacity 1s;
 }
 
 .slide.active {
 opacity: 1;
 z-index: 1;
 }
 
 .slide:not(.active) {
 opacity: 0;
 z-index: 0;
 }
 
 .slide img {
 width: 100%;
 height: 100%; /* adjust the height as needed */
 object-fit: cover;
 }
 
 .slide-button {
 position: absolute;
 bottom: 10%;
 left: 50%;
 transform: translateX(-50%);
 
 padding: 10px 20px;
 text-decoration:none;
 
 border: none;
 
 cursor: pointer;
 
 padding: 10px 30px 10px 30px;
 border-radius: 20px;
 
 border: 0px;
 
 background: linear-gradient(to right, #0055aa, #e0e0f8);
 color: #ffffff;
 }
 
 
 
 
 /* style for images and text on one line  ie  for recomended songs */
 .image-text-container {
 display: flex;
 align-items: center;
 background-image: linear-gradient(to bottom, , #5E72EB);
 }
 
 
 .image{
 width: 100px; /* adjust the width as needed */
 height: auto; /* adjust the height as needed */
 margin-right: 20px; /* adjust the margin as needed */
 border-radius:8px;
 border: 1px solid #e0e0f8;
 
 
 }
 
 .image-text_container{
 
 display:flex;
 align-items:flex-start;
 }
 .image-text-container {
 display: flex;
 align-items: center;
 background-image: linear-gradient(to bottom, , #5E72EB);
 margin: 20px; /* add margin to create gap from the edges */
 }
 
 .image-text-container + .image-text-container {
 margin-top: 40px; /* add margin top to create gap between containers */
 }
 
 .text {
 font-size: 12px; /* adjust the font size as needed */
 font-family: Arial, sans-serif; /* adjust the font family as needed */
 margin-bottom:10px;
 color:ffffff;
 }
 .text-container{
 display:flex;
 flex-direction: column;
 
 }
 /* style for the song in the for you       */
 .container1 {
 width: 80%; /* adjust the width as needed */
 height: 400px; /* adjust the height as needed */
 margin: 40px auto; /* adjust the margin as needed */
 /* adjust the gradient colors as needed */
 border: 1px solid #ddd; /* adjust the border color and width as needed */
 border-radius: 10px; /* adjust the border radius as needed */
 /* adjust the box shadow as needed */
 position:relative;
 
 background: linear-gradient(to bottom, #fafafa, #111333);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 
 .centered-image {
 position: absolute; /* add this property */
 top: 40%; /* adjust the top position as needed */
 left: 50%; /* add this property */
 transform: translateX(-50%); /* add this property */
 width: 40%; /* adjust the width as needed */
 height: auto; /* add this property */
 border-radius: 40%; /* add this property */
 /* add this property */
 
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 
 
 .text1{
 font-size: 18px; /* adjust the font size as needed */
 font-family: Arial, sans-serif; /* adjust the font family as needed */
 text-align:center;
 margin-top:20px;
 color:#ffffff;
 }
 
 .text2{
 font-size: 18px; /* adjust the font size as needed */
 font-family: Arial, sans-serif; /* adjust the font family as needed */
 text-align:center;
 margin-top:12px;
 color:#ffffff;
 }
 
 
 
 #rotating-image {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100px; /* adjust the size as needed */
 height: 100px; /* adjust the size as needed */
 border-radius: 40%;
 }
 .rotate {
 animation: rotate 2s linear infinite;
 }
 
 @keyframes rotate {
 0% {
 transform: translate(-50%, -50%) rotate(0deg);
 }
 100% {
 transform: translate(-50%, -50%) rotate(360deg);
 }
 }
 
 #rotating-image {
 position: absolute;
 top: 40%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100px; /* adjust the size as needed */
 height: 100px; /* adjust the size as needed */
 border-radius: 40%;
 border:4px solid #6082B6;
 }
 
 /* style for recent uploads ie two images on the same line  */
 
 
 .picture-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 }
 
 .picture-row {
 display: flex;
 
 justify-content: space-around;
 
 
 align-items: center;
 margin-bottom: 20px;
 }
 
 .picture {
 width: 45%;
 /*
 border-radius: 8px;
 */
 overflow: hidden;
 
 }
 
 .picture img {
 width: 150px;
 height: 150px;
 }
 
 .recentimages{
 
 width: 150px;
 height: 150px;
 
 
 }
 
 .uto{
 text-align:center;
 font-family:serif;
 color:#ffffff;
 }
 .one{
 text-align:margin;
 margin:2px;
 font-size:25px;
 font-family:serif;
 color:#FFFFFF;
 }
 .onethree{
 text-align:margin;
 margin:8px;
 font-size:20px;
 font-family: sans serif;
 font-weight:bold;
 color:#e0e0f8;
 }
 .meu{
 margin:8px;
 }
 
 
 .my-images {
 text-align: center;
 margin:40px auto;
 width: 80%;
 
 }
 
 /* adjust the height as needed */
 /* adjust the margin as needed */
 
 /*
 .my-images img {
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 
 
 max-width: 90%; 
 height:300px; 
 
 }
 */
 
 .my-images img{
 
 
 object-fit:cover;
 
 width:100%;
 }
 
 
 .my-images a {
 text-decoration: none;
 color: #111;
 font-size:18px;
 }
 .image-item a{
 
 text-decoration:none;
 
 
 }
 
 
 .some-words a {
 text-decoration: none;
 text-align:center;
 color:#fff;
 
 font-family:serif;
 font-size:18px;
 align-items:center;
 margin:4px;
 }
 .some-words {
 text-decoration: none;
 text-align:center;
 color:#fff;
 }
 .some-words a:hover{
 text-decoration:none;
 color:#0055aa;
 
 }
 .my-images p {
 font-size: 18px;
 margin-top: 10px;
 }
 .gradients{
 
 
 background-color: #f1f1f1;
 
 }
 
 .gradients2{
 
 
 background-color: #6082B6;
 
 }
 
 .gradient3{
 
 
 
 
 background-color:#ffffff;
 /*
 border:1px solid #ddd;
 */
 border-radius:8px;
 }
 
 
 .lists{
 
 margin:12px;
 font-size:20px;
 padding:8px;
 color:#00CCFF;
 }
 .button5{
 color: #ffffff;
 padding: 10px 30px;
 border-radius: 20px;
 background: linear-gradient(to right, #0055aa, #e0e0f8);
 align-items:center;
 justify-content:center
 border: none;
 }
 
 .buttons{
 
 text-align:center;
 
 }
 
 
 .Card{
 background-color:#ffffff;
 color: #00CCff;
 text-align: center;
 font-size:18px;
 font-family:Arial,sans-serif;
 padding-bottom:20px;
 width:100%;
 }
 .Kevin{
 align-items: center;
 align-content: center;
 text-align: center;
 padding-bottom:30px;
 
 }
 .fa {
 padding: 10px;
 font-size: 20px;
 width: 30px;
 text-align: center;
 text-decoration: none;
 margin: 5px 2px;
 border-radius:40%;
 }
 
 .fa:hover {
 opacity: 0.7;
 }
 
 .fa-facebook socials {
 background: #3B5998;
 color: #111111;
 }
 
 .fa-twitter socials{
 background: #55ACEE;
 color: #111111;
 }
 
 .fa-snapchat-ghost socials {
 background: #fffc00;
 color: #111111;
 text-shadow: -1px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff;
 }
 
 .fa-youtube socials {
 background: #bb0000;
 color: #111111;
 }
 
 .fa-instagram socials{
 background: #50C878;
 color: #111111;
 }
 
 .Card a{
 
 text-decoration:none;
 color:#0055aa;
 
 
 }
 .Card a: hover{
 
 text-decoration:none;
 color:grey;
 
 
 }
 
 .founder-image img{
 border:2px solid #ffffff;
 border-radius:50%;
 text-align:center;
 width:100px;
 height:100px;
 
 }
 .founder-image{
 text-align:center;
 
 }
 
 
 
 
 
 /* Recommended Section */
 .related-music-texts {
 font-size: 30px;
 font-weight: bold;
 margin: 5px 10px 10px 10px;
 text-align: center;
 /*
 color: #0055aa;
 */
 text-shadow: 0 0 15px #0055aa;
 
 
 
 color: #0066cc;
 
 
 }
 
 
 .related-music-texts2 {
 font-size: 25px;
 font-weight: bold;
 margin: 5px 10px 10px 30px;
 
 /*
 color: #0055aa;
 */
 /*
 text-shadow: 0 0 15px #0055aa;
 */
 
 
 color: #0066cc;
 
 
 }
 
 
 .related-music-container {
 /*
 background: rgba(17, 17, 17, 0.85);
 */
 padding: 15px;
 margin: 15px;
 border-radius: 16px;
 border: 1px solid #0055aa44;
 box-shadow: 0 0 20px #0055aa22;
 transition: transform 0.4s, box-shadow 0.4s;
 animation: fadeIn 1s ease;
 }
 
 /* Related music container */
  .related-music-container {
 background: #ffffff;
 color: #111;
 box-shadow: 0 0 10px rgba(0,0,0,0.1);
 }
 
 
 
 .related-music-container:hover {
 transform: translateY(-5px) scale(1.02);
 box-shadow: 0 0 25px #0055aa88, 0 0 50px #0055aa33;
 }
 
 .image-text-play-container {
 display: flex;
 align-items: center;
 }
 .related-music-image {
 width: 140px;
 height: 140px;
 border-radius: 14px;
 margin-right: 20px;
 object-fit: cover;
 border: 2px solid #0055aa;
 transition: transform 0.3s, box-shadow 0.3s;
 }
 .related-music-image:hover {
 transform: scale(1.07);
 box-shadow: 0 0 20px #0055aa;
 }
 .text-play-container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 }
 .related-music-text {
 font-size: 14px;
 margin-right: 15px;
 color: #111;
 line-height: 1.5;
 /*
 text-shadow: 0 0 10px #0055aa77;
 */
 }
 
 
 
 /*
 
 .related-music-container .text-play-container a {
 margin-left: auto;
 margin-right: 2px;
 }
 
 */
 .download-button {
 margin-top: 20px;
 text-align: center;
 }
 
 .download-button button {
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
 background-color: #4CAF50;
 color: #111111;
 cursor: pointer;
 padding: 10px 30px 10px 30px;
 border-radius: 20px;
 background: linear-gradient(to right, #0055aa, #e0e0f8);
 align-items: center;
 }
 
 .download-button button:hover {
 background-color: #3e8e41;
 }
 
 .related-music-container {
 margin: 2px; /* Add a 2px margin to the container */
 }
 
 .related-music-item {
 margin: 2px; /* Add a 2px margin to each item */
 }
 
 
 .related{
 
 font-size:25px;
 margin:2px;
 
 
 }
 .related-music-texts{
 font-size: 20px;
 font-family: Halvetica,sansserif;
 font-weight: bold;
 margin:20px;
 
 color:#00Ccff;
 }
 .onetwo{
 margin-bottom:40px;
 }
 
 .image-container6 {
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 
 border-radius:4px;
 
 }
 
 .image-item6 {
 margin: 10px;
 width: 150px; /* adjust the width as needed */
 height: 150px; /* adjust the height as needed */
 display: flex;
 flex-direction: column;
 border:2px solid #f1f1f1;
 border-radius:8px;
 
 }
 
 
 
 .image-part {
 width: 100%;
 height: 60%; /* increased the height to 80% */
 background-size: cover;
 background-position: center;
 }
 .image-part img{
 width: 100%;
 height: auto; /* increased the height to 80% */
 object-fit: cover;
 
 }
 .text-part {
 width: 100%;
 height: 40%; /* decreased the height to 20% */
 padding: 4px;
 background-color: #ffffff;
 }
 
 
 
 .social-sharing {
 margin-top: 0px;
 padding: 20px;
 
 
 border-radius:20px;
 border:none;
 
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 
 border-bottom:none;
 }
 
 .social-sharing a {
 margin-right: 20px;
 }
 
 .social-sharing a:last-child {
 margin-right: 0;
 }
 
 .songnames{
 
 font-size:18px;
 padding:4px;
 }
 
 .artistname{
 
 font-size:15px;
 
 }
 
 .mysong{
 
 font-size:18px;
 
 color:#0055aa;
 
 
 }
 
 .onefour{
 font-size:18px;
 text-align:center;
 color: #e0e0f8;
 font-weight:bold;
 font-family:serif;
 }
 
 
 .urban-audio {
 width: 300px;
 padding: 20px;
 
 /*
 border: 1px solid #e0e0f8;
 */
 border-radius: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 margin: 0 auto;
 text-align: center;
 }
 .download-button {
 
 
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 margin:10px auto;
 padding: 10px 20px;
 border-radius: 20px;
 
 border: 0px;
 
 background: linear-gradient(to right, #0055aa, #e0e0f8);
 color: #ffffff;
 
 
 }
 
 .download-button:hover {
 background-color: #3e8e41;
 }
 .some-words {
 text-decoration: none;
 text-align:center;
 
 }
 .some-words a:hover{
 text-decoration:none;
 color:#0055aa;
 
 }
 .my-images p {
 font-size: 18px;
 margin-top: 10px;
 }
 
 .gradients5{
 background-color: #ffffff;
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 
 margin: 0px;
 padding: 10px;
 box-sizing: border-box;
 }
 .greek-container {
 width: 250px;
 height: 250px;
 background-color: #444;
 border-radius: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
 border:2px solid #0055aa;
 /*
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 */
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 }
 .greek-container img {
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 width: 60%;
 height: 75%;
 }
 .main-song{
 font-size:18px;
 }
 .song-words{
 text-align:center;
 margin-top:20px;
 
 }
 .urban-audio {
 margin-top:20px;
 }
 .download-button {
 margin-top:20px;
 text-align:center;
 }
 
 
 
 .download-button button {
 padding:10px 20px;
 border:none;
 border-radius:5px;
 background-color:#4CAF50;
 color:#111111;
 cursor:pointer;
 padding: 10px 30px 10px 30px;
 border-radius: 20px;
 background: linear-gradient(to right, #0055aa, #e0e0f8);
 align-items:center;
 }
 .download-button button:hover {
 background-color:#3e8e41;
 }
 
 
 .submitbutton {
 
 
 padding: 20px 20px;
 border: none;
 cursor: pointer;
 margin:10px auto;
 padding: 10px 20px;
 border-radius: 8px;
 margin-top:40px;
 border: 0px;
 
 background: linear-gradient(to right, #0055aa, #e0e0f8);
 color: #ffffff;
 
 }
 
 .submitbutton5 {
 
 
 padding: 20px 20px;
 border: none;
 cursor: pointer;
 margin:10px auto;
 padding: 10px 20px;
 border-radius: 8px;
 margin-top:40px;
 border: 0px;
 margin:20px;
 background: linear-gradient(to right, #0055aa, #e0e0f8);
 color: #ffffff;
 }
 .center{
 width:100%;
 height:250px;
 border-radius:8px;
 border:2px solid #f1f1f1;
 object-fit:cover;
 }
 .light-mode .my-images img{
 
 
 border:1px solid #e0e0f8;
 
 
 }
 /*
 .image-grid {
 display: flex;
 justify-content: space-between;
 
 }
 */
 .image-grid {
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 gap: 10px;
 }
 
 .image-grid img {
 width: 100%; /* adjust the width as needed */
 height: 150px; /* adjust the height as needed */
 object-fit: cover;
 border-radius: 8px;
 margin: 0;
 }
 
 
 .image-container60 {
 width: 100%;
 margin: 10px;
 border: 4px solid #f1f1f1;
 height: 350px;
 border-radius:8px;
 
 
 
 }
 
 .sameimage {
 height: 75%;
 background-size: 300px 300px;
 background-position: center;
 background-repeat: no-repeat;
 position: relative;
 
 width:200px;
 }
 
 .image-text60 {
 font-size: 12px;
 height: 25%;
 background-color: #111333;
 padding: 10px;
 margin:0px;
 overflow: hidden;
 border: 4px solid #f1f1f1;
 
 
 
 }
 
 .image-time {
 font-size: 8px;
 color: #666;
 
 }
 
 .image-time::before {
 content: "\25CF";
 font-size: 10px;
 color: #666;
 margin: 0px;
 }
 /*
 .video-icon {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-size: 24px;
 color: #ff0000;
 }
 */
 .image-text26{
 border-bottom: 4px solid #f1f1f1;
 
 
 padding:6px;
 font-size:5px;
 }
 
 
 .image-container6 {
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 
 border-radius:4px;
 
 }
 
 .image-item6 {
 margin: 10px;
 width: 100%; /* adjust the width as needed */
 height: 150px; /* adjust the height as needed */
 display: flex;
 flex-direction: column;
 border:2px solid #f1f1f1;
 border-radius:8px;
 
 }
 /*
 .gradients5 {
 background-image: linear-gradient(to bottom, #50C878, #f1f1f1;);
 padding: 40px;
 border-radius: 20px;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 margin: 20px;
 text-align: center;
 color: #111333;
 }
 
 .gradients5 h1, .gradients5 h2, .gradients5 p {
 color: #e0e0f8;
 text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .gradients5 img {
 border-radius: 20px;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 margin: 20px;
 }
 
 */
 .image-container60 a {
 text-decoration: none;
 color: #111;
 font-size: 0.8rem;
 
 margin-top: 5px;
 
 transition: color 0.2s ease-in-out; /* Add a transition effect to the text */
 
 }
 
 .image-container60 a:hover {
 color: purple; /* Change the text color on hover */
 }
 
 
 
 .myaudioplayer{
 font-family: Arial, sans-serif;
 background-color: #ffffff;
 color: #0055aa;
 padding:0;
 margin:0;
 
 box-sizing: border-box;
 }
 
 .audio-player2 {
 width: 350px;
 max-width:150%;
 margin: 50px auto;
 padding: 20px;
 background-color: #ffffff;
 border-radius: 20px;
 /*
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 */
 transition: 0.3s;
 
 /*
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 */
 }
 
 .audio-player2 .cover-art {
 width: 100%;
 height: 200px;
 border-radius: 10px 10px 0 0;
 background-size: cover;
 background-position: center;
 /*
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 */
 }
 
 .audio-player2 .audio-info {
 padding: 20px;
 }
 
 .audio-player2 .audio-info .title {
 font-size: 18px;
 font-weight: bold;
 margin-bottom: 10px;
 }
 
 .audio-player2 .audio-info .artist {
 font-size: 16px;
 color: #666;
 }
 
 .audio-player2 .mycontrols {
 padding: 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }
 
 .audio-player2 .mycontrols button {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: #ddd;
 color: #111;
 border: none;
 cursor: pointer;
 
 transition: background-color 0.2s ease-in-out;
 
 }
 
 .audio-player2 .mycontrols button:hover {
 
 
 background-color: #444;
 
 
 }
 
 
 .mainheading{
 
 font-size:25px;
 
 }
 .audio-player2 .mycontrols .play-pause-btn {
 width: 60px;
 height: 60px;
 font-size: 24px;
 }
 
 .audio-player2 .myprogress-bar {
 width: 100%;
 height: 4px;
 background-color: #444;
 border-radius: 10px;
 overflow: hidden;
 }
 
 .audio-player2 .myprogress-bar .myprogress {
 width: 0%;
 height: 100%;
 background-color: #66ccff;
 transition: width 0.1s linear;
 }
 
 .download-btn-bottom {
 
 position: relative;
 bottom: 20%;
 left: 50%;
 transform: translateX(-50%);
 
 padding: 10px 20px;
 
 margin-top:50px;
 border: none;
 
 cursor: pointer;
 
 padding: 10px 30px 10px 30px;
 border-radius: 8px;
 
 border: 0px;
 
 background: linear-gradient(to right, #0055aa, #e0e0f8);
 color: #ffffff;
 }
 
 /* Increase spacing between menu items */
 .menu-links a {
 margin-bottom: 15px; /* Increased from 20px */
 display: flex;
 align-items: center;
 gap: 18px; /* Increased space between icon and text */
 }
 
 /* Push the first link down a bit */
 .menu-links a:first-child {
 margin-top: 20px;
 }
 
 .picture-container a{
 
 text-decoration:none;
 color:#ddd;
 
 
 }
 
 .picture-container a:hover{
 
 text-decoration:none;
 color:#0055aa;;
 
 
 }
 
 
 
 .shareitems{
 
 text-align:center;
 align-self:center;
 align-items:center;
 }
 .thetitle{
 
 font-size:25px ;
 padding:10px;
 text-align:center;
 
 }
 
 
 .titleparagraph{
 
 text-align:center;
 
 }
 .gradient3 img{
 
 
 object-fit:cover;
 
 width:100%;
 }
 
 .flex-containerbluetick2 {
 font-size: 1rem;
 gap: 10px;
 }
 
 .flex-containerbluetick2 img {
 width: 24px;
 height: 24px;
 vertical-align:middle;
 }
 
 .flex-containerbluetick {
 font-size: 1rem;
 gap: 10px;
 }
 
 .flex-containerbluetick img {
 width: 24px;
 height: 24px;
 vertical-align:middle;
 }
 
 
 
 
 
 .social-links {
 display: flex;
 justify-content: center;
 margin-top: 40px;
 }
 
 .social-link {
 margin: 0 10px;
 font-size: 24px;
 }
 
 .myicons a{
 text-decoration:none;
 
 }
 
 .flex-containerbluetick {
 display: flex;
 padding:10px;
 align-items:center;
 }
 
 .flex-containerbluetick img {
 margin-left: 5px; /* Optional: adds some space between the word and image */
 width:10px;
 height:10px;
 border-radius:50%;
 object-fit:cover;
 border:none;
 
 }
 
 .flex-containerbluetick2 img {
 margin-left: 5px; /* Optional: adds some space between the word and image */
 width:15px;
 height:15px;
 border-radius:50%;
 object-fit:cover;
 border:none;
 vertical-align:middle;
 
 }
 .mysocials2{
 border:none;
 
 }
 
 
 .top-songs, .featured-artists {
 display: flex;
 overflow-x: auto;
 gap: 15px;
 padding: 20px;
 scroll-behavior: smooth;
 }
 .top-songs::-webkit-scrollbar, .featured-artists::-webkit-scrollbar {
 display: none;
 }
 .song-item, .artist-item {
 flex: 0 0 auto;
 text-align: center;
 background: #ffffff;
 padding: 10px;
 border-radius: 12px;
 box-shadow: 0 0 10px rgba(0, 207, 255, 0.3);
 transition: 0.3s;
 width: 150px;
 }
 .song-item:hover, .artist-item:hover {
 box-shadow: 0 0 20px rgba(0, 207, 255, 0.6);
 transform: translateY(-5px);
 }
 .song-item img, .artist-item img {
 width: 150px;
 height: 150px;
 object-fit: cover;
 border-radius: 8px;
 border: 3px solid #0066cc;
 }
 
 .play-button8 {
 /*
 padding: 12px 28px;
 */
 padding: 10px 30px;
 border: none;
 border-radius: 8px;
 background: linear-gradient(135deg, #0055aa, #e0e0f8);
 color: #ffffff;
 font-weight: bold;
 font-size: 16px;
 cursor: pointer;
 transition: all 0.3s ease;
 box-shadow: 0 0 15px #0055aa88;
 animation: pulse 2s infinite;
 letter-spacing: 1px;
 font-size:12px;
 }
 
 
 
 
 /* Bottom Nav Default (dark mode) */
 .bottom-nav a {
 text-decoration: none;
 color: #111333;
 font-size: 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 transition: color 0.3s, text-shadow 0.3s;
 }
 
 /* When active */
 .bottom-nav a.active {
 color: #0066cc;
 text-shadow: 0 0 10px #0066cc;
 
 }
 
 /* Hover effect */
 .bottom-nav a:hover {
 color: #0066cc;
 text-shadow: 0 0 10px #0066cc;
 }
 
 
 
 
 .play-button8:hover {
 background: linear-gradient(135deg, #ffffff, #0055aa);
 color: #ffffff;
 transform: scale(1.1);
 box-shadow: 0 0 30px #0055aa;
 }
 @keyframes pulse {
 0% { box-shadow: 0 0 10px #0055aa66; }
 50% { box-shadow: 0 0 20px #0055aaaa; }
 100% { box-shadow: 0 0 10px #0055aa66; }
 }
 h1, h2, h3 {
 color: #0066cc;
 margin: 8px;
 
 }
 p {
 color: #444;
 margin: 10px 0;
 }
 
 
 
 
 .mybluetick{
 
 
 
 
 
 width: 10px; 
 height: 10px;
 
 }
 
 
 .menu-links {
 padding-top: 10px;
 
 }
 
 .menu-links li {
 margin: 15px 0;
 }
 
 .menu-links li a {
 font-size: 1.5rem;
 color: #111333;
 transition: color 0.3s;
 }
 
 .menu-links li a:hover {
 color: #0066cc;
 }
 
 .image-grid {
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 gap: 10px;
 }
 
 .image-grid img {
 width: 100%; /* adjust the width as needed */
 height: 150px; /* adjust the height as needed */
 object-fit: cover;
 border-radius: 8px;
 margin: 0;
 }
 
 
 .image-container60 {
 width: 100%;
 margin: 10px;
 border: 4px solid #f1f1f1;
 height: 350px;
 border-radius:8px;
 
 
 
 }
 
 .sameimage {
 height: 75%;
 background-size: 300px 300px;
 background-position: center;
 background-repeat: no-repeat;
 position: relative;
 
 width:200px;
 }
 
 .image-text60 {
 font-size: 12px;
 height: 25%;
 background-color: #f0f0f0;
 padding: 10px;
 margin:0px;
 overflow: hidden;
 border: 4px solid #f1f1f1;
 
 
 
 }
 
 .image-time {
 font-size: 8px;
 color: #666;
 
 }
 
 .image-time::before {
 content: "\25CF";
 font-size: 10px;
 color: #666;
 margin: 0px;
 }
 
 
 
 
 /* Artist info & summary blocks */
 summary {
 color: #0077cc;
 }
 
 .artistinfo p, .artistinfo summary {
 color: #333;
 }
 
 /* Lyrics & Text Blocks */
  .mysong,
  .onefour,
  .related-music-texts,
  .mylyrics,
  .lyrics {
  color: #222;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  }
  
  .buttonothers {
  margin:60px;
  display: inline-block;
  padding: 10px 20px;
  background-color: #fff;
  color: #12054a;
  font-weight:bold;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0px 5px 0px #00ccff;
  transition: all 0.3s ease-in-out;
  border: 1px solid #00ccff;
  
  }
  
  .buttonothers:hover {
  background-color: #f7f7f7;
  box-shadow: 0px 5px 0px #3e8e41;
  transform: translateY(-5px);
  border:1px solid #3e8e41;
  color: #3e8e41;
  }
  
  .buttonothers:active {
  box-shadow: none;
  transform: translateY(5px);
  }
  
  .buttonothers::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  transform: scale(0);
  transition: all 0.3s ease-in-out;
  }
  
  .buttonothers:hover::before {
  transform: scale(1);
  }
  
  
  
  
  .artistlyrics{
  
  text-align:center;
  
  
  
  }
  /*
  .lyrics{
  
  text-align:center;
  padding:40px;
  
  
  }
  
  */
  .mylyrics{
  font-family: 'Georgia', serif;
  
  padding: 40px;
  color: #333;
  line-height: 1.6;
  }
  .lyrics {
  
  padding: 30px;
  border-radius: 10px;
  max-width: 700px;
  margin: auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  
  
  
  .artistinfo summary{
  
  margin:40px;
  
  
  }
  .artistinfo p{
  
  margin:20px;
  
  
  }
  
  
  .artistinfo .flex-containerbluetick span{
  
  margin-left:10px;
  text-decoration:none;
  
  }
  
  
  
  .thecardtest {
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  max-width: 500px;
  }
  
  .card-img {
  width: 100%;
  height: auto;
  display: block;
  }
  
  .card-body {
  padding: 1rem;
  }
  
  .card-body h2 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  }
  
  .card-body p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.4;
  }
  
  
 
 }
 
 
 
 
 
 
 
 
 
 
 @media (min-width: 768px) {
 .hamburger {
 display: none;
 }
 
 .menu-links {
 position: static;
 flex-direction: row;
 background: none;
 height: auto;
 padding: 0 20px;
 left: auto;
 top: auto;
 width: auto;
 display: flex !important;
 align-items: center;
 gap: 20px;
 box-shadow: none;
 justify-content: flex-end;
 }
 
 .menu-links a {
 font-size: 1rem;
 margin: 0;
 color: #00CFFF;
 }
 
 .menu-links a:hover {
 color: white;
 }
 
 .bottom-nav {
 display: none;
 }
 }
 
 @media (min-width: 1024px) {
 /* Content container layout for desktop */
 .image-container2 {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 gap: 20px;
 max-width: 1000px;
 margin: 0 auto;
 overflow-x: visible;
 }
 
 .image-item2 {
 flex: none;
 }
 
 .my-images,
 .related-music-container,
 .picture-container,
 .container1 {
 max-width: 1000px;
 margin: 0 auto;
 }
 
 /* Typography improvements */
 body {
 font-size: 16px;
 }
 
 h1, h2, h3 {
 font-size: 2rem;
 }
 
 .image-text {
 font-size: 1rem;
 }
 
 /* Center and enlarge section titles */
 .me h3,
 .related-music-texts {
 text-align: center;
 font-size: 2.2rem;
 color: #00CFFF;
 margin-top: 40px;
 }
 }
 @media (min-width: 1024px) {
 /* Universal heading enhancement */
 h1, h2, h3, .playsong, .related-music-texts, .related-music-texts2, .lists, .image-text, .me h3, .onethree h3 {
 text-align: center;
 color: #00CFFF;
 font-size: 2rem;
 margin: 30px 0 10px;
 }
 
 /* Optional link enhancements */
 .Card a {
 color: #00CFFF;
 font-size: 18px;
 text-align: center;
 display: block;
 }
 
 .image-text {
 font-size: 1.2rem;
 }
 
 .lists {
 font-size: 1.5rem;
 }
 }
 
 
 @media (min-width: 1024px) {
 .greek-container {
 width: 300px;
 height: 300px;
 border: 4px solid #00ccff;
 }
 
 .greek-container img {
 width: 80%;
 height: 85%;
 }
 }
 
 
 
 
 @media (min-width: 1024px) {
 .audio-player2 {
 width: 600px;
 padding: 30px;
 border-radius: 25px;
 box-shadow: 0 0 15px rgba(0, 207, 255, 0.4);
 }
 
 .audio-player2 .mycontrols button {
 width: 50px;
 height: 50px;
 font-size: 20px;
 }
 
 .audio-player2 .mycontrols .play-pause-btn {
 width: 70px;
 height: 70px;
 font-size: 28px;
 }
 
 .audio-player2 .myprogress-bar {
 height: 6px;
 }
 
 .download-btn-bottom {
 font-size: 18px;
 padding: 12px 40px;
 }
 }
 
 
 
 @media (min-width: 1024px) {
 /* General button scaling */
 .slide-button,
 .play-button8,
 .submitbutton,
 .submitbutton5,
 .download-button button,
 .download-btn,
 .download-btn-bottom {
 font-size: 18px;
 padding: 14px 36px;
 border-radius: 12px;
 }
 
 .play-pause-btn,
 .next-btn,
 .prev-btn {
 width: 60px;
 height: 60px;
 font-size: 24px;
 }
 
 .download-btn-bottom {
 font-size: 18px;
 padding: 12px 40px;
 }
 
 #theme-toggle {
 font-size: 24px;
 padding: 14px;
 }
 }
 @media (min-width: 1024px) {
 .gradient3 {
 padding: 40px;
 border-radius: 12px;
 max-width: 1100px;
 margin: 0 auto;
 }
 
 .gradient44 {
 padding: 20px;
 }
 
 .image-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 gap: 20px;
 overflow-x: visible;
 }
 
 .image-container60 {
 height: 400px;
 border: 4px solid #f1f1f1;
 border-radius: 12px;
 padding: 10px;
 }
 
 .sameimage {
 width: 100%;
 height: 260px;
 background-size: cover;
 border-radius: 8px;
 }
 
 .image-text60 {
 font-size: 14px;
 padding: 12px;
 height: auto;
 background-color: #f8f8f8;
 border: 2px solid #ddd;
 border-radius: 0 0 8px 8px;
 }
 
 .image-time {
 font-size: 12px;
 color: #888;
 }
 
 .image-text26 {
 font-size: 14px;
 padding-top: 8px;
 border-bottom: 2px solid #ccc;
 }
 }
 
 
 
 @media (min-width: 1024px) {
 /* Flex container with blue tick */
 .flex-containerbluetick2 {
 font-size: 1rem;
 gap: 10px;
 }
 
 .flex-containerbluetick2 img {
 width: 24px;
 height: 24px;
 vertical-align:middle;
 }
 
 /* Picture grid layout for recent uploads */
 .picture-row {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 gap: 20px;
 margin-bottom: 30px;
 }
 
 .picture {
 width: 100%;
 }
 
 .picture img {
 width: 100%;
 height: auto;
 border-radius: 8px;
 }
 
 /* Related music section */
 .related-music-container {
 padding: 25px;
 border-radius: 16px;
 margin: 30px auto;
 max-width: 1100px;
 }
 
 .related-music-image {
 width: 160px;
 height: 160px;
 }
 
 .related-music-text {
 font-size: 16px;
 }
 
 .image-text-play-container {
 gap: 20px;
 }
 
 /* Social sharing section */
 .social-sharing {
 padding: 30px;
 display: flex;
 justify-content: center;
 gap: 30px;
 }
 
 .social-sharing a {
 font-size: 24px;
 }
 
 /* Misc. headings and spacing */
 .me h3,
 .me2,
 .onethree h3,
 .lists,
 .meu {
 text-align: center;
 font-size: 2rem;
 color: #00CFFF;
 margin: 40px 0 20px;
 }
 
 .lists {
 font-size: 1.6rem;
 }
 }
 @media (min-width: 1024px) {
 /* image-container (carousel layout) */
 .image-container,
 .image-container6 {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 gap: 20px;
 max-width: 1100px;
 margin: 0 auto;
 overflow-x: visible;
 padding: 20px;
 }
 
 .image-item,
 .image-item3,
 .image-item6 {
 width: 100%;
 padding: 16px;
 border-radius: 12px;
 box-shadow: 0 0 15px rgba(0, 207, 255, 0.3);
 }
 
 .image-item3 img,
 .image-item img,
 .image-item6 img {
 width: 100%;
 height: auto;
 object-fit: cover;
 border-radius: 8px;
 }
 
 /* image-item text blocks */
 .image-item a,
 .image-item3 a {
 font-size: 1rem;
 text-align: center;
 color: #00CFFF;
 }
 
 /* center class image */
 .center {
 width: 400px;
 height: 400px;
 display: block;
 margin: 0 auto;
 border-radius: 12px;
 border: 3px solid #f1f1f1;
 }
 
 /* some-words section */
 .some-words {
 font-size: 1.1rem;
 text-align: center;
 padding: 20px;
 }
 
 .some-words a {
 color: #00CFFF;
 font-weight: bold;
 }
 
 /* Card component styling */
 .Card {
 max-width: 1000px;
 margin: 40px auto;
 padding: 30px;
 border-radius: 12px;
 background-color: #111;
 box-shadow: 0 0 15px rgba(0, 207, 255, 0.2);
 font-size: 1.2rem;
 color: #00CFFF;
 }
 }
 @media (min-width: 1024px) {
 /* Flex container with blue tick */
 .flex-containerbluetick2 {
 font-size: 1rem;
 gap: 10px;
 }
 
 .flex-containerbluetick2 img {
 width: 24px;
 height: 24px;
 vertical-align:middle;
 }
 .flex-containerbluetick {
 font-size: 1rem;
 gap: 8px;
 }
 
 .flex-containerbluetick img {
 width: 24px;
 height: 24px;
 vertical-align:middle;
 }
 
 /* Picture grid layout for recent uploads */
 .picture-row {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 gap: 20px;
 margin-bottom: 30px;
 }
 
 .picture {
 width: 100%;
 }
 
 .picture img {
 width: 100%;
 height: auto;
 border-radius: 8px;
 }
 
 /* Related music section */
 .related-music-container {
 padding: 25px;
 border-radius: 16px;
 margin: 30px auto;
 max-width: 1100px;
 }
 
 .related-music-image {
 width: 160px;
 height: 160px;
 }
 
 .related-music-text {
 font-size: 16px;
 }
 
 .image-text-play-container {
 gap: 20px;
 }
 
 /* Social sharing section */
 .social-sharing {
 padding: 30px;
 display: flex;
 justify-content: center;
 gap: 30px;
 }
 
 .social-sharing a {
 font-size: 24px;
 }
 
 /* Misc. headings and spacing */
 .me h3,
 .me2,
 .onethree h3,
 .lists,
 .meu {
 text-align: center;
 font-size: 2rem;
 color: #00CFFF;
 margin: 40px 0 20px;
 }
 
 .lists {
 font-size: 1.6rem;
 }
 }
 
 
 .artist-with-tick {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 }
 @media (min-width: 1024px) {
 .artist-with-tick {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 1rem;
 }
 
 .artist-with-tick .flex-containerbluetick2 img {
 width: 20px;
 height: 20px;
 }
 }