body {
    font-size: 15pt;
    margin:0px;
    font-family: sans-serif;
  }
  
  
  .page1{
  width: 100%;
  height: 165dvh;
  background: white;
  display: block;
  overflow: hidden;
  }
  
  div{
  
  }
  
  .profile{
  width: 100%;
  height: 220px;
  background: black;
  background-image: url("imgWebsite/profile2.jpg");
  background-size: 100%;
  position: relative;
  bottom:0px;
  overflow:hidden;
  }
  
  .profile h2{
  position: relative;
  top:5px;
  left:35px;
  color:lightgray;
  letter-spacing: 1px;
  line-height: 3px;
  text-shadow: 0 0 5px black;
  
  }
  .profile h3{
    position: relative;
    top:5px;
    left:35px;
    color:lightgray;
    letter-spacing: 1px;
    line-height: 3px;
    text-shadow: 0 0 5px black;
    
    }
  
  
  .songContainer{
  width: 100%;
  height: 200dvh;
  background: #151515;
  
  position:relative;
  top:0px;
  }
  
  
  .songs{
  width: 100%;
  height: 70px;
  margin:auto;
  margin-bottom: 2px;
  display:grid;
  grid-template-columns: 20% 60% 20%;
  margin-left: 5px;
  color:whitesmoke;
  }
  
  
  audio{
  position: absolute;
  z-index: -1;
  top:160px;
  }
  
  
  .songs:active{
  background:gray;
  color: green;
  }
  
  .songImg,.dot{
  align-items: center;
  justify-content:center;
  display:flex;
  
  }
  
  
  .songImg img{
  width: 70%;
  height: 70%;
  border-radius: 10%;
  
  }
  
  .songName{
  overflow:hidden;
  
  line-height: 1px;
  font-size: 0.5em;
  position: relative;
  top:13px;
  left:0px;
  }
  
  .songName h2{
  
  }
  
  .dot img{
  width: 30%;
  height: 30%;
  position:relative;
  left:20px;
  }
  
  
  
  
  
  
  .musicBottom{
  position: fixed;
  bottom: 10px;
  background:#0C0C0C;
  width: 95%;
  height: 65px;
  left:6px;
  border-radius: 10px;
  display:grid;
  grid-template-columns: 20% 60% 20%;
  display:none;
  }
  
  .div1{
  align-items: center;
  justify-content:center;
  display:flex;
  }
  
  
  
  #bImg{
  height: 65%;
  width: 65%;
  border-radius: 10%;
  }
  
  #bpause{
  height: 50%;
  width: 50%;
  border-radius: 10%;
  }
  
  .musicBottom div{
  font-size:.6em;
  color:whitesmoke;
  }
  
  .div2{
  overflow:hidden;
  color:whitesmoke;
  line-height: 1px;
  font-size: 0.6em;
  position: relative;
  top:12px;
  left:0px;
  }
  
  
  
  
  
  
  
  
  
  
  .page2{
  
  width: 100%;
  height: 100dvh;
  background:#151515;
  color: white;
  overflow: hidden;
  position: absolute;
  z-index: 0;
  display:block;
  
  
  }
  
  div{
  /*  border:1px solid white;*/
  }
  
  .back{
  width: 100%;
  height: 70px;
  }
  
  .back div{
  width: 30px;
  height: 30px;
  position:relative;
  top:25px;
  left:10px;
  }
  
  .back img{
  width: 100%;
  height: 100%;
  }
  
  .musicImage{
  align-items: center;
  justify-content:center;
  display:flex;
  width: 100%;
  height: 400px;
  }
  
  .musicImage img{
  width: 90%;
  height: 90%;
  border-radius: 10%;
  }
  .Mname{
  width: 100%;
  height: 70px;
  overflow: hidden;
  position:relative;
  left:30px;
  line-height: -0px;
  letter-spacing: 1px;
  }
  
  
  .Mname p{
  color:gray;
  }
  .timer{
  width: 100%;
  height: 50px;
  overflow: hidden;
  }
  
  .line{
  height: 3px;
  width: 85%;
  margin:auto;
  border-radius: 10px;
  background:whitesmoke ;
  position: relative;
  top:15px;
  }
  
  .circle{
  width: 15px;
  height: 15px;
  border-radius:50%;
  background: white;
  position:relative;
  top:6px;
  left:30px;
  animation-name: circle;
  animation-duration: 20s;
  animation-timing-function: linear;
  display:block;
  
  }
  
  @keyframes circle{
  from{left:30px;}
  to{left:355px}
  }
  
  .h{
  height: 20px;
  width: 85%;
  margin:auto;
  color:darkgray;
  font-size:.7em;
  position:relative;
  left:0px;
  top:10px;
  }
  
  
  #num2{
  position:relative;
  left:282px;
  }
  
  .next{
  width: 100%;
  height: 100px;
  overflow: hidden;
  display:flex;
  margin:auto;
  }
  
  .next div{
  width: 80px;
  height: 80px;
  border-radius:50%;
  background:none;
   margin:auto;
   position:relative;
  }
  
  .next img{
  height: 50%;
  width: 50%;
  position: relative;
  top:13px;
  left:13px;
  }
  
  #left{
  position:relative;
  
  }
  
  #center{
  position:relative;
  height: 100%;
  width: 100%;
  right:0px;
  left:0px;
  top:-5px;
  transition:1s;
  }
  
  #right{
  position:relative;
  
  
  }
  
  #center:active{
  transform: scale(1.9);
  }
  
  #right:active{
  transform: scale(1.4);
  }
  
  #left:active{
  transform: scale(1.4);
  }
  
  
  #g{
  position: relative ;
  z-index:0;
  width: 100px;
  height: 100px;
  background:red;
  left:50%
  }
  
  
  .songs p{
  color: gray ;
  }
  
  
  .songContainer{
  height: 100dvh;
  }
  
  .page1{
  height: 100dvh;
  }
  
  
  
  
  #title{
  transition:.8s;
  }