/*flex will be the main display type used to style the webpage, including the justify-content, flex-flow and align-items features of flex to fine tune the layout*/

/*The body of all pages wil have a column style flex layout with a dark background and yellow hightlighting trims for the theme.*/
body{
    display: flex;
    flex-flow: column nowrap;
    background-color: #0E0C0D;
    color: #9CA3AF;
    margin: 50px;
    margin-bottom: 0;
    font-family: Roboto;
}

/*the planned layout of the pages will be in pods for ease of understanding and designing the layout. pod1 will be the first pod within the body that will contain the logo at the top left of the page.*/
.pod1{
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    width:100%;
    margin: 0 auto;
}

/*pod2 will contain the navigation and content of the webpage. To align with the planned layout, this pod will use flex row, where the nav and the main content of the page will be side by side.*/
.pod2{
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    width:100%;
    margin-top:40px;
    margin-bottom: 40px;
}

/*pod3 will contain the main content of all webpages. pod3 can be used multiple times to create seperate pods that can act as content dividers.*/
.pod3{
    display: flex;
    border-radius: 65px;
	background-color: #1F2937;
    width:90%;
    justify-content: flex-start;
	flex-direction: column;
	align-items: left;
    font-size: 22px;
    margin-left: 40px;
	margin:0 20px;
	margin-bottom:10px;
	padding:20px;
}

/*Heading for each pod3 on a page will have a yellow color and a defined margin to add space for presentation*/
.pod3 h1 {
	border-bottom: 5px solid #FFEB00;
	margin: 30px;
}
/* Logo area will be yellow text based with black text */
.logo{
	display: flex;
	border-radius: 35px;
	border: 3px solid #374151;
	background-color: #FFEB00;
	color: black;
	width: 200px;
	height: 100px;
	justify-content: center;
	align-items: center;
	font-size: 32px;
}

/* Navigation font size 20px */
.nav{
	font-size: 20px;
}
/* navigation uses a unordered list, removed padding and fixed with the maintain the layout*/
.nav ul {
	padding: 0;
	margin: 0;
	justify-content: center;
	width:150px;
}

/* uses each li element nested in nav class, to style the navigation buttons. Fixed height adjusted to create a round oval button */
.nav ul li {
	list-style-type: none;
	border-radius: 20px;
	border: 2px solid #374151;
	height: 40px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* further navigation adjustments, grey font and removed any a element formatting (underline) */
a {
	color: #9CA3AF;
	text-decoration: none;
}

/* adjust behaviour of navigation list  when the pointer is over it */

.nav ul li:hover {
	cursor: pointer;
	background-color: white;
	color: black;
}

/* Adjust what happens to the link text for navigation */
.nav ul li:hover a{
	cursor: pointer;
	color: black;
}

/* any text that needs to be highlights will be assigned element mark for make text yellow to match theme */
mark{
	background-color: transparent;
	color:#FFEB00;
}

/* footer will be the same at the bottom of all pages, with a dark white color border setup to display in column.*/
footer{
    display: column-flex;
    flex-flow: row no wrap;
    border-radius: 25px;
    border-top: 3px solid #374151;
    border-left: 3px solid #374151;
    border-right: 3px solid #374151;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    height: 100px;
    width: 70vw;
    margin: 0 auto;
    align-items:center;
    justify-content: center;
    font-size: 16px;
}

/* when the user pointer hovers over the footer links, it will change the font to the website yellow theme. */
footer a:hover{
	cursor: pointer;
	color: #FFEB00;
}

/* This is the first container that will hold my name to link to the index of the website. margin right to add space to the right of the element for layout */
.footrowhome{
    margin-right: 60px;
}

/* This container is placed to the right of the footrowhome class, and will have various other links to the website, spaced evenly between and centered for layout */
.footrow1 {
    display: flex;
    flex-flow: row;
    width: 100%;
    height:30px;
    align-items:center;
    justify-content: space-evenly;
    margin: 0 auto;
}

/* to add a border between the above 2 classes for design and layout */
.footrow2 {
    border: 1px solid #374151;
    width: 100%;
}

/* Copyright mark centered in the middle */
.footrow3 {
    display: flex;
    width: 100%;
    align-content: center;
    justify-content: center;
    font-size: 12px;
}