:root {
	--main-bg-colour: #fedd8f;
	--logo-bg-colour: #4b709d;
	--content-bg-colour: #fdf3c7;
	--heading-bg-colour: #1a2539;
	--content-contrast-bg-colour: #fedd8f;
	--border-styles-1: 0.7em solid #f6fbfe;
	--border-styles-2: 0.3em solid #13264b;
	--border-styles-3: 0.1em solid #13264b;
	--border-styles-4: 0.3em solid #fedd8f;
	--border-styles-5: 0.3em solid #fdf3c7;
	--border-styles-incorrect: 0.1em solid #ff0000;
	--border-styles-correct: 0.1em solid #00cc00;
	--h2-font-size: 4.3rem;
	--h3-font-size: 3.5rem;
	--h4-font-size: 3.5rem;
	--p-font-size: 2.5rem;
	--a-font-size: 2rem;
	--line-height: 1.7em;
	--p-sm: 90%;
	--p-lg: 50em;
	--p-sm-padding: 5em 0em;
	--p-lg-padding: 5em 2em;

	--font-colour-dark: #1a2539;
	--font-colour-light: #fcfcfc;
	--font-family-h2: "notoSerifRegular", "Noto Serif", "serif";
	--font-family-h3: "helveticaLightRegular", "Helvetica", "Arial", sans-serif;
	--font-family-h4: "notoSerifLight", "Noto Serif", "serif";
	--font-family-p: "helveticaLightRegular", "Helvetica", "Arial", sans-serif;
	/* ------------------------ */
	/* Media Query */
	/* ------------------------ */
	--mq-h2-font-size: 3.5rem;
	--mq-h3-font-size: 2.7rem;
	--mq-h4-font-size: 2.7rem;
	--mq-p-font-size: 2rem;
	--mq-a-font-size: 2rem;
}

/* ---------------------- */

/* ----------------------- */

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

html {
	font-size: 62.25%;
}

@font-face {
	font-family: "helveticaLightRegular"; /* Give your font a name */
	src: url("./fonts/helveticaLightRegular/helveticaLightRegular.woff2")
		format("opentype"); /* Specify the path to your OTF font file */
}

@font-face {
	font-family: "notoSerifLight"; /* Give your font a name */
	src: url("./fonts/Noto_Serif_JP/NotoSerifJP-ExtraLight.woff2")
		format("opentype"); /* Specify the path to your OTF font file */
}

@font-face {
	font-family: "notoSerifRegular"; /* Give your font a name */
	src: url("./fonts/Noto_Serif_JP/NotoSerifJP-Regular.woff2") format("opentype"); /* Specify the path to your OTF font file */
}

.viewport-section {
	width: 100%;
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(13em, auto) auto minmax(13em, auto);
	grid-template-areas:
		"header"
		"main"
		"footer";
}

header {
	grid-area: header;

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: "nav";
	border-bottom: var(--border-styles-2);
}

nav {
	grid-area: nav;
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: auto;
	grid-template-areas: "logo-container navlinks-container";
}

.logo-container {
	grid-area: logo-container;
	background-color: var(--content-bg-colour);
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo-container h1 {
	font-size: 3.3rem;
	font-family: var(--font-family-h4);
	text-align: center;
	line-height: var(--line-height);
	font-weight: normal;
}

.navlinks-container {
	grid-area: navlinks-container;
}
.navlinks-container ul {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}

.navlinks-container ul li {
	width: 100%;
	height: 100%;
	list-style: none;
}

.navlinks-container ul li a {
	background-color: var(--content-bg-colour);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-size: var(--p-font-size);
	color: var(--font-colour-dark);
	font-family: var(--font-family-p);

	transition: all 0.3s ease-in-out;
}

.navlinks-container ul li a:hover {
	background-color: var(--font-colour-dark);
	color: var(--content-bg-colour);
}

/* ---------------------------- */

/* ---------------------------- */

footer {
	background-color: var(--content-bg-colour);

	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: "nav-footer";
	border-top: var(--border-styles-2);
}

nav-footer {
	grid-area: nav-footer;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		"navlinks-container"
		"footer-copyright";
}

nav-footer .navlinks-container {
	grid-area: navlinks-container;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2em;
}

nav-footer .navlinks-container ul {
	width: 50%;
}

nav-footer .navlinks-container ul li a {
	font-size: var(--a-font-size);
	padding: 1em 0em;
}

nav-footer .footer-copyright {
	grid-area: footer-copyright;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-bottom: 1em;
}

nav-footer .footer-copyright p {
	font-size: var(--a-font-size);
	color: var(--font-colour-dark);
	font-family: var(--font-family-p);
	margin: 0.3em;
	text-align: center;
}

nav-footer .footer-copyright a {
	text-decoration: none;
}

/* ---------------------------------- */
/* MOBILE NAVBAR CONTAINER */
/* ---------------------------- */
.mobile-menu-icon-container {
	display: none;
}

.mobile-menu-container {
	display: none;
}

@media (max-width: 1440px) {
	.viewport-section {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: minmax(10em, auto) auto minmax(10em, auto);
		grid-template-areas:
			"header"
			"main"
			"footer";
	}

	.navlinks-container ul li a {
		font-size: var(--mq-p-font-size);
	}

	nav-footer .footer-copyright p {
		font-size: var(--mq-p-font-size);
		color: var(--font-colour-dark);
		font-family: var(--font-family-p);
		margin: 0.3em;
	}
}

@media (max-width: 1045px) {
	/* Hide navlinks home,about,services,contact */
	.navlinks-container {
		display: none;
	}

	/* ---------------------- */

	.mobile-navbar {
		grid-column: 1 / span 1;
		grid-row: 1;
		z-index: 10;
		width: 100%;
		height: 100%;
		background-color: blue;
	}

	/* Mobile Icon Button to activate mobile menu */

	nav {
		grid-area: nav;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas: "logo-container mobile-menu-icon-container";
	}

	.mobile-menu-icon-container {
		grid-area: mobile-menu-icon-container;
		background-color: var(--content-bg-colour);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 3em;
		/* background-color: pink; */
	}

	.mobile-menu-btn {
		background-color: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-top: 1px solid rgba(255, 255, 255, 0.75);
		border-left: 1px solid rgba(255, 255, 255, 0.75);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
		/*  */
		padding: 1.7em 3em;
		border-radius: 20px;

		text-align: center;
		cursor: pointer;
		overflow: hidden;

		transition: all 0.5s ease;
	}

	.mobile-menu-btn span {
		font-size: var(--mq-a-font-size);
		font-family: var(--font-family-p);
		color: var(--font-colour-dark);
	}

	/**********************************************************/

	/**********************************************************/

	main .mobile-menu-container {
		grid-column: 1 / span 1;
		grid-row: 1;
		z-index: -1;

		display: grid;
		grid-template-columns: minmax(auto, 40em);
		grid-template-rows: auto;
		grid-template-areas: "mobile-menu-window";
		justify-content: center;
		align-content: start;

		transition: all 1s ease-in;
	}

	main .mobile-menu-container.bg-active {
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 100;
	}

	.mobile-menu-container .mobile-menu-window {
		grid-area: mobile-menu-window;
		margin: 1em;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		overflow: hidden;
	}

	.mobile-menu-window .mobile-menu {
		grid-column: 1 / span 1;
		grid-row: 1;

		transform: translateY(100%);
	}

	.mobile-menu-window .download-app-instructions {
		grid-column: 1 / span 1;
		grid-row: 1;
		z-index: -1;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"btn"
			"heading"
			"download-app-instructions-content";
		transform: translateY(100%);
	}

	.mobile-menu-window .download-app-instructions.active {
		z-index: 100;
	}

	.download-app-instructions .btn {
		grid-area: btn;
		background-color: var(--content-bg-colour);
		padding: 1em;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.download-app-instructions .btn button {
		padding: 1em 1.5em;
		border: none;
		border-radius: 20px;
		font-size: var(--mq-p-font-size);
		font-family: var(--font-family-p);
		background-color: var(--heading-bg-colour);
		color: var(--font-colour-light);
	}

	.download-app-instructions .heading {
		grid-area: heading;
		background-color: var(--heading-bg-colour);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 1em;
	}

	.download-app-instructions .heading p {
		font-size: var(--mq-p-font-size);
		font-family: var(--font-family-p);
		color: var(--font-colour-light);
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		line-height: var(--line-height);
	}

	.download-app-instructions .content {
		grid-area: download-app-instructions-content;
		background-color: var(--content-bg-colour);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 1em;
		text-align: center;
	}

	.download-app-instructions .content p {
		font-size: var(--mq-p-font-size);
		font-family: var(--font-family-p);
		color: var(--font-colour-light);
	}

	.download-app-instructions .content .img {
		width: 3em;
		height: 3em;
		margin: 1em 0em;
	}

	.download-app-instructions .content .img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.download-app-instructions .content p {
		font-size: var(--mq-p-font-size);
		font-family: var(--font-family-h2);
		color: var(--font-colour-dark);
		line-height: var(--line-height);
	}

	.download-app-instructions .content span {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.mobile-menu {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(10em, auto);
		grid-template-areas: "ul" "download-app";
	}

	.mobile-menu ul {
		width: 100%;
		height: 100%;

		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:
			minmax(10em, auto)
			minmax(10em, auto)
			minmax(10em, auto)
			minmax(10em, auto);
		grid-template-areas:
			"home"
			"about"
			"features"
			"contact";

		list-style: none;
	}

	.mobile-menu ul .home {
		grid-area: home;
	}
	.mobile-menu ul .features {
		grid-area: features;
	}
	.mobile-menu ul .about {
		grid-area: about;
	}
	.mobile-menu ul .contact {
		grid-area: contact;
	}
	.mobile-menu ul .download-app {
		grid-area: download-app;
		background-color: var(--heading-bg-colour);

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

	.mobile-menu ul .home a,
	.mobile-menu ul .features a,
	.mobile-menu ul .about a,
	.mobile-menu ul .contact a {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: var(--content-bg-colour);
		text-decoration: none;
		font-size: var(--mq-p-font-size);
		font-family: var(--font-family-p);
		color: var(--font-colour-dark);
	}

	.mobile-menu .download-app {
		background-color: var(--heading-bg-colour);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.download-app-btn {
		grid-area: download-app-btn;
	}

	.mobile-menu .download-app button {
		font-size: var(--mq-p-font-size);
		font-family: var(--font-family-p);
		padding: 1em 2em;
		border: none;
		border-radius: 20px;
		color: var(--font-colour-dark);
	}

	.mobile-menu ul .home a,
	.mobile-menu ul .features a,
	.mobile-menu .download-app {
		border: var(--border-styles-3);
	}

	.mobile-menu .about a,
	.mobile-menu .contact a {
		border-left: var(--border-styles-3);
		border-right: var(--border-styles-3);
	}

	@keyframes mobileMenuSlideDown {
		from {
			transform: translateY(-100%);
		}
		to {
			transform: translateY(0%);
		}
	}

	@keyframes mobileMenuSlideUp {
		from {
			transform: translateY(0%);
		}
		to {
			transform: translateY(-100%);
		}
	}

	@keyframes downloadInstructionsSlideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0%);
		}
	}

	@keyframes downloadInstructionsSlideDown {
		from {
			transform: translateY(0%);
		}
		to {
			transform: translateY(100%);
		}
	}

	/**********************************************************/

	/**********************************************************/

	/* Footer */

	nav-footer .navlinks-container ul {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 5em 0em;
	}

	nav-footer .navlinks-container ul li a {
		font-size: 1.7rem;
		padding: 0.5em 1em;
	}
}

/* ************************* */
@media (max-width: 900px) {
	.footer-copyright p {
		line-height: var(--line-height);
	}

	.footer-copyright p span {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.disclaimer {
		margin-top: 0.5em;
	}

	.dash {
		visibility: visible;
	}

	.dash.hidden {
		visibility: hidden;
	}
}
/* ************************* */

/* ************************* */
@media (max-width: 768px) {
	:root {
		--mq-p-font-size: 2.3rem;
	}
}
/* ************************* */

/* ---------------------------- */
@media (max-width: 675px) {
	nav {
		grid-area: nav;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"logo-container"
			"mobile-menu-icon-container";
	}

	.mobile-menu-icon-container {
		grid-area: mobile-menu-icon-container;
		background-color: var(--content-bg-colour);
		display: flex;
		justify-content: center;
		align-items: center;
		padding-right: 0em;
	}

	.logo-container {
		padding: 2em 0em;
	}

	.mobile-menu-icon-container {
		padding-bottom: 3em;
	}

	.mobile-menu-btn {
		padding: 2em;
	}
}