* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   overflow: hidden;
}

@font-face {
  font-family: G_Syne;
  src: url('fonts/Roboto.woff2') format('woff2');
  src: url('fonts/Roboto.woff2') format('woff2'),
  url('fonts/Roboto.woff') format('woff');
}

body {
  position: relative;
  height: 100vh;
  background-image: url('WebGLbackground.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.parent{
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.unityCanvas{
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
}
.gear {
  position: absolute;
  width: 100;
  height: 100;
  z-index: 3;
  left: 50%;
  top: 50%;
  animation: rotation 8s infinite linear;
}
.loadingParent{
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 38%;
	transform: translateX(-47%);
}

h1{
	color: #FFFFFF;
	font-family: G_Syne;
	font-size: 32px;
}

h2{
	color: #FFFFFF;
	font-family: G_Syne;
	font-size: 18px;
	text-align: center;
	letter-spacing: 4px;
}

@keyframes rotation {
  from {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) translateY(-50%) rotate(359deg);
  }
}

.rounded-box {
	border-radius: 16px;
}