@import url('https://fonts.googleapis.com/css?family=Poppins:400,900');

body{
	overflow: hidden;
  margin: 0;
}
canvas { 
	display: block; 
}

.dg {
 display: none;
}
.world{
  position: absolute;
  width:100%;
  height:100%;
  background: #FF4066;
}

.but-gif{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	pointer-events: none;
	max-width: 80vw;
	max-height: 80vh;
}

.social-bar{
	position: absolute;
	left: 50%;
	top: calc(50% - 330px);
	transform: translateX(-50%);
	z-index: 20;
	display: flex;
	gap: 20px;
	align-items: center;
	padding: 10px 16px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 24px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.social-bar a{
	display: inline-flex;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	opacity: .85;
	transition: opacity .2s ease, transform .2s ease;
}

.social-bar a:hover{
	opacity: 1;
	transform: translateY(-2px);
}

.social-bar img{
	display: block;
	width: 22px;
	height: 22px;
	filter: invert(1) brightness(.9);
	opacity: .9;
}

.title{
  position: absolute;
  color: white;
	width: calc(100% - 80px);
  font-size: 24px;
	font-weight: 900;
  font-family: "Poppins";
  /* text-align: right; */
  letter-spacing: 1px;
  bottom: 40px;
  left: 40px;
	/* display: none; */
}

.remark{
  position: relative;
  color: white;
  font-size: 10px;
  font-family: "Poppins";
  font-weight: 400;
  letter-spacing: 1px;
	line-height:1.5;
	/* display: none; */
}

.credits{
  position:relative;
	color:white;
	margin-top:20px;
  font-size:10px;
	font-family:"Poppins", sans-serif;
	font-weight: 900;
	letter-spacing: 3px;
  text-transform: uppercase;
}
.credits a {
  color:white;
	text-decoration: none;
}
.credits a:hover {
  color:blue;
	text-decoration: none;
}