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

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

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

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

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

::selection {
  background: rgba(255, 0, 0, 0);
  
  animation: highlight 10s ease-in-out infinite alternate;
}

a{
  color: #0F60D1;
  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.0) 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: #fff;
background-repeat: no-repeat;
overflow-x: hidden;
overflow-y: hidden;
color: #000;
z-index: 1;
}

p{
  font-family: dogica;
  font-size: 8px;
  color: #000;
  margin-top: 0px;
  line-height: 10px;
}

h1{
  font-family: clubland;
  font-size: 170px;
  font-weight: 400;
  letter-spacing: -4px;
  text-shadow: 0 0 0px #9D7F09;
  
}

#container{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0px;
background-color: #fff;
}

#container2{
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
margin-top: 110px;
}


/* reflection */
.units > :last-child {
  height: 100px;
	transform: rotatex(180deg) translatey(15px);
	opacity: 0.2;
	
	mask-image: repeating-linear-gradient(
			transparent,
			transparent 3px,
			white 3px,
			white 4px
		),
		linear-gradient(transparent 50%, white 90%);
		
	-webkit-mask-image: repeating-linear-gradient(
			transparent,
			transparent 3px,
			white 3px,
			white 4px
		),
		linear-gradient(transparent 50%, white 90%);
}
.units {
  
  position: relative;
  z-index: 12;
	width: 700px;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
	padding: 0 10px;
	display: inline-block;
}

#leftdivholder {
  z-index: 90;
  position: relative;
  height: 1px;
  width: 1px;
  margin-left: 0;
  margin-top: -600px;
  border: 0px solid blue;
  perspective: 400px;
  display: inline-block;
  
  -webkit-animation: floating 3s infinite ease-in-out;
	      animation: floating 3s infinite ease-in-out;
}

#leftdiv {
  margin-left: -370px;
  height: 220px;
  width: 370px;
  padding: 0px;
  position: absolute;
  border: 1px double black;
  background: #fff; 
  transform: rotateX(0deg) rotateY(12deg);
  transform-style: preserve-3d;
  border-radius: 10px;
  
  box-shadow: -6px 6px 7px 1px rgba(0, 0, 0, 0.2);
  
  transition: transform 0.5s, transform-style 0.5s , box-shadow 0.5s linear;
}

#leftdivholder:hover{
  -webkit-animation-play-state:paused;
  animation-play-state:paused;
}

#leftdiv:hover{
transform: rotateX(0deg) rotateY(0deg);
transform-style: unset;
box-shadow: 0 6px 7px 1px rgba(0, 0, 0, 0.2);
}

#rightdivholder {
  z-index: 90;
  position: relative;
  height: 1px;
  width: 1px;
  margin: 0;
  margin-top: -600px;
  border: 0px solid blue;
  perspective: 400px;
  display: inline-block;

  -webkit-animation: floating 3s infinite ease-in-out;
	      animation: floating 3s infinite ease-in-out;
}

#rightdiv {
  
  height: 220px;
  width: 370px;
  padding: 0px;
  position: absolute;
  border: 1px solid black;
  background: #fff; 
  transform: rotateX(0deg) rotateY(348deg);
  transform-style: preserve-3d;
  border-radius: 10px;
  
  box-shadow: 6px 6px 7px 1px rgba(0, 0, 0, 0.2);

  transition: transform 0.5s, transform-style 0.5s , box-shadow 0.5s linear;

}

#rightdivholder:hover{
  -webkit-animation-play-state:paused;
  animation-play-state:paused;
}

#rightdiv:hover{
transform: rotateX(0deg) rotateY(360deg);
transform-style: unset;
box-shadow: 0 6px 7px 1px rgba(0, 0, 0, 0.2);
}



@keyframes floating { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 3px); 
} 

100%   {
transform: translate(0, -0px); 
} 
}

#logo::selection {
  color: #000;
}

#lightdeco {
  position: absolute;
  margin-top: -750px;
  margin-left: 0;
  z-index: 0;
  
  font-family: eauderose;
  font-size: 180px;
  font-weight: 100;
  letter-spacing: -60px;
  text-shadow: 0 0 0px #9D7F09;
  
  
}


.blur{
  filter: blur(1px);
  opacity: 0.9;
}

#logo {
  color: #fff;
  
  position: absolute;
  margin-top: -780px;
  margin-left: 30px;
  z-index: 1;
  -webkit-text-stroke: 1px rgb(0,0, 0, 0.1);
  
}




#albumsdiv {
  margin-left: -370px;
  margin-top: 300px;
  height: 220px;
  width: 370px;
  padding: 0px;
  position: absolute;
  border: 1px solid black;
  background: #fff; 
  transform: rotateX(0deg) rotateY(12deg);
  transform-style: preserve-3d;
  border-radius: 10px;
  
  box-shadow: -6px 6px 7px 1px rgba(0, 0, 0, 0.2);
  
  transition: transform 0.5s, transform-style 0.5s , box-shadow 0.5s linear;
}


#albumsdiv:hover{
transform: rotateX(0deg) rotateY(0deg);
transform-style: unset;
box-shadow: 0 6px 7px 1px rgba(0, 0, 0, 0.2);
}

#playingdiv {
  
  margin-top: 300px;
  height: 220px;
  width: 370px;
  padding: 0px;
  position: absolute;
  border: 1px solid black;
  background: #fff; 
  transform: rotateX(0deg) rotateY(348deg);
  transform-style: preserve-3d;
  border-radius: 10px;
  
  box-shadow: 6px 6px 7px 1px rgba(0, 0, 0, 0.2);

  transition: transform 0.5s, transform-style 0.5s , box-shadow 0.5s linear;

}

#playingdiv:hover{
transform: rotateX(0deg) rotateY(360deg);
transform-style: unset;
box-shadow: 0 6px 7px 1px rgba(0, 0, 0, 0.2);
}