/*post styling*/

/*scroll bar coloring*/
::-webkit-scrollbar {
        width: .32em;
        }

        ::-webkit-scrollbar-track {
        background-color: #e4e4e4;
        -webkit-border-radius: .4em;
        border-radius: .4em;
        border: 1px solid #ccc;
        }

        ::-webkit-scrollbar-thumb {
        -webkit-border-radius: .4em;
        border-radius: .4em;
        background: #e4e4e4;
        border: .04px solid #aaa;
        }
        
body{
  
  background-image: url("https://files.catbox.moe/fcpq37.jpg");
  background-repeat: no-repeat;
   background-size: 100% 100%;
   background-position: center;
   background-attachment: fixed;
   
   font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  max-height: 40em;
  overflow-x: hidden;
  overflow-y: hidden;
  
  font-size: 25px;
}

#button1:hover,#button2:hover,#button3:hover {
  transform: rotate(10deg);
}

#button1{
  position:relative;
  width:4em;
  top:24.6em;
  left:1em;
}

#button2{
  position:relative ;
  top:24.6em;
  left: 7em;
  width:4em;
}
#button3{
  position: relative;
  top: 24.6em;
  left:13em;
  width:4em;
}
#post{
  position:relative;
  top:-12em;
  left:30em;
  overflow-x:hidden;
    overflow-y:scroll;
    height:26.2em;
    width: 27em;
    word-wrap: break-word;
    font-size: 1em;
}
#label1{
  position: relative;
  font-size: 15px;
  width: 100px;
  text-align: center;
  top:590px;
  left:15px;
}
#label2{
  position: relative;
  font-size: 15px;
  width: 100px;
  text-align: center;
  top:540px;
  left:280px;
}
#label3{
  position: relative;
  font-size: 15px;
  width: 100px;
  text-align: center;
  top:510px;
  left:545px;
}
h1{

  position: relative;
  left:15em;
  top: -5.5em;
  
}
h2{
  position:relative;
  top:-28.2em;
  left:32em;

}
/*music player*/
#musicicon{
  width:50px;
}
        #music-player {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #music-player {
            height: 1.425em;
            width: 1.425em;
            font-size: 1.5em;
            padding: 0.125em;
            border-radius: 50%;
            border: 6px dotted #2e2a28;
            background: #6e5a4d;
            position: relative;
            top: -30.75em;
            left: 0em;
            z-index: 1200;
            -webkit-animation: spin 4s linear infinite;
            -webkit-animation: spin 8s linear infinite;
            -moz-animation: spin 8s linear infinite;
            animation: spin 8s linear infinite;
        }
        @-moz-keyframes spin {
            100% {
                -moz-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes spin {
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @keyframes spin {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #music-player:hover {
            -webkit-animation: pop 2s ease;
        }