body {
	background-color: #031223;
	background-image: url('images/background.svg');
	background-size: cover;
	background-position: center;
	color: white;
	font-family: 'Source Code Pro', monospace;
	text-align: center;
}

.content {
	width: 100%;
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translateX(-50%);
}

.primary-image {
	width: 90%;	
}

@media(min-width: 750px) {
	.primary-image {
    	width: 550px;	
	}
}

.title {
	background-image: url('images/title_background.svg');
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
    height: 100%;
    width: fit-content;
    background-size: 100% 100%;
	padding: 0 20px;
}
@media(min-width: 400px) {
	.title {
		padding: 0 50px;
	}
}

.title h1 {
	font-size: 2em;
    margin: 50px 0 0;
    line-height: 1.5;
}
@media(min-width: 750px) {
	.title h1 {
    	font-size: 5.5em;
    	line-height: 1.2;
	}
}

.title p {
	margin: 0;
    font-size: 1em;
}
@media(min-width: 750px) {
	.title p {
    	font-size: 1.9em;
    	line-height: 1.4;
	}
}

.sub-title {
    font-size: 1em;
    padding: 25px 0 40px;
    margin: auto;
	max-width: 180px;
}
@media(min-width: 750px) {
	.sub-title {
    	font-size: 1.5em;
    	max-width: none;
	}
}

.bulle-bye {
	animation: bulle 3s ease-in-out infinite;
}


@keyframes bulle {
	0% {
    	transform: translateY(-10px) rotate(2deg);
	}
	50% {
    	transform: translateY(10px) rotate(-2deg);
	}
	100% {
    	transform: translateY(-10px) rotate(2deg);
	}
}