/*
	Name: Balraj Katwal
	UoN ID: 16418510 
*/

/*To remove existing margins and paddings on the page*/
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Exo', sans-serif;  /*setting the CSS property for font-family to Exo from google fonts and using the fallback font sans-serif*/
}

.logo {
/*	setting the height and width of the page's logo*/
	height: 55px;
	width: 90px;
	margin: 0px 0px 18px 250px; /*To shift the logo towards right*/
	transition: all 1s ease;  /*To set the transition property for each social logo item*/
}

.logo:hover{
	transform: scale(1.10);  /*To scale up the size of logo on hover*/
}

.menubar {
	background: rgba(178,190,40,0.80);  /*To set the background color of the menubar at the top of the page*/
	/*setting the height of the menubar and giving it border to the left side of menubar for extra design*/
	height: 60px;
	border-left: 15px dashed #C5070B;
	display: flex;
	justify-content: center; /*The menu items are centered */
	margin-top: -80px;  /*To adjust the menubar to keep it at the top of everything else*/
}


li {
	list-style: none;  /*To remove the list style from the menu list*/
}

.menu {
	text-decoration: none;	/*To remove the underline from the links*/
	text-transform: uppercase;	/*To make all the letters uppercase*/
	display: inline-block;	/*To display the elements in the block elements*/
	color: #031737;
	padding: 19.5px;
}

.menu:hover {  /*Changes the background color and color of the menu links*/
	background: #031737;
	color: #B2BE28;
}

.flag {
	height: 60px;
	float: right;	/*To render the flag of Nepal at the right side in the menubar*/
	margin: -60px 200px 0 0;
}

section {
	background: linear-gradient(to bottom, #111722, #38506B); /*Adding linear background to the middle section of the page*/
	padding: 20px 0px;
}

h2, h3 {
	text-align: center;
	padding: 20px 0px;
	color: snow;
	text-shadow: 1px 1px 2px yellow; /*Adding text shadow to the text making it look highlighted*/
}

.collection {
	display: flex;	/*To make the display property of images to flex*/
	justify-content: center;	/*To make the images fill the center spaces first*/
	flex-wrap: wrap;	/*To make the images display in multiple lines according to the screen size*/
	flex-basis: auto;	/*It distributes the extra spaces around the images*/
	margin-bottom: 20px;
	padding: 15px 0px;
	box-shadow: 1px 1px 20px 1px grey; /*To add the box shadow in each collection box*/
}

.childhood-pics img{
	margin: 0px 25px; /*To change the margin property slightly different form parent*/
}

.personal-pics img{
	margin: 0px 5px; /*To change the margin property slightly different from the parent*/
}

.collection img {
	margin: 8px;
	transition: all 1s ease; /*To set the transition property on all images*/
}

.collection img:hover {
	transform: scale(1.20); /*To scale up the size of images on hover*/
}

footer {	/*Propersies for footer*/
	background: rgba(31,30,30,1.00);
	height: 100px;
	color: white;
}

.footer-text {	/*Properties for text inside the footer*/
	text-align: center;
	padding: 3%;
}