@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;400;600&display=swap');


body {
	background-color: white;

}

.container {
	height: 100vh;
	position: relative;
}

.center {
	position: absolute;
	top: 48%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

img {
	border-radius: .5em;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

h1 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 600;
	color: #808285;
	text-align: center;
	font-size: 2em;
}

p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	color: #808285;
	text-align: center;
	font-size: 1em;
	line-height: 1.2em
}

.center>img {
	margin-bottom: 1em;
}

.center>p {
	margin-top: .5em;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	img {
		max-width: 32px;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	img {
		max-width: 28px;
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	img {
		max-width: 40px;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	img {
		max-width: 44px;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	img {
		max-width: 48px;
	}

	h1 {
		font-size: 3em;
	}

	p {
		font-size: 1.5em;
		line-height: 1.2em;
	}
}