html {
cursor: url('images/nyan.gif'), auto;
}
body {
width: 2000px;
height: 4000px;
position: relative;
display: block;
margin-left:auto;
margin-right: auto;
background-image: url(images/bg29.gif);
background-size: 5%;
}
.pic img {
position: fixed;
right: -1px;
bottom: -3px;

}
.pic2 img {
position: fixed;
left: -1px;
top: -3px;

}
.float1 {
 float: left;
 margin: 4px;
 
}
.float2 {
 float: right;
 margin-right: 4px;
 margin-top: 4px;
}
.videobox {
width: 200px;
height: 113px;
transform: scale(0.17);
float: right;
margin-right: 99px;
margin-top: -41px;

}
#maincontainer{
 width: 1320px; 
 max-height: 20000px;
 border-radius: 10px;
 border: 4px groove #ff9db1; 
 background-image: url(images/bg6.gif);
 background-size: 5%;
 margin-top: 40px;
 margin-left: 100px;
 margin-right: auto;
 text-align: left;
}
.leftcontainer {
 width: 200px;
 max-height: 2000px;
 margin-top: 20px;
 margin-left: 20px;
 float: left;
 border: 2px groove #ffbcbc;
 background-color: #fffae1;
}
.logcontainer {
 width: 181px;
max-height: 500px;
padding: 10px;
font-size: 20px;
}
.rightcontainer {
 width: 200px;
 height: 800px;
 margin-top: 227px;
 margin-right: 20px;
 float: right;
}
.under {
 width: 200px;
 max-height: 2000px;
 margin-top: 133px;
}
.container {
 width: 767px;
 max-height: 3000px;
 margin-left: 250px;
 margin-bottom: 20px;
 border: 2px groove #ffbcbc;
 background-image: url(images/bg28.gif);
 background-size: 2%;
 padding: 24px;
 border-bottom-right-radius: 40px;
 border-bottom-left-radius: 40px;
}
.container2 {
 width: 743px;
 max-height: 2000px;
 border: 2px groove #ffbcbc;
 background-color: #fffae1;
 padding: 10px;
}
.about {
 width: 748px;
 height: 333px;
 margin-top:5px;
 border-top: 2px groove #ffbcbc;
 border-bottom: 2px groove #ffbcbc;
font-size: 17px;
}
.header{ 
  height: 124px;
  width: 800px;
  margin-top: 20px;
  margin-left: 250px;
  padding: 6px; 
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  border: 4px groove #ffbcbc; 
  background-image: url(images/bg30.gif);
}
.head1{ 
  text-align: center;
  height: 17px;
  width: 160px;
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 6px; 
  border-radius: 40px;
  border: 1px groove red; 
  background-image: url(images/bg19.gif);
  box-shadow: -1px -1.4px 1px inset #d1d1d1, 2px 3px 1.5px inset white, 0px 0px 2px #bab8b8 ;
  text-shadow: white 1px 0px 0px, white 0.540302px 0.841471px 0px, white -0.416147px 0.909297px 0px, white -0.989992px 0.14112px 0px, white -0.653644px -0.756802px 0px, white 0.283662px -0.958924px 0px, white  0.96017px -0.279415px 0px;
  font-weight: 900;
  color: red;
}
.navbox{
  height: 25px;
  width: 817px;
  margin-left: 250px;
  border: 1px groove #ffbcbc; 
}
.navbutton{
  height: 25px;
  width: 167px;
  text-align: center;
  font-weight: 900;
  font-size: 20px;
  color: #ff3da5;
  background: linear-gradient(#ffd889, #fff3db);
}
.calbox{
  height: 210px;
  width: 200px;
  text-align: center;
  font-weight: 900;
  font-size: 20px;
  color: #ff3da5;
  float: right;
  margin-right: -209px;
  margin-top: 5px;
}a {
  color: #4747ff;
}
a:hover {
  color: hotpink;
}
li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
li:hover {
  margin-left: 10px;
}
h1 {
  background: linear-gradient(to right,#ffb3c6, #ffcba4, #fff2a8, #c8f7c5, #b8e7ff, #c7ceff, #e0c3fc,  #ffc6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 400px 14%;
  font-size: 60px;
  font-weight: 900;
  padding: auto;
  margin: auto;
} 
.blogcontent{
 width: 747px;
 margin-top: -15px;
 max-height: 1000px;
 font-size: 17px;
 border-bottom: 2px groove #ffbcbc;
}
.blogheader {
 width: 673px;
 height: 39px;
 font-size: 20px;
 text-align-last: left;
 padding-left: 75px;
 padding-top: 10px;
 background-image: url(images/bg32.gif);
 color:#ff3da5;
 font-weight: 550;
} 
.bottom{
 width: 761px;
 margin-top: 15px;
 font-size: 17px;
text-align: center;
 border: 2px groove #ffbcbc;
  border-radius: 50px; 
 background: linear-gradient(#fff3db, #ffd889);
}
#musicplayer{
    background-image: url(images/bg22.gif);
    border: 4px groove pink;
    border-radius: 8px; 
    box-shadow: -1px -1.4px 1px inset #d1d1d1, 2px 3px 1.5px inset white, 0px 0px 2px #bab8b8 ;
    width:180px;
    padding:10px;
    text-align:center; 
    display:flex;
    flex-direction:column;
    gap:10px;
    color:#5c320d;
    float:left;
    margin-top: 7px;
    margin-left: -11px;
}
#musicplayer .track-name,
#musicplayer .track-artist{
    overflow:hidden;
    white-space:nowrap;
    width:100%;
}

#musicplayer .track-name span,
#musicplayer .track-artist span{
    display:inline-block;
}

#musicplayer .track-name.marquee span,
#musicplayer .track-artist.marquee span{
    animation: marquee 8s linear infinite;
}

@keyframes marquee{
    0%{
        transform: translateX(100%);
    }

    100%{
        transform: translateX(-100%);
    }
}
#musicplayer .track-info{
    overflow:hidden;
}
#musicplayer .track-name,
#musicplayer .track-artist{
    max-width:100%;
    overflow:hidden;
}
.songtitle, .track-info, .now-playing{
    padding:5px;
    color:#5c320d;
}

.controls{
    display:flex; 
    flex-direction:column; 
    color:#5c320d;
}

.buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    color:#5c320d;
}

.buttons div{
    width:33.3%;
    color:#5c320d;
}

.seeking, .volume{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:5px;
    color:#5c320d;
}

.now-playing, .track-info{
    background-image: url(images/bg33.gif);
    box-shadow: -1px -1.4px 1px inset #d1d1d1, 2px 3px 1.5px inset white, 0px 0px 2px #bab8b8 ;
    border: 2px groove pink;
    border-radius: 8px; 
    color: #5c320d;
}

.now-playing{
    font-weight:bold;
    color:#5c320d;
}

.material-icons{
    color:#5c320d;
}

input[type=range]{
    -webkit-appearance:none; 
    appearance:none;
    width:100%;
    background-color:inherit;
    color:#5c320d;
}

input[type=range]:focus{
    outline:none;
}

input[type=range]::-webkit-slider-runnable-track{
    width:100%;
    height:4px; 
    background:#fc8662; 
}

input[type=range]::-webkit-slider-thumb{
    height:10px; 
    width:10px; 
    border-radius:5px;
    background:#fc8662; 
    -webkit-appearance:none;
    margin-top:-3px; 
    color:#5c320d;
}

input[type=range]::-moz-range-track{
    width:100%;
    height:4px; 
    background:#fc8662;
}

input[type=range]::-moz-range-thumb{
    height:10px; 
    width:10px; 
    border-radius:5px; 
    background:#fc8662; 
    border:none; 
}