/*Used in every section of the website*/
body{
	/*Puts the page to the edge of the screen.*/
	padding:0px; 
	margin: 0px;
	
	margin-bottom: 100px; /*Adds a little extra space at the bottom of the page*/
	background-color: #080c21; /* Sets the colour to a dark grey*/
	font-family: sans-serif; /* Sets the font to sans serif */
	
}

p{
	margin: 0px; /* removes the default margin*/
	overflow: hidden;
	color: #e4e4e4; /*Sets the text colour to white*/
}

h2{
	margin: auto; /* removes the default margin*/
	width: initial;
	padding-bottom: 15px;
	padding-top: 15px;
	font-size: 30px;
	color: #e4e4e4; /*Sets the text colour to white*/
}

nav{
	list-style:none; /*Removes the list styling*/
}

#HomeWelcomePhoto
{
	border-radius: 50%;
	padding: 10px;
	width: 200px; 
	height: 200px;
}

/*Holds the Title and any extra menus for the main content of the website*/
.Content{
	/* Centres the content box horizontally and leaves two side bars*/
	margin-left: auto;
	margin-right: auto;
	padding-left: 25px;
	padding-right: 25px;
	
	margin-top: 40px; /* Moves the content box away from the above content */
	max-width: 1500px;
}

/*The buttons which send you different locations*/
.Button, #Download, #Github{
	display: inline-block;/*Puts the buttons in the same line and in a block form*/
	border-radius: 5px; /*Gives the button curved edges */
	background-color: #007cff; /*Sets the button colour to a turquoise colour*/
	text-align: center; /*Sets the text to be in the centre of the button*/
	color: #e4e4e4; /*Sets the colour of the text to white*/
	margin-right: 10px; /*Pushes the buttons apart*/
	padding: 15px; /*Puts space in the button*/
	overflow: hidden;
}

#Download, #Github
{
	width: 350px;
	padding-left: 0px;
	padding-right: 0px;
	display: inline-block;
	margin:0;
	text-decoration:none; /*removes any decoration*/
}
#Download
{
	border-radius: 0px 0px 0px 5px;
}
#Github
{
	border-radius: 0px 0px 5px 0px;
}

/*The buttons which use images*/
img.Button {
	padding: 0px; /*removes the extra space in the button*/
}

/*The containers for the links used to navigate the project section*/
.SubMenu li{
	display: inline-block;
	background-color: #121717; /*Sets the background colour to a dark grey*/
}

.SubMenu a{
	/*Adds spacing from the edge of the container*/
	padding-left: 10px;
	padding-right: 10px;
	font-size: 20px; /*Sets the font size for the text*/
	color: #e4e4e4;
}

header nav li.Contacts a
{
	font-size: 18px; /*Sets the font size */
}

li
{
	color: #e4e4e4; /*Sets the text colour to white*/
}

#Download:hover, #Github:hover
{
	background-color:#50e1ff;
	color: #080c21;
	transition: all .2s ease-in; /*Animates the changes */
	text-decoration:none; /*removes any decoration*/
}

/* unvisited link */
a:link, .SubMenu a:link , .Button  a:link{
    color: #007cff; /*sets the text colour to white*/
	text-decoration:none; /*removes any decoration*/
}

/* visited link */
a:visited, .SubMenu  a:visited , .Button  a:visited{
    color: #007cff; /*sets the text colour to white*/
	text-decoration:none; /*removes any decoration*/
}

/* mouse over link */
a:hover , .SubMenu a:hover , .Button  a:hover{
    color: #50e1ff; /*sets the text colour to white*/
	text-decoration:none; /*removes any decoration*/
	/*background-color: #0582CA; /*Sets the background of the link to a lighter grey*/
	transition: all .2s ease-in; /*Animates the changes */
	cursor: pointer;
}

/* selected link */
a:active, .SubMenu  a:active  , .Button  a:active{
    color: #025194; /*sets the text colour to white*/
	text-decoration:none; /*removes any decoration*/
	/*background-color: #0582CA; /*Sets the background of the link to an even lighter grey*/
	transition: all .2s ease-in; /*Animates the changes */
}

footer{
	color: #e4e4e4; /*sets the text colour to white*/
	padding:10px;/* Spaces the text from the edge of the footer container */
	width:100%; /*sets the footer to go over the whole screen width*/
	position: fixed; /*Sets the footer to always be at on the screen*/
	bottom: 0px; /*Sets the position of the footer to the very bottom of the screen*/
	opacity: 0.8; /* Makes the footer slightly see through */
}

#Gallery
{
	overflow-x:scroll;
	display:inline-block;
	width:100%;
	white-space:nowrap;
}

.HomeGameButtonIcon
{
	border-radius: 15%;
	width: 80%;
}

#HomeWelcomeMessage
{
	padding-left: 20px;
	padding-right: 20px;
	font-size: 17pt;
	width: 600px;
}

.ProfileImageBlock
{
	max-width: 100%;
	max-height:100%;
}

.HomeWelcomeContainer
{
	/* Centres the content box horizontally and leaves two side bars*/
	margin-left: auto;
	margin-right: auto;
	
	display: flex;
	align-items: center;
	justify-content: center
}

iframe
{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
}

.ProjectButtons
{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
}

.ProjectVideo
{
	width: 700px;
	height: 400px;
}

.ProfessionalButtonTableColumn
{
	width: 25%;
}

.UniButtonTableColumn
{
	width: 25%;
}

.HomeProjectButtonTable
{
	width:100%;
}

.ContactsButtonIcon
{
	width: 50px;
	height: 50px;
}

#LinkedInButtonIcon
{
	width: 60px;
	height: 50px;
}

header nav li.Contacts
{
	display: block; /*Allows me to resize the link size*/
	position: fixed;
	vertical-align: middle;
	
	right: 50px;
	padding-top: 12.5px;
	padding-bottom: 12.5px;
}

/*The Links of the menu bar*/
#LogoImage
{
	display: block; /*Allows me to resize the link size*/
	float: left;
	width: 50px;
	height: 50px;
}

#LogoLink{
	display: block; /*Allows me to resize the link size*/
	position: fixed;
	vertical-align: middle;
	/*position: absolute;*/
	left: 50px;
	padding-top: 15px;
	padding-bottom: 15px;
}

.NameContainer
{
	float:left;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
}

#FirstName
{
	font-size: 30pt;
	padding-left: 15px;
	color: #50e1ff;
}

#SecondName
{
	font-size: 30pt;
	padding-left: 15px;
	color: #007cff;
}

/*The menu bar*/
header nav{
	overflow: auto;
	position: fixed;
	width: 100%;
	height: 80px;
}

header {
	padding-bottom: 85px;
}

#NavBackground
{
	background-color: #080c21;
	opacity: 0.9;
	width: 100%;
	height:100%;
	display: block;
	float: left;
	z-index: 2;
}