@import url('https://fonts.googleapis.com/css2?family=Miriam+Libre&display=swap');

body{
	height:100%;
	width:auto;
	background-color:#ff60e0;
	margin:0px;
	}	
#background{
	position:absolute;
	width:85%;
	height:auto;
	transform: translate(-50%, -50%);
	left:50%;
	top:40%;
	filter: drop-shadow(1px 1px 0 black);
	z-index : 2;
  pointer-events: none;
	}

canvas{
	position: fixed;
	bottom: 0px;
	left: 0px;
}


#instagram{
	position:fixed;
	top:2%;
	right:3%;
	width:calc(70px + 1vw);
	height:calc(70px + 1vw);
	z-index:10;
	border:1px,black;
	filter: drop-shadow(1px 1px 0 black) drop-shadow(3px 3px 3px white);
	}
#facebook{
	position:fixed;
	top:2%;
	right:calc(3% + 100px);
	width:calc(70px + 1vw);
	height:calc(70px + 1vw);
	z-index:10;
	filter: drop-shadow(1px 1px 0 black) drop-shadow(3px 3px 3px white);
	}
#catalogue{
	position:fixed;
	top:2%;
	right:calc(3% + 200px);
	width:calc(70px + 1vw);
	height:calc(70px + 1vw);
	z-index:10;
	filter: drop-shadow(1px 1px 0 black) drop-shadow(3px 3px 3px white);
	}
#linktree{
	position:fixed;
	top:2%;
	right:calc(3% + 300px);
	width:calc(70px + 1vw);
	height:calc(70px + 1vw);
	z-index:10;
	filter: drop-shadow(1px 1px 0 black) drop-shadow(3px 3px 3px white);
	}
	
#instagram:hover{
	filter:brightness(0%) drop-shadow(3px 3px 3px white);
}
#facebook:hover{
	filter:brightness(0%) drop-shadow(3px 3px 3px white);
}
#catalogue:hover{
	filter:brightness(0%) drop-shadow(3px 3px 3px white);
}
#linktree:hover{
	filter:brightness(0%) drop-shadow(3px 3px 3px white);
}

#matterport_container {
	position:fixed;
	left : 0%;
	bottom : 12%;
	width : calc(100px + 2vw);
	z-index:1;
}

#paypal{
	position:absolute;
	top:70%;
	right:20%;
	width:calc(50px + 2vw);
	height:calc(50px + 2vw);
	z-index:10;
	filter: drop-shadow(1px 1px 0 black);
	}
#paypal:hover{
	filter:invert(100%);
	}
.matterport{
	position:relative;
	width:100%;
	height:auto;
	z-index:10;
	filter:  drop-shadow(1px 1px 1px black);
}
	
.matterport:hover{
	filter:invert(100%);
	}


@keyframes gum {
    0%   {scale:1; right: -10px; bottom: -10px;}
    20%  {scale:var(--animation-random-C); right:var(--animation-random-A); bottom:var(--animation-random-B);}
    100% {scale:0.5; right: -50px; bottom: -35px;} 
}


#gum{
  position:fixed;
  top:500px;
  right:500px;
  opacity:0.91;
  animation: gum var(--animation-random-time) ease alternate infinite;
	z-index : 0;
	filter: drop-shadow(0px 0px 20px white);
}


#band_container{
	position : fixed;
	white-space: nowrap;
	width: 100vw;
	top: 90%;
	z-index : 5;
	color : snow;
	border-style: double none double none;
}

#band_1 {
	position :relative;
	display: inline-block;
	animation:  band 47s linear infinite;
	animation-Play-State:running;
	font-size:1.2vw;
	margin-bottom:3px;
}
#band_2 {
	position :relative;
	display: inline-block;
	animation:  band 47s linear infinite;
	animation-Play-State:running;
	font-size:1.2vw;
	margin-bottom:3px;
}

#credits {
	position: fixed;
	color : snow;
	transform: translate(-50%);
	text-align: center;
	bottom : 0px;
	left: 50%;
	font-size:1vw;
}

@keyframes band {
    0%   {transform: translateX(0%)}
    100% {transform: translateX(-100%)} 
}

#grad {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2800px;
    height: 1800px;
    border-radius: 100%;
    background-image: linear-gradient(#6000ff 6%, #ff00f0 70%, #ff60e0 80%);
    filter: blur(600px);
    transition: all 700ms ease-out;
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    z-index: -1;
}