@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

html, body {
	height: 100%;
}

body {
	background-color: #F6FAFA;
	color: #343838;
	font-family: 'Lato';
}

.outer {
	display: flex;
	padding: 50px 15%;
	height: 100%;
	align-items: center;
}

.inner {
	flex: 1;
	display: flex;
	align-items: center;
}

.ig {
	flex: 1;
	margin-left: 50px;
}

h1 {
	font-weight: 900;
	font-size: 42px;
}

h1 .sub-1 {
	color: #0DB4CC;
}

.links {
	display: flex;
	margin-top: 25px;
}

.links a {
	color: inherit;
	text-decoration: none;
	font-size: 18px;
	font-weight: 300;
	opacity: .75;
}

.links a:hover {
	color: #0DB4CC;
	opacity: 1;
}

.links a+a {
	margin-left: 25px;
}

@media screen and (max-width: 1092px) {
	h1 {
		font-size: 32px;
	}
	.links a {
		font-size: 16px;
	}
}

@media screen and (max-width: 600px) {
	.outer {
		display: block;
        padding: 50px 25px;
	}
	.inner {
		margin-bottom: 50px;
		text-align: center;
		justify-content: center;
	}
	.ig {
		margin: 0;
	}
	h1 {
		font-size: 32px;
	}
	.links {
		margin-top: 20px;
	}
	.links a {
		font-size: 16px;
	}
}