/* CSS stuff for my blog main page */
::-webkit-scrollbar {
        width: 8px;
        }

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

        ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #e4e4e4;
        border: 1px solid #aaa;
        }
         a.posts:visited{
      color:#2d2e2b;
  }
a.posts:link{
  color: black;
  text-decoration: none;
}
a.posts:hover{
      color:black ;
      background-color: #96a694;
      padding: 0px 10px 0px 5px;
    }
    #button2:hover,#button3:hover {
  transform: rotate(10deg);
}
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;
overflow: hidden;
  
}
h1{
  position: relative;
  top: 5px;
  left:100px;
}

h2{
  position:relative;
  left:750px;
  top:-100px;
  font-size: 50px;
}
#postlist{
  list-style: "*  ";  
  position: relative;
  left: 750px;
  top: -275px;
  font-size: 25px;
  overflow-x:hidden;
    overflow-y:scroll;
    height:26.2em;
    width: 23em;
    word-wrap: break-word;
}
/*latest post button*/
#button3{
  position: relative;
  top: 425px;
  left: 485px;
  width:75px;
}
#label2{
  position:relative;
  left:555px;
  top:375px;
}
/*home button*/
#button2{
  position:relative;
  width:75px;
  top:425px;
  left:1em;
}
#label1{
  position: relative;
  left:25px;
  top:415px;
}
/*music player*/
#musicicon{
  width:50px;
}
        #music-player {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #music-player {
            height: 2.425em;
            width: 2.425em;
            font-size: 1.5em;
            padding: 0.125em;
            border-radius: 50%;
            border: 6px dotted #2e2a28;
            background: #6e5a4d;
            position: relative;
            top: -1075px;
            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;
        }