/* Reset and Base Styles */
* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #331d76;
}

svg {
	width: 100%;
}

/* Interactive Elements */
.scalable-element {
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

.scalable-element:hover {
	opacity: 0.8;
}

/* Responsive Layout */
@media (orientation: landscape) {
	svg#mobile {
		display: none;
	}
}

@media (orientation: portrait) {
	svg#desktop {
		display: none;
	}
}

/* Font Faces */
@font-face {
	font-family: 'RocGrotesk-ExtraBold';
	src: url('fonts/RocGroteskExtraBold.eot');
	src: url('fonts/RocGroteskExtraBold.eot') format('embedded-opentype'),
		url('fonts/RocGroteskExtraBold.woff2') format('woff2'),
		url('fonts/RocGroteskExtraBold.woff') format('woff'),
		url('fonts/RocGroteskExtraBold.ttf') format('truetype'),
		url('fonts/RocGroteskExtraBold.svg#RocGroteskExtraBold') format('svg');
}

@font-face {
	font-family: 'RocGrotesk-Light';
	src: url('fonts/RocGroteskLight.eot');
	src: url('fonts/RocGroteskLight.eot') format('embedded-opentype'),
		url('fonts/RocGroteskLight.woff2') format('woff2'),
		url('fonts/RocGroteskLight.woff') format('woff'),
		url('fonts/RocGroteskLight.ttf') format('truetype'),
		url('fonts/RocGroteskLight.svg#RocGroteskLight') format('svg');
}

@font-face {
	font-family: 'RocGrotesk-Medium';
	src: url('fonts/RocGroteskMedium.eot');
	src: url('fonts/RocGroteskMedium.eot') format('embedded-opentype'),
		url('fonts/RocGroteskMedium.woff2') format('woff2'),
		url('fonts/RocGroteskMedium.woff') format('woff'),
		url('fonts/RocGroteskMedium.ttf') format('truetype'),
		url('fonts/RocGroteskMedium.svg#RocGroteskMedium') format('svg');
}

@font-face {
	font-family: 'RocGrotesk-Regular';
	src: url('fonts/RocGroteskRegular.eot');
	src: url('fonts/RocGroteskRegular.eot') format('embedded-opentype'),
		url('fonts/RocGroteskRegular.woff2') format('woff2'),
		url('fonts/RocGroteskRegular.woff') format('woff'),
		url('fonts/RocGroteskRegular.ttf') format('truetype'),
		url('fonts/RocGroteskRegular.svg#RocGroteskRegular') format('svg');
}

@font-face {
	font-family: 'RocGrotesk-WideBlack';
	src: url('fonts/RocGroteskWideBlack.eot');
	src: url('fonts/RocGroteskWideBlack.eot') format('embedded-opentype'),
		url('fonts/RocGroteskWideBlack.woff2') format('woff2'),
		url('fonts/RocGroteskWideBlack.woff') format('woff'),
		url('fonts/RocGroteskWideBlack.ttf') format('truetype'),
		url('fonts/RocGroteskWideBlack.svg#RocGroteskWideBlack') format('svg');
}

@font-face {
	font-family: 'RocGrotesk-WideExtraBold';
	src: url('fonts/RocGroteskWideExtraBold.eot');
	src: url('fonts/RocGroteskWideExtraBold.eot') format('embedded-opentype'),
		url('fonts/RocGroteskWideExtraBold.woff2') format('woff2'),
		url('fonts/RocGroteskWideExtraBold.woff') format('woff'),
		url('fonts/RocGroteskWideExtraBold.ttf') format('truetype'),
		url('fonts/RocGroteskWideExtraBold.svg#RocGroteskWideExtraBold') format('svg');
}

@font-face {
	font-family: 'RocGrotesk-WideMedium';
	src: url('fonts/RocGroteskWideMedium.eot');
	src: url('fonts/RocGroteskWideMedium.eot') format('embedded-opentype'),
		url('fonts/RocGroteskWideMedium.woff2') format('woff2'),
		url('fonts/RocGroteskWideMedium.woff') format('woff'),
		url('fonts/RocGroteskWideMedium.ttf') format('truetype'),
		url('fonts/RocGroteskWideMedium.svg#RocGroteskWideMedium') format('svg');
}

@font-face {
	font-family: 'SofiaPro-Regular';
	src: url('fonts/SofiaProRegular.eot');
	src: url('fonts/SofiaProRegular.eot') format('embedded-opentype'),
		url('fonts/SofiaProRegular.woff2') format('woff2'),
		url('fonts/SofiaProRegular.woff') format('woff'),
		url('fonts/SofiaProRegular.ttf') format('truetype'),
		url('fonts/SofiaProRegular.svg#SofiaProRegular') format('svg');
}