@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');
html,
body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
  font-family: 'Montserrat', sans-serif;
  flex-direction: column;
  justify-content: center;
}
.btn-primary {background-color: #ff9900; border-color: #ff9900;}
#cover {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: url(/img/cover-asset-03.svg) no-repeat 80%; background-size: 50vw !important; z-index:2;}
#particles-js {position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.5; z-index: 2;}
header {position: fixed; top: 0; bottom: auto; z-index: 3; left: 0; right: auto; padding: 10px 20px 15px;width: 100%; background-color: #212529;}
header h1 {color: rgba(255,255,255,0.8); font-size: 3em !important;  font-weight: 600 !important; text-transform: uppercase;margin: 0 !important;}
.container {z-index: 3;}
.content {max-width: 100%; text-align: left; background: rgba(255,255,255,0);}
h2 strong {font-weight: 600; font-size: 1.2em;}
footer {position: fixed; bottom: 0; z-index: 3; left: 0; right: 0;}
@media (min-width: 1024px) {
	.content {padding: 0;}
}
@media (max-width: 768px) {
	body {justify-content: flex-start !important;}
	header h1 {transform-origin: 10px 30px; font-size: 1.7em !important;}
	.content {text-align: center; margin-top: 10em !important;}
	#cover {background-position: 50% 80% !important; background-size: 75vw !important;}
}
@media (max-width: 480px) {
	.content {margin-top: 4em !important;}
	#cover {background-size: 90vw !important;}
	.btn-lg {font-size: 1rem;}
}