body {
	margin: 0px;
	padding: 0px;
	font-family: 'Cabin', sans-serif;
}

h1, h2, h3, h4, h5, h6, p, a {
	margin: 0px;
	padding: 0px;
}

#javascript_notice {
	background-color:  white;
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
	z-index: 1000;
}

#javascript_notice h1 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80vw;
}

.header {
	position: fixed;
	left: 55px;
	top: 55px;
	font-size: 20px;
	color: black;
	font-weight: lighter;
	z-index: 4500;
}

.footer {
	position: fixed;
	left: 55px;
	bottom: 55px;
	font-size: 20px;
	color: black;
	font-weight: lighter;
	z-index: 4500;
}

a {
	color: black;
	text-decoration: none;
}

.container {
	width:  100%;
	height: 100%;
	position: relative;
}

.sphere {
	border-radius:  50%;
	position: fixed;
	background-color: black;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	transform-origin: center;
	opacity:  0;
	background-color:  black;
}

.content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 90%;
}

.content h1, .content h2 {
	color: white;
	margin: 5px;
}

.content h1 {
	font-weight: bolder;
}

.content h2 {
	font-weight: normal;
}

.large_spheres .sphere {
	width:  500px;
	height:  500px;
	animation-duration: 6s;
	z-index: 3;
}

.large_spheres h1, .large_spheres h2 {
	font-size:  25px;
}

.image_spheres .sphere {
	width:  350px;
	height:  350px;
	animation-duration: 5s;
	z-index: 2;
}

.sphere_image {
	height: 100%;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}

.medium_spheres .sphere {
	width:  350px;
	height:  350px;
	animation-duration: 5s;
	z-index: 2;
}

.medium_spheres h1, .medium_spheres h2 {
	font-size:  20px;
}

.small_spheres .sphere {
	width:  200px;
	height:  200px;
	animation-duration: 4s;
	z-index: 1;
}

.small_spheres h1, .small_spheres h2 {
	font-size:  15px;
}

.animate {
	animation-name:  pulsate;
}

@keyframes pulsate {
	0% {
		opacity: 0;
		transform: scale(0.05, 0.05);
	}
	45% {
		opacity: 1;
	}
	50% {
		opacity: 1;
		transform: scale(1, 1);
	}
	55% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(0.05, 0.05);
	}
}

@media only screen and (max-width: 1000px) {
	.header {
		left: 35px;
		top: 35px;
	}
	.footer {
		left: 35px;
		bottom: 35px;
		width: calc(100vw - 35px*2);
	}
	.large_spheres .sphere {
		width:  200px;
		height:  200px;
	}
	.large_spheres h1, .large_spheres h2 {
		font-size:  15px;
	}
	.medium_spheres .sphere {
		width:  150px;
		height:  150px;
	}
	.medium_spheres h1, .medium_spheres h2 {
		font-size:  12px;
	}
	.small_spheres .sphere {
		width:  100px;
		height:  100px;
	}
	.small_spheres h1, .small_spheres h2 {
		font-size:  10px;
	}
}

@media only screen and (max-width: 1440px) {
	.contact_button p {
		font-size:  40px;
}