/*MOBILE STYLING*/

/*Variables*/
:root {
	/*FONTS*/
	--font-regular: 'Myriad W01 Regular';
	--font-bold: 'Myriad W01 SmBd';
	--font-headline: 'Myriad W01 SmBd';

	/*BODY*/
	--body-gap: 36px;

	/*BACKGROUND*/
	--bg-img-url: url('../files/zoo/background/background.png');

	/*HEADER*/
	--header-logo-height: 60px;

	/*HEADER LOGO*/
	--header-logo-url: url('../files/zoo/logo/mobile/logo.svg');
	--header-fill-color: #3d5824;

	/*CONTENT*/
	--content-bg-color: rgba(60, 87, 36, 25%);

	/*CONTENT HEADLINE*/
	--content-headline-font-size: 1.5rem;
	--content-headline-line-height: 1.625rem;
	--content-headline-letter-spacing: -0.49px;

	--content-headline-color: #3c5724;

	/*EXPLENATION HEADLINE*/
	--explenation-headline-font-size: 0.875rem;
	--explenation-headline-line-height: 1.063rem;
	--explenation-headline-letter-spacing: -0.34px;

	/*EXPLENATION TEXT*/
	--explenation-text-font-size: 0.875rem;
	--explenation-text-line-height: 1.063rem;
	--explenation-text-letter-spacing: -0.34px;

	/*BUTTON*/
	--button-font-size: 0.875rem;
	--button-line-height: 1rem;
	--button-letter-spacing: -0.39px;

	--button-color: white;
	--button-bg-color: #f07300;

	/*FOOTER*/
	--footer-font-size: 0.875rem;
	--footer-line-height: 1rem;
	--footer-letter-spacing: -0.34px;

	--footer-color: #3c5724;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
}

a {
	text-decoration: none !important;
}

body {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;

	gap: var(--body-gap);

	justify-items: center;
	align-items: center;

	min-height: 100dvh;

	background: var(--bg-img-url) 0 0 no-repeat;
	background-size: cover;

	text-align: center;
	font-family: var(--font-bold);
}

.button {
	font-size: var(--button-font-size);
	line-height: var(--button-line-height);
	letter-spacing: var(--button-letter-spacing);

	padding: 9px 11px 10px 9px;

	color: var(--button-color);
	background-color: var(--button-bg-color);

	border-radius: 5px;

	text-transform: uppercase !important;

	font-family: var(--font-bold) !important;
}

.buttons {
	display: grid;
	gap: 1.5rem;
}

.aqua {
	color: var(--footer-color) !important;
	font-size: var(--footer-font-size);
	font-family: var(--font-bold);
	line-height: var(--footer-line-height);
	letter-spacing: var(--footer-letter-spacing);
}

.aqua:visited,
.aqua:link {
	color: var(--footer-color) !important;
	text-decoration: none !important;
}

.header {
	align-self: flex-start;
}

.header-wrapper {
	display: flex;
	justify-items: start;
	align-items: start;

	margin-top: 22px;
	margin-left: 18px;

	max-height: var(--header-logo-height);

	max-width: 50%;
}

.header-logo {
	min-height: 85px;
	max-height: var(--header-logo-height);

	mask-image: var(--header-logo-url);
	mask-repeat: no-repeat;
	mask-mode: alpha;
	mask-type: alpha;
}

.header-logo-background {
	fill: var(--header-fill-color);
	fill-opacity: 100%;
}

.content {
	display: flex;
	align-self: center;
	flex-basis: 100%;

	flex-shrink: 0;
	flex-grow: 1;

	border-radius: 8px;

	text-align: center;

	background-color: var(--content-bg-color);

	margin: 0 17px 0 18px;
}

/*content wrapper*/
.content .content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-items: center;

	justify-self: center;
	align-self: center;

	flex-basis: 100%;
}

.content .content-wrapper .headline-icon {
	max-height: 43.65px;
	margin-bottom: 20px;
}

.content .content-wrapper .headline-text {
	margin-top: 1rem;
	margin-bottom: 11px;

	font-size: var(--content-headline-font-size);
	line-height: var(--content-headline-line-height);
	letter-spacing: var(--content-headline-letter-spacing);

	color: var(--content-headline-color);

	font-family: var(--font-headline);
}

/*explenation*/
.content .content-wrapper .explanation-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;

	margin-top: 6px;
}

.content .content-wrapper .explanation-wrapper .explanation-headline {
	font-size: var(--explenation-headline-font-size);
	line-height: var(--explenation-headline-line-height);
	letter-spacing: var(--explenation-headline-letter-spacing);

	padding-bottom: 2px;
}

.content .content-wrapper .explanation-wrapper .explanation-text {
	font-family: var(--font-regular);

	font-size: var(--explenation-text-font-size);
	line-height: var(--explenation-text-line-height);
	letter-spacing: var(--explenation-text-letter-spacing);

	margin-bottom: 20px;

	padding: 18%;
	padding-top: 0;
	padding-bottom: 0;
}

.content .content-wrapper .explanation-wrapper .explanation-text:nth-child(1) {
	padding: 22%;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 8px;
}

.footer {
	font-size: var(--footer-font-size);
	line-height: var(--footer-line-height);
	letter-spacing: var(--footer-letter-spacing);

	margin-bottom: 28px;

	text-align: center;

	color: var(--footer-color);
}

.footer-link:visited,
.footer-link:link {
	color: var(--footer-color) !important;
	text-decoration: none !important;
}

/*DESKTOP STYLING*/
@media only screen and (min-width: 600px) {
	:root {
		/*BODY*/
		--body-gap: 96px;

		/*HEADER*/
		--header-logo-height: 112px;

		/*HEADER LOGO*/
		--header-logo-url: url('../files/zoo/logo/desktop/logo.svg');
		--header-fill-color: #3c5724;

		/*CONTENT HEADLINE*/
		--content-headline-font-size: 2.25rem;
		--content-headline-line-height: 2.688rem;
		--content-headline-letter-spacing: -0.88px;

		--content-headline-color: #3c5724;

		/*EXPLENATION HEADLINE*/
		--explenation-headline-font-size: 1rem;
		--explenation-headline-line-height: 1.375rem;
		--explenation-headline-letter-spacing: -0.44px;

		/*EXPLENATION TEXT*/
		--explenation-text-font-size: 1rem;
		--explenation-text-line-height: 1.375rem;
		--explenation-text-letter-spacing: -0.44px;

		/*BUTTON*/
		--button-font-size: 0.875rem;
		--button-line-height: 1.125rem;
		--button-letter-spacing: -0.39px;
		--button-color: white;

		/*FOOTER*/
		--footer-font-size: 1.125rem;
		--footer-line-height: 1.438rem;
		--footer-letter-spacing: -0.44px;
	}

	.header {
		margin-left: 0;
	}

	.header-wrapper {
		margin-left: 48px;
		margin-top: 56px;
	}

	.content {
		flex-shrink: 0;
		flex-grow: 1;

		border-radius: 24px;

		min-width: 66.7%;

		background-color: var(--content-bg-color);
	}

	.content .content-wrapper {
		flex-shrink: 0;
		flex-grow: 1;
	}

	.content .content-wrapper .headline-icon {
		max-height: initial;
	}

	.content .content-wrapper .headline-text {
		font-size: var(--content-headline-font-size);
		line-height: var(--content-headline-line-height);
		letter-spacing: var(--content-headline-letter-spacing);

		color: var(--content-headline-color);

		margin-bottom: 6px;
		margin-top: 1rem;
	}

	.content .content-wrapper .explanation-wrapper .explanation-text {
		padding: 16%;
		padding-top: 0;
		padding-bottom: 0;
	}

	.content .content-wrapper .explanation-wrapper .explanation-text:nth-child(1) {
		padding: 16%;
		padding-top: 0;
		padding-bottom: 0;

		margin-bottom: 10px;
	}

	.footer {
		margin-bottom: 86px;
	}
}