
@font-face {
    font-family: "silkscreen"; 
    src: url("/fonts/silkscreen.ttf") format("truetype");
}

@font-face {
    font-family: "factor"; 
    src: url("/fonts/factor.ttf") format("truetype");
}

::selection{
background-color: rgb(255, 255, 255, 0);
text-decoration: none;
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.4) 50%);
z-index: 100;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
  
body{
cursor: url("/cursors/small.png"), default;
background-image: url('zzz');
background-color: #000;
background-repeat: no-repeat;
overflow-x: hidden;
overflow-y: hidden;
color: #000;
margin: 0 auto;
}

#inside{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0px;
background-color: #000;
margin: 0 auto;

background-image: url('https://file.garden/ZYDgfW2nsi-rTE3G/gurp.png');
background-position: center;
background-repeat: no-repeat;
}

#favcontainer{
background-position: bottom;
width: 460px;
height: 100px;
padding: 0px;

background-color: #;

position: absolute;
margin-left: -20px;
margin-top: -370px;
}

#albumcontainer{
background-position: bottom;
width: 770px;
height: 100px;
padding: 0px;

background-color: #;

position: absolute;
margin-left: 300px;
margin-top: -70px;
}


#deco {
position: absolute;
margin-top: -220px;
margin-left: 630px;
z-index: 1;
pointer-events: none;
} 

img{
  margin-bottom: -5px ;
  image-rendering: pixelated;
}



h1{
  font-family: factor;
  font-size: 90px;
  font-weight: 300;
  color: #fff;
}

p{
  font-family: silkscreen;
  font-size: 8px;
  color: #fff;
  margin: 10px;
  text-align: left;
  line-height: 10px;
}

span{
  font-family: silkscreen;
  font-size: 8px;
  color: #fff;
  margin-top: 0px;
  text-align: left;
  line-height: 10px;
}

#green{
filter: sepia(100%) hue-rotate(25deg) saturate(1) brightness(0.8);
width: 55px;
height: 55px;
border: 1px solid #979A64;
margin: 5px;
margin-left: 10px;
box-shadow: 0px 0px 2px #979A64;
transition: 0.05s;
}

#green:hover {
    
    filter: none;
    transform: scale(1.2);
    box-shadow: 0 2px 2px 1px rgb(0, 0, 0, 0.5);
}

#divider {
  border-top: 1px dotted #fff;
  margin: 0;
  padding: 0;

  height: 1px;
}

#albumbgcolour {
  background-image: linear-gradient(to right, rgba(80, 91, 45, 0.5) 50%, rgba(255, 0, 0, 0));
  margin: 0;
  padding: 0;
 
}

#songcontainer{
background-position: bottom;
width: 300px;
height: 100px;
padding: 0px;

background-color: #;

position: absolute;
margin-left: -280px;
margin-top: 250px;
float: right;

}

#bigalbum{
filter: sepia(100%) hue-rotate(25deg) saturate(1) brightness(0.8);
width: 60px;
height: 60px;
border: 1px solid #979A64;
margin: 5px;
box-shadow: 0px 0px 2px #979A64;
transition: 0.05s;
}

#bigalbum:hover {
    
    filter: none;
    box-shadow: 0 2px 2px 1px rgb(0, 0, 0, 0.5);
}

#title{
  position: absolute;
  margin-left: 960px;
  margin-top: 930px;
  color: #A5A780;
  
  text-shadow:0px 0 8px #7D8155,
  0px 0 24px #AAAD70,
  0px 0 48px #AAAD70;
}

#contenttitle{
  padding: 0px;
  margin: 0px;
  padding-left: 10px;
}

#lyrics{
background-position: bottom;
width: 400px;
height: 850px;
padding: 0px;

background-color: #;

position: absolute;
margin-left: 1530px;
margin-top: -100px;
float: right;

-webkit-mask-image: linear-gradient(180deg, #000 40%,transparent); 
}

#changelyrics{
  text-align: right;
  line-height: 13px;
}

#direc{
  position:absolute;
}

#musicplayer{
margin: 0px;
padding: 0px;
}

a{
text-decoration: none;
}

.back{
position: absolute;
top: -15px;
margin-left: 15px;

font-family: factor;
font-size: 30px;
color: rgba(165, 167, 138, 0.2);

transition: 0.1s;
}

.back:hover{
color: rgba(165, 167, 138, 1);
}
