@media (prefers-color-scheme: dark) {
	
	/* Dark theme styles go here */
	body{
		background: #000;
		color: #f5f5f7;
  	}

  	/* text selection */
	::selection {
	  background: #a77302 /* WebKit/Blink Browsers */
	}
	::-moz-selection {
	  background: #a77302 /* Gecko Browsers */
	}

  	.content a, .readMoreButton, .postContent a{
		color: #ffaf00;
	}

	.content a:hover, .readMoreButton:hover, .postContent a:hover, .navItem:hover{
		color: #f5f5f7;
	}

	.content code, .postContent code{
		color: #ffaf00;
		background-color: black;
	}

	#navBar{
		background: #000;
		height: 55px;
	}

	.postTitle, .title{
		color: #f5f5f7;
	}

	.postDate, .date{
		color: #f5f5f7;
	}


	.navItem{
		color: #f5f5f7;
	}
	
	.inactiveNavItem{
		color: #ffaf00;
	}

	code{
		background-color: #000;
		border-color: #ffaf00;
		color: #ffaf00;
	}
}

@media (max-width: 767px){
	#postTeasersContainer, .postContainer, #ideasContainer{
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 50px;
	}
}

@media (max-width: 620px) {
	
	#postTeasersContainer, .postContainer, #ideasContainer{
		margin-top:70px;
	}

	#navBar {
		margin-left: 14px;
	}

	.navItem{
		margin-right: 38px;
		font-size: 13px;
	}

}

@media (max-width: 620px) {
	.navItem{
		clear: right;
		margin-top: 5px;
	}

	.navLogo {
	    top: 35px;
	}

	.navLogo code {
	    font-size: 16px !important;
	}

	#navBar{
		margin-top: 18px;
	}

	.postContent p{
		margin: 30px 0;
	}

	.postContent h3{
		margin-top:50px;
	}

	.smallImage{
		max-width: 75% !important;
		margin-left: 12.5% !important;
	}

	#navBar{
		position: relative;
	}

	#contactNavItem, #appNavItem, #blogNavItem{
		margin-top: 2px;
	}

}

@media (max-width: 499px) {
	#navBar .siteLogo{
		margin-left: 25px;
	}
	#contactNavItem, #blogNavItem, #appNavItem{
		margin-top: 5px;
	}
	#appNavItem{
		margin-right: 24px !important;
	}
}


@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
	/* iPhone 5 only */ /* Although this is applying to the iPhone 4 too */
	#navBar{
		margin-top: 12px;
	}

	.navItem{
		font-size: 12px;
	}

}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
	/*iPhone 6 Portrait*/
	#navBar{
		margin-top: 12px;
	}

	.navItem{
		font-size: 12px;
	}

}