* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family:'Poppins', sans-serif;
}

/* Colours used */
:root {
	--primary: white;
	--secondary: #6d3c98;
	--tertiary: black;
	--quaternary: #623689;
	--quinary: #7c50a2;
	--senary: #ccc;
}

/* Container divided into rows and collumns to allocate space to navbar, main and footer */
.container {
	display: grid;
	height: 100vh;
	grid-template-columns: 1fr;
	grid-template-rows: 70px 1fr 102px;
	grid-template-areas:
	"nav"
	"main"
	"footer";
}


.main {
	border: 4px solid var(--secondary);
	border-radius: 10px;
	padding: 48px;
	margin-left: 20%;
	margin-right: 20%;
	margin-top: 2%;
	margin-bottom: 2%;
	grid-area: main;
}

/* List padding correction */
ul{
	padding-left: 20px;
}

/* Blockquote | Changing font size and placing quotation marks around the text */
blockquote{
	font-size: smaller;
}

blockquote p::before {
    content: '\201C';
}

blockquote p::after {
    content: '\201D';
}

/* Spacing out the paragraphs and headings */
.main > * + * , .text > * + * , .profile > * + *{
	margin-block-start: var(--vertical-rhythm, 1.5em);
}
.main > :is(h1,h2,h3), .text > :is(h1,h2,h3,h4), .profile > :is(h1,h2,h3,h4){
	--vertical-rhythm: 4.5em;
}

input[type=text], textarea {
	margin-bottom: 1rem;
	width: 100%;
	padding: 12px;
	border: 1px solid var(--senary);
} 
input[type=submit] {
	background-color: var(--secondary);
	color: var(--primary);
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	float: left;
} 
input[type=submit]:hover{
	background-color: var(--quinary);
	transition: 0.5s;
}


nav {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 70px;
	padding: 0 1.5em;
	background-color: var(--secondary);
	font-family: 'Montserrat', sans-serif;
	grid-area: nav;
	z-index: 9999;
}
nav .logo {
	font-size: 1.25em;
	line-height: 50px;
	color: var(--primary);
	font-weight: bold;
}
nav .motto {
	line-height: 0px;
	font-size: 10px;
	color: var(--primary)
}
nav .nav-menu {
	position: fixed;
	right: 1.5em;
	top: 0;
	padding: 0;
	margin: 0;
	list-style: none;
	font-weight: 500;
}
.dropdown .dropdown-menu, .dropdown .dropdown-menu{
	font-weight: 400;
}
nav .nav-item {
	display: inline-block;
}
nav .nav-item > a {
	display: inline-block;
	padding: 0 1.5em;
	line-height: 70px;
	color: var(--primary);
	text-decoration: none;
}
nav .nav-item > a:hover{
	background: var(--quinary);
	transition: 0.5s;
}
nav .dropdown-menu > a:hover{
	background: var(--quinary);
	transition: 0.5s;
}
nav .dropdown {
	position: relative;
}
nav #aboutUs::after {
	content: '';
	display: inline-block;
	margin-left: .5em;
	vertical-align: middle;
	border-top: .3em solid #fff;
	border-right: .3em solid transparent;
	border-left: .3em solid transparent;
}
nav #aboutUs.show a::after {
	transform: rotate(180deg);
}

nav #takeAction::after {
	content: '';
	display: inline-block;
	margin-left: .5em;
	vertical-align: middle;
	border-top: .3em solid #fff;
	border-right: .3em solid transparent;
	border-left: .3em solid transparent;
}
nav #takeAction.show a::after {
	transform: rotate(180deg);
}
nav .dropdown a::after {
	display: inline-block;
	margin-left: .5em;
	vertical-align: middle;
	border-top: .3em solid var(--primary);
	border-right: .3em solid transparent;
	border-left: .3em solid transparent;
}
nav .dropdown.show a::after {
	transform: rotate(180deg);
}
nav .dropdown-menu {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: -.1em;
	border: 1px solid var(--quaternary);
	background-color: var(--quaternary);
}
nav .dropdown.show .dropdown-menu {
	display: block;
}
nav .dropdown-item {
	display: block;
	padding: 0 1.5em;
	font-size: .700em;
	color: white;
	line-height: 3;
	text-decoration: none;
}
nav .btn-hamburger {
	display: none;
	position: absolute;
	right: 1.5em;
	top: 50%;
	background-color: transparent;
	border: 0;
	cursor: pointer;
	outline: none;
	transform: translateY(-50%);
}
nav .btn-hamburger span {
	display: block;
	width: 30px;
	height: 4px;
	background-color: var(--primary);
	margin: 6px;
	border-radius: 2px;
	transition: .3s ease-in-out;
}
nav .btn-hamburger span:nth-child(4),
nav .btn-hamburger span:nth-child(5) {
	position: absolute;
	top: 10px;
	opacity: .5;
}
nav .btn-hamburger span:nth-child(4) {
	transform: rotate(45deg) scale(0);
}
nav .btn-hamburger span:nth-child(5) {
	transform: rotate(-45deg) scale(0);
}
nav.opened .btn-hamburger span:nth-child(4) {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}
nav.opened .btn-hamburger span:nth-child(5) {
	opacity: 1;
	transform: rotate(-45deg) scale(1);
}
nav.opened .btn-hamburger span:nth-child(1),
nav.opened .btn-hamburger span:nth-child(2),
nav.opened .btn-hamburger span:nth-child(3) {
	opacity: 0;
}

/* Footer */
footer {
	background: var(--secondary);
	text-align: center;
	padding: 10px;
	
	/*Place the navbar at the bottom*/
	position: static;
	bottom: 0;
	width: 100%;
	grid-area: footer;
  }
  
  footer p{
	color: var(--primary);
	font-size: 12px;
	text-decoration: none;
	padding: 10px;
  }
  
  footer a{
	padding: 12px 6px;
	border-radius: 4px;
  }
  
  footer a:hover{
	background: var(--quinary);
	transition: 0.5s;
  }
  
  .fa {
	color: var(--primary);
	padding: 10px;
	font-size: 20px;
	width: 40px;
	text-align: center;
	text-decoration: none;
	margin: 4px 2px;
  }

  /* Responsive */
	@media (max-width: 800px) {
		nav .nav-menu {
			position: fixed;
			left: 0;
			right: 0;
			top: 70px;
			bottom: 100%;
			display: flex;
			flex-direction: column;
			justify-content: start;
			background-color: var(--quaternary);
			transition: bottom .5s ease-in-out;
			overflow: hidden;
		}
		nav.opened .nav-menu {
			bottom: 0;
		}
		nav .nav-item > a {
			display: block;
		}
		nav .dropdown-menu {
			position: relative;
			top: 0;
			margin: 0;
			border: 1px solid var(--quaternary);
			background-color: var(--secondary);
		}
		nav .dropdown-item {
			font-size: .880em;
		}
		nav .btn-hamburger {
			display: block;
		}
		/* main content */
		.main {
			margin-left: 2%;
			margin-right: 2%;
			margin-top: 2%;
			margin-bottom: 2%;
		}
	}