/* made by /powfu! see /resource 4 more templates and awesome code snippets! ✧ദ്ദി( ˶^ᗜ^˶ ) */

#top {
 margin: auto;
 width: 420px;
 height: 165px;
  border: 2px solid transparent;
  img {
   width: 35%; 
    border-radius: 100px; 
    float: left; 
    margin-right: 13px; 
  }
}

#buttons {
 margin: 40px;
 width: 400px;
 margin: 20px;
  margin-left: 5px;
 height: 60px;
}

#allbutton {
 border: 1px solid darkgrey;
  border-radius: 20px;
 width: 175px;
 height: 40px;
 padding: 3px;
  margin: auto;
  margin-top: 20px;
  p, b {
    line-height: 0px;
    text-align: center;
    margin-top: 16px;
  }
}

#editbutton {
 border: 1px solid darkgrey;
  border-radius: 20px;
 width: 75px;
 height: 40px;
 padding: 3px;
  float: left;
  p, b {
    line-height: 0px;
    text-align: center;
    margin-top: 16px;
  }
}

#playlists {
 width: 300px;
 height: auto;
  p {
   line-height: 22px; 
    margin-top: 7px;
  }
}

#lists {
width: 200px;
height: 63px;
border: 2px solid transparent;
margin-top: 5px;
  img {
 width: 60px; 
 float: left; 
 border-radius: 4px;
 margin-right: 5px;
  }
  a {
   color: var(--text);
   text-decoration: bold;
  }
}

#share {
 background-image: var(--share); 
 background-size: 100%;
 width: 30px;
 height: 30px;
 margin-left: 100px;
  margin-top: 0px;
}

#more {
 background-image: var(--more); 
 background-size: 100%;
 width: 30px;
 height: 30px;
  float: left;
 margin-left: 90px;
  margin-top: -29px;
}

#e {
 color: grey;
 font-size: 15px;    text-indent: 5px;
}

main {
  margin: auto;
  width: 450px;
}

:root[data-theme="light"] {
    --text: white;
    --color: black;
    --background: white;
    --cont: black;
  --share: url(https://i.postimg.cc/L56TVFT0/icon-light.png);
    --more: url(https://i.postimg.cc/C5gCxBd8/image.png);
}

:root[data-theme="dark"] {
    --text: black;
    --color: white;
    --background: black;
    --cont: white;
  --share: url(https://i.postimg.cc/wjFrKFtN/icon-dark.png);
      --more: url(https://i.postimg.cc/3rz5n3Vv/more-dark.png);
}

body {
 background: var(--background); 
}

.button, .button:hover {
 background: none;
 color: var(--color);
}

.text-container {
 background:var(--cont); 
  box-shadow: 0px 0px 20px var(--cont);
  overflow: hidden;
  * {
   color: var(--text); 
  }
}

*, a {
 color: var(--color); 
  font-family: arial;
}