:root {
	--color-text-main: #151515;
	--color-name-primary: #a4c678;
	--color-name-secondary: #c4df9c;

	--color-back-primary: #f0dfca;
}

body {
	width: 100dvw;
	height: 100dvh;
	margin: 0
}

.flex {
	display: flex;
}

.full-width {
	width: 100dvw;
	margin-left: 0;
	margin-right: 0;
}

.full-height {
	height: 100dvh;
	margin-top: 0;
	margin-bottom: 0;
}

.center-contents {
	display: flex;
	align-items: center;
	justify-content: center;
}

.layout-vertical {
	display: flex;
	flex-direction: column;
}

.layout-horizontal {
	display: flex;
	flex-direction: row;
}

/** BASE STYLING **/
body {
	background-color: azure;

	/* Flexbox */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#main-body
{
	/* Style and Shape */
	background-color: var(--color-back-primary);
	border-radius: 25px;

	/* Flexbox */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	/* Sizing */
	height: 60%;
	width: 50%;
}

#hh-logo {
	/* Flexbox */
	//display: flex;
	height: 60%;

	& img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
	}
}

#message {

	width: 80%;

	& p {
		font-family: "Arimo", sans-serif;
		font-optical-sizing: auto;
		font-weight: 200;
		font-style: italic;
		font-size: 1.4rem;
		text-align: center;

		color: var(--color-text-main);
	}
}

/** FONTS **/
.arimo-normal
{
	font-family: "Arimo", sans-serif;
	font-optical-sizing: auto;
	font-weight: 200;
	font-style: normal;
}

/** TESTING ONLY **/
.show-bounds
{
	background-color: chocolate;
	outline: 5px solid aqua;
	outline-offset: -5px;
}