body {
	margin: 0;
	padding: 0;

	/* width: 100vw;
	height: 100vh; */

	background-color: var(--bg-color);
	animation: fadeOpacityIn 1s ease-out 0s;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* align-content: flex-start; */
	flex-wrap: nowrap;

	/* align-items: not used as should be defined in children; */
	/* justify-content: takes effect in single line containers; */
    /* align-content: takes effect in multi line containers; */

	overflow-x: clip;
	/* overflow-y: hidden; */
	/* scroll-padding-top: 100px; */	

	/* Header */
	& > header {
		margin: 0;
		padding: 0;

		flex: 0 1 auto;
		align-self: stretch;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* align-content: space-between; */
		flex-wrap: nowrap;

		/* align-items: not used as should be defined in children; */
		/* justify-content: takes effect in single line containers; */
		/* align-content: takes effect in multi line containers; */

		background-color: blueviolet;

		& > h1, & > p {
			/* centering */
			text-align: center;
			text-align-last: auto;
			align-self: center;
		}

		& nav {
			margin: 0;
			padding: 0;

			flex: 0 1 auto;
			align-self: stretch;

			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			/* align-content: space-between; */
			flex-wrap: nowrap;

			/* align-items: not used as should be defined in children; */
			/* justify-content: takes effect in single line containers; */
			/* align-content: takes effect in multi line containers; */
		}

		& ul {
			margin: 0;
			padding: 0;

			flex: 0 1 auto;
			align-self: stretch;

			display: flex;
			flex-direction: row;
			justify-content: center;
			/* align-content: space-between; */
			flex-wrap: wrap;

			/* align-items: not used as should be defined in children; */
			/* justify-content: takes effect in single line containers; */
			/* align-content: takes effect in multi line containers; */
		}

		& li {
			margin: 0 4em 0 4em;
			padding:0;

			flex: 0 1 auto;
			align-self: center;

			list-style-type: none;
		}
	}

    /* Main */
    & > main {
    	margin: 0;
    	padding: 0;
    
    	flex: 0 1 auto;
    	align-self: stretch;

    	/* min-width: not used; */
		min-height: 80vh;

    	display: flex;
    	flex-direction: column;
    	justify-content: flex-start;
    	/* align-content: space-evenly; */
    	flex-wrap: nowrap;

    	/* align-items: not used as should be defined in children; */
    	/* justify-content: takes effect in single line containers; */
        /* align-content: takes effect in multi line containers; */

		& > h1, & > p {
			/* centering */
			text-align: center;
			text-align-last: auto;
			align-self: center;
		}
    }

    & > footer {
		margin: 0;
		padding: 0;

		& > p {
			/* centering */
			text-align: center;
			text-align-last: auto;
			align-self: center;
		}
    }
}