.motherD{

    display: block;
  position: relative;
  align-items: flex-start;
  gap: 20px;

}

.player {

  position: fixed;
  top: 220px;
  left: calc(50% - 600px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #13127ac1;
  border-radius: 12px;
  z-index: 10;

}

#playBtn{

  border: none;
  cursor: pointer;
  background-color: #14127a4e;
  padding: 0;
  width: 90px;
  height: 90px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;

}

#playIcon {

  width: 52px;
  height: 52px;

}

#volumeSlider {
  width: 90px;
}

.header-box{
background-color: #00000096;
margin: 0 270px;
border-radius: 35px;
}



h1{
  
  color: rgb(36, 153, 255);
  
}
h3{color: #c0c73c;}
p{

color: white;

}

body{

background-image: url("bg.png");
background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

}
.BGBOX{

    background-color: #13127ac1;
    flex: 1;
}
.MBAR {
     display: flex;
    justify-content: center;
    gap: 70px;
background-color:  #a87900ca;
 max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 0;
    box-shadow:
        4px 0 0 0 white,
        -4px 0 0 0 white,
        0 4px 0 0 white,
        0 -4px 0 0 white;
}

.MBAR a{
    border: none;
    background-color: #982c81e6;
    box-shadow:
        4px 0 0 0 black,
        -4px 0 0 0 black,
        0 4px 0 0 black,
        0 -4px 0 0 black;
    font-family: "Pixelify Sans", sans-serif;
    font-size: 20px;
    text-decoration: none;
    color: #f8f8f6;
    padding: 16px 36px;
    transition: all 0.3s ease;

}
.MBAR a:hover{

    background-color: #a200ff;
    color: rgb(247, 247, 247);

}