#hero-gravity {
	position: absolute;
	opacity: 0.8;
}

#hero-gravity > canvas {
	background: #161616 !important;
}

#matter {
	position: absolute;
	bottom:0;
}

#hero {
	z-index: 2;
		background-color: black;
}

#hero, #hero-gravity {
	height: calc(100vh - 56px);
	height: calc(100 * var(--vh) - 56px);
}

#hero-padding {
	 height: calc(100vh - 370px);
	 height: calc(100 * var(--vh) - 370px);
}

#hero-register-button {
	margin-bottom: 48px;
	font-size: 1.5em;
}

.hero-text {
	text-shadow: 0px 0px 12px rgba(0,0,0,1);
}

.cards {
	padding: 1.5rem;
}

.column .card {
	height: 100%;
}
.card-image {
	font-size: 8rem;
	/*padding-top: 2rem;*/
	/*padding-bottom: 2rem;*/
	color: #209cee;
}

#cookie-banner {
	font-size: 0.9em;
	cursor: pointer;
}

#icon-free path {
	color: #e53935 !important;
}
#icon-open-source path {
	color: #f4511e !important;
}
#icon-private path {
	color: #ec407a !important;
}
#icon-ad-free path {
	color: #c0ca33 !important;
}
#icon-technology path {
	color: #43a047 !important;
}
#icon-for-you path {
	color: #00897b !important;
}
.navbar {
    background-color: #121212;
}
#navbar-text {
    color: white;
}

@media screen and (max-width: 600px) {
	#hero-register-button {
		width: 100%;
	}
}

@media screen and (max-height: 600px) {
	#hero .hero-body {
		padding: 1.5rem 1.5rem;
	}
}

@media screen and (max-width: 374px) {
	#banner {
		 height: 300px;
	}
	#hero-padding {
	 height: calc(100vh - 410px);
	 height: calc(100 * var(--vh) - 410px);
	}
}

@media screen and (max-width: 260px) {
	#hero .hero-body {
		padding: 0.5rem 0.5rem;
	}
	#hero-register-button {
    	margin-bottom: 12px;
    }
}