/* global */
@import url('https://fonts.googleapis.com/css2?family=Karla&display=swap');

* {
box-sizing: border-box;
}

/* Style the header */
header {
	background-color: transparent;
	height:120px;
	width: 100%;
	text-align: center;
	font-size: 20px;
	color: #000000;
	
	padding: 0;
	margin:0;
	margin-top: 20px;
	margin-bottom: 40px;
}

/* title header styling */
h1 {
	padding: 0;
	margin:0;
}

/* article header styling */
h2 {
	padding-bottom: 10px;
	margin:0;
}

/* paragraph styling */
p {
	padding-top: 20px;
	margin:0;
}

/* Creating padding at the bottom of the page to make sure nothing is hidden under footer */
section {
	padding-bottom: 100px;
}

/* Style the body */
body{
	background-color: transparent;
	font-family: 'Karla', sans-serif;
	color: #000000;
	
	margin: 0;
	padding: 0;
}

/* Create two columns/boxes that floats next to each other */
/*nav {
	background: transparent;
	height: 100%;
	width: 200px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;

	padding-top: 185px;
	margin-top: 15px;
	margin-left: 20px;
	font-size: 20px;
}*/

/* Style the list inside the menu */
/*nav ul {
	list-style-type: none;
	padding: 0;

	margin: 0;
    padding: 0;
}*/

/* Style the hover links */
a:hover {
	background-color: #0094f0;
}

/* Style the article blocks */
article {
	background-color: transparent;
	float: left;
	width: relative;
	font-size: 20px;

	padding: 0;
	margin-top: 15px;
	margin-left: 100px;
	margin-right: 100px;
	margin-bottom: 15px;
}
/* Making the image a block level element (to have it's own section) */
img { 
	display:block; 
	width: 200px; 
	height: relative;

	margin-top: 15px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
}  

/* Clear floats after the columns */
section:after {
	content: "";
	display: table;
	clear: both;
}

/* Style the footer */
footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: transparent;
	color: black;
	text-align: center;

	padding-bottom: 10px;
}

/* Responsive layout - when the screen width drops below threshold - aka small screens */
@media (max-width: 600px) {


	/* title header styling */
	h1 {
		font-size:6vw;
		padding: 0;
		margin:0;
	}
	/* Changing header margins to be smaller */
	header {
		width: 100%;
		height: relative;

		padding: 0;
		margin:0;
		margin-top: 20px;
		margin-bottom: 0px;
	}

	/* Centering the articles */
	article {
		width: relative;
		height: relative;

		padding: 0;
		margin-top: 15px;
		margin-left: 50px;
		margin-right: 50px;
		margin-bottom: 20px;
	}

	/* Using the complete screen */
	html {
		width: 100%;
		
        margin: 0;
        padding: 0;
    }

	/* Moving the navigation pane above the articles */
    /*nav {
		text-align: center;
		height: 30px;
		width: 100%;
		position: relative;
		float: left;
		z-index: 1;
		top: 0;
		left: 0;

		padding-top: 0px;
		margin-top: 15px;
		margin-left: 0px;
		font-size: 20px;
	}*/

	/* Displaying the links horizontally and spread out */
	/* nav li {
		display: inline;
		list-style-type: none;
	
		margin: 1.5%;
		padding: 0;
	}*/

}