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

body {
	font-family: 'Raleway', 'Montserrat', sans-serif;
}
.container {
	height: 400px;
	width: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -200px;
	top: 40%;
}
img.logo {
	width: 256px;
	position: relative;
	left: 50%;
	margin-left: -128px;
}
.coming-soon {
	text-align: center;
	color: #5c5c5c;
	margin-bottom: 2rem;
}
#stay-tuned {
	text-align: center;
	color: #5c5c5c;
	font-size: 1.1rem;
}
div.circles {
	text-align: center;
	margin: 1rem 0 2rem 0;
}
span.circle {
	display: inline-block;
	height: 2rem;
	width: 2rem;
	border-radius: 100%;
	margin-right: 0.5rem;
	transition: 0.5s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

@keyframes scaleUpDown {
  0% {
    transform: scale(1);
  }
  20% {
  	transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

#num1 {
	animation: 1.00s ease-out 0.05s infinite scaleUpDown;
}
#num2 {
	animation: 1.20s ease-out 0.15s infinite scaleUpDown;
}
#num3 {
	animation: 1.26s ease-out 0.35s infinite scaleUpDown;
}
#num4 {
	animation: 1.28s ease-out 0.51s infinite scaleUpDown;
}
#num5 {
	animation: 1.26s ease-out 0.65s infinite scaleUpDown;
}
#num6 {
	animation: 1.30s ease-out 0.77s infinite scaleUpDown;
}

#background {
	position: absolute;
	width: 96vw;
	height: 96vh;
	z-index: -999;
}

@media (max-width: 1280px) {
	.container {
		height: 600px;
		width: 600px;
		margin-top: -200px;
		margin-left: -300px;
	}
	img.logo {
		width: 384px;
		margin-left: -192px;
	}
	#stay-tuned {
		font-size: 1.5rem;
	}
}

@media (max-width: 640px) {
	.container {
		height: 80vh;
		width: 80vw;
		margin-top: -25vh;
		margin-left: -40vw;
	}
	img.logo {
		width: 70vw;
		margin-left: -35vw;
	}
	.coming-soon {
		font-size: 3.5rem;
	}
	#stay-tuned {
		font-size: 2rem;
	}
}