@font-face {
  font-family: CondExtraBoldObl;
  src:  url(font/FunctionPro-CondExtraBoldObl.otf);
}

@font-face{
  font-family: Functionpro mo;
  src: url(font/FunctionPro-MediumOblique.otf);
}

body {
	cursor: none;
}

a.button {
  position: fixed;
  z-index: 5;
  width: 35px;
  height: 35px;
  font-size: 20px;
  padding-left: 20px;
  padding-top: 10px;
  text-decoration: none;
  color: #ffffff;
  opacity: 0.5;
  transition: opacity 0.5s ease;
}

a.button:hover{
  opacity: 1;
}

h1 {
	font-family: CondExtraBoldObl;
    z-index: 2;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate;
    transform: translateX(-50%);
    margin-bottom: 15px;
    text-shadow: 3px 2px 5px rgb(0,0,0,0.3);
}

.fullscreen-bg {
  	position: fixed;
  	right: 0;
  	bottom: 0;
  	min-width: 100%; 
  	min-height: 100%;
	/*opacity: 0.7;*/
	background-size: cover;
}

section.some-sounds{
	z-index:1;
	width: 100vw;
	height: 100vh;
}

div.circle {
	width: 100px;
	height: 100px;
	/*background-color: #0000ff;*/
}

div.a{
	position: fixed;
	top: 10%;
	left: 5%;
}

div.b{
	position: fixed;
	bottom: 25%;
	right: 20%;
}

div.c{
	position: fixed;
	top: 25%;
	left: 35%;
}

div.d{
	position: fixed;
	top: 5%;
	right: 5%;
}

div.e{
	position: fixed;
	bottom: 15%;
	left: 15%;
}

div.f{
	position: fixed;
	top: 15%;
	left: 60%;
}

div.g{
	position: fixed;
	bottom: 5%;
	left: 45%;
}




div.ball {
  background-color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  
  position: absolute;
  top: 20px;
  left: 20px;
  transform: translate(-50%, -50%);
  
  mix-blend-mode: difference;
  z-index: 2;
}