@media (min-width: 1080px) {

  .SocialIcons {
  width: 500px;
  gap: 50px;
  }
  
  .Bnote{
    margin-bottom: 100px;  
  }
  
}

@media (min-width: 580px) {

  .SocialIcons {
  width: 500px;
  gap: 50px;
  }
  
}

/* 2xl */
@media (max-width: 1536px) {}

/* xl */
@media (max-width: 1280px) {

  .Bnote{
    margin-bottom: 100px;  
  }

}

/* lg */
@media (max-width: 1024px) {
  .spinIcon {
    width: 40%;
  }
  
  .BeatBond {
    width: 60%;
  }
}

/* md */
@media (max-width: 768px) {}

/* sm */
@media (max-width: 640px) {
  
  .spinIcon {
    width: 40%; /* Smaller logo */
  }

  .floating-controls {
    left: 10px; /* Restored to original position */
    bottom: 80px; /* Restored to original position */
  }

  #replay-btn,
  #play-pause-btn {
    width: 40px; /* Smaller buttons */
    height: 40px;
    font-size: 1em;
  }

  #load-more-btn {
    width: 90%; /* Full width */
    padding: 10px;
    font-size: 20px;
  }

  #now-playing-name {
    font-size: 1em; /* Smaller text */
  }

}

/* xs */
@media (max-width: 475px) {}

/* Disable text selection and long-press context menu */
.no-long-press {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*  BORDERS  *

.socialhold{
  border: 1px solid rgb(128, 0, 0);
}

.SocialIcons{
  border: 1px solid green;
}



/**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**/

.Bnote{
align-content: center;
text-align: center;
justify-content: center;
color: white;
width: 300px;
height: auto;
}

h5{
  font-family: "courier new" ;
  font-size: 1em;
  color:white;
  position: relative;
  top: 15px;  
}

body{ 
  background: rgba(0, 0, 0, 0.947);
}

img{
  max-width: 100%;
  max-height:100%;

}

header {
  display: flex;
  justify-content: center;
  margin-bottom: 200px;
}

.iconshell {
  display: flex;
  justify-content: center;
  height: auto;
  width: auto;
}

.spinIcon {
  width: 35%;
  height: auto;
}

.socialhold{
display:flex;
width: 100%;
justify-content: center;
margin-bottom: 100px;
}

.SocialIcons{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  will-change: transform; /* Optimize for animations */
}

.socialmediaicon{
  width:200px;
}

.snapchat{
  padding: 25px;
  width: 130px;
}

.instagram{
width: 125px;
padding: 25px;
}

.youtube{
width: 150px;
position: relative;
bottom: 13px;
padding: 25px;
}

.beatstars{
position: relative;
right: 10px;
width: 200px;
bottom: 10px;
}

.MID {
  display: flex;
  justify-content: center;
}

.infoText {
  display: flex;
  justify-content: center;
}

.infoText2 {
  display: flex;
  justify-content: center;
  position: relative;
  bottom: 30px;
}

h5 {
  color: white;
  position: relative;
  top: 25px;
}

h2 {
  color: white;
  font-size: 1.4em;

}

h3{
  color: white;
  position: center;
  top: 25px;
}


/* Help Button */

#help-btn {
  position: fixed;
  right: 10px; /* Position on the right side */
  bottom: 80px; /* Same as floating controls */
  background-color: #555555;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  color: white;
  transition: background-color 0.3s ease;
  z-index: 1000; /* Ensure it's above other elements */
  opacity: 80%;
}

#help-btn:hover {
  background-color: rgba(255, 255, 255, 0.718);
  opacity: 100%;
}

/* Help Menu */

.help-menu {
  display: none; /* Hidden by default */
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(0, 0, 0);
  padding: 30px; /* Increased padding */
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  z-index: 1001; /* Above other elements */
  width: 400px; /* Slightly wider */
  max-width: 90%;
  color: white;
  font-size: 18px; /* Increased base font size */
  text-align: center; /* Center-align all text */
  opacity: 100%;
}

.help-content { 
  border: solid 1px white;
  padding: 30px 15px 30px 15px;
}

.help-menu h3 {
  margin-top: 0;
  font-size: 24px; /* Larger heading */
  margin-bottom: 20px; /* Added spacing */
}

.help-menu p {
  margin: 15px 0; /* Increased spacing between paragraphs */
  line-height: 1.6; /* Improved readability */
  font-size: 1.5em;
}

.help-menu strong {
  color: #ffcc00; /* Highlight key terms */
}

#close-help-btn {
  background-color: #555555;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 16px; /* Larger button text */
  margin-top: 20px; 
  margin-bottom: 20px; 
  display: inline-block; /* Center the button */
}

#close-help-btn:hover {
  background-color: rgba(255, 255, 255, 0.718);
}

/*  FOOTER */ 

footer {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center items horizontally */
  justify-content: center; /* Center items vertically */
  margin-bottom: 50px;
}

body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Replace or modify these styles */
.menu-icon-container img, 
.menu-container .close-icon img {
  height: 40px; /* Adjust as needed */
  width: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.menu-icon-container img:hover,
.menu-container .close-icon img:hover {
  transform: scale(1.1);
}

/* Remove or update the SVG-specific styles */
.top {
  margin-top: 150px;
  height: 100%;
}

.close-icon {
  position: absolute;
  top: 35px;
  right: 35px;
  z-index: 1005;
}

.menu-icon-container {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 35px;
  right: 35px;
  box-sizing: border-box;
  z-index: 1005;
}

.menu-icon-container svg {
  height: 40px;
  cursor: pointer;
}

.menu-container {
  position: fixed;
  background: rgb(128, 126, 126);
  inset: 0;
  font-family: "Roboto", sans-serif;
  height: 0;
  overflow: hidden;
  z-index: 1005;
}

.menu-container .close-icon svg {
  height: 40px;
  cursor: pointer;
  transform: translateX(30px);
  opacity: 0;
}


.menu-container .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.menu-container .menu-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.dropitems{
  display: flex;
  justify-content: center;

}

.menu-items{
  width: 200px;
  height: auto;
  justify-content: center;
}