/*-------fonts-------*/

/* importing fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Titillium+Web:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/* adjusting line-spacing for open-sans. using open sans for body text: highly legible, relatively anonymous sans serif. Supports wide range of characters*/
p {
	font-family: "Open Sans", sans-serif;
	font-size: 1em;
	line-height: 1.6em;
}

/* matches font of nasa.gov */
h1, h2, h3, h4, h5, h6{
	font-family: 'Titillium Web', sans-serif;
}

/* nav bar */
.navigation-top .wrap{
	font-family: 'Titillium Web', sans-serif;
	font-size: 1.2em;
}

/* footer */
#colophon{
	font-family: "Titillium Web", sans serif;
	font-size: 1em;
	line-height: 1.6em;
}

/* increases header font */
.page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
  font-size: 2rem;
}

/* image captions */
[class^="wp-block-"]:not(.wp-block-gallery) figcaption 
{ /*font-style: italic;*/
	color: #eee;
	margin-bottom: 1.5em;
	margin-top: 1em;
	text-align: left; 
	font-family: "Open Sans", sans-serif;
}

/* citations for quotes */
cite {
	font-family: "Titillium Web", sans-serif;
}

/*-------column grid-------*/

/*--resetting worpress defaults--*/
.entry-content{
	margin-left: 0;
	margin-right: 0;
}

.wrap {
  padding-left: 0em;
	padding-right: 0em;
  max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* margin is -22px to account for padding */
.navigation-top nav {
	margin-left: -22px;
	margin-right: -22px;
	/*position: relative;*/
}

.navigation-top .wrap{
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
}

.panel-content .wrap {
	margin-left: 0%;
	margin-right: 0%;
}

.single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header,.archive.page-one-column:not(.has-sidebar) #primary {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

.page-one-column .panel-content .wrap {
  max-width: 100%;
	margin-left: 0%;
	padding-left: 0%;
}

.site-footer .widget-column.footer-widget-1 {
	width: 100%;
}

/*--defining grid--*/

/* 8 column grid, one column padding on each side for all content */
div.entry-content {
	padding-left: 12.5%;
	padding-right: 12.5%;
	/* max-width: 1500px;
	margin-left: auto;
	margin-right: auto;*/
}

/* text is center 4 columns, 16.5% instead of 12.5% to account for scaled down .entry-content div */
div.entry-content > h2, h3, h4, h5, h6, ul, ol, p {
	margin-left: 16.5%;
	margin-right: 16.5%;
	
}

/* header is not included in .entry-content so has to be adjusted seperately */
header > h1 {
	margin-left: 25%;
	margin-right: 25%;
}

/* adjusting content for large screen sizes, home page */
.panel-content, .site-main {
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}

/* limiting size of footer for large screen sizes */
.site-footer > .wrap {
	max-width: 975px;
	margin-left: auto;
	margin-right: auto; 
}

.site-info {
	max-width: 975px;
	margin-left: auto;
	margin-right: auto; 
}

/* homepage header */
header.entry-header {
	margin-left: 25%;
	margin-right: 25%;
}

/* menu is center 6 columns*/
.navigation-top .wrap {
	margin-left: 12.5%;
	margin-right: 12.5%;
	float: none;
}

/* footer mirrors nav bar, 6 middle columns */
#colophon{
	padding-left: 12.5%;
	padding-right: 12.5%;
}

/* reduces space between content and h1 */
header {
	font-size: .7em;
}

/*-------style-------*/

/* transparent nav bar */
.colors-dark .navigation-top, .colors-dark .main-navigation ul {
	background-color: rgba(0,0	,0,.75);
	/*position: relative;*/
}

/* gets rid of black background behind text in nav bar*/
#top-menu.menu {
	background-color: rgba(0,0,0,0);
}

/* footer color */
#colophon {
	background-color: rgb(0,0,0);
}

/* background color of nested nav bar */
.main-navigation li li a {
	background-color: rgb(65,65,65);
}

/* pullquote alignment */
.wp-block-pullquote {
	text-align: left;
}

/*-------hover states-------*/

/* nav bar hover states */
.main-navigation a:hover{
	color: rgb(22,148,191);
	font-weight: 700;
}

/* nested menu hover states */
.colors-dark .main-navigation li li.focus > a, .colors-dark .main-navigation li li:hover:focus > a, .colors-dark .main-navigation li li:hover > a, .colors-dark .main-navigation li li a:hover, .colors-dark .main-navigation li li a:focus, .colors-dark .main-navigation li li.current_page_item a:hover, .colors-dark .main-navigation li li.current-menu-item a:hover, .colors-dark .main-navigation li li.current_page_item a:focus, .colors-dark .main-navigation li li.current-menu-item a:focus {
	color: rgb(22,148,191);
	background-color: rgb(2,2,2);
}

/* adujusting spacing and text-alignment for wp blocks. Padding does not apply well to separator, so it is omitted.*/
div.entry-content > [class^="wp-block-"]:not(.wp-block-separator) {
	padding-bottom: 2em;
	padding-top: 2em;
	/*text-align: left;*/
}

/* padding for metaslider */
.alignnormal {
	padding-top: 2em;
	padding-bottom: 2em;
}

/* when text is nested within a block, this ensures that it doesn't inherit the p rules from the grid */
[class^="wp-block-"] p {
	margin-left: 0%;
	margin-right: 0%;
	padding-left: 0%;
	padding-right: 0%;
	font-family: "Titillium Web", sans-serif;
}

/*--------media queries-------*/

@media screen and (max-width: 50em){
	/* allow text to fill full 6 columns */
	div.entry-content > h2, h3, h4, h5, h6, ul, ol, p {
		margin-left: 0%;
		margin-right: 0%;
	}
	/* header is not included in .entry-content so has to be adjusted seperately */
	header > h1 {
		margin-left: 12.5%;
		margin-right: 12.5%;
	}

	/* homepage header */	
	header.entry-header {
		margin-left: 12.5%;
		margin-right: 12.5%;
	}
	
	/* menu at smartphone size */
	button.menu-toggle {
		font-family: "Titillium Web", sans-serif;
		font-weight: 700;
		font-size: 1em;
	}
	
	.colors-dark :not( .mejs-button ) > button:hover, .colors-dark :not( .mejs-button ) > button:focus, .colors-dark input[type="button"]:hover, .colors-dark input[type="button"]:focus, .colors-dark input[type="submit"]:hover, .colors-dark input[type="submit"]:focus, .colors-dark .prev.page-numbers:focus, .colors-dark .prev.page-numbers:hover, .colors-dark .next.page-numbers:focus, .colors-dark .next.page-numbers:hover, .colors-dark .entry-footer .edit-link a.post-edit-link:focus, .colors-dark .entry-footer .edit-link a.post-edit-link:hover {
		background-color: transparent;
		color: rgb(22,148,191);
		font-weight: 900; 
	}
	
	/* background color of nested nav bar */
	.main-navigation li li a {
		background-color: black;
		border-style: solid;
		border-width: 1px;
		border-left: none;
		border-right: none;
		border-bottom: none;
		border-color: rgb(60,60,60);
	}
	/* nested blocks stacked at small screen sizes will have padding. Especially important for text. */
	[class^="wp-block-"]    [class^="wp-block-"] {
		padding-top: 2em; 
	}
}

/* adjusts alignment of nav bar at large screen sizes. 81 em determined by max width of nav bar. Max width accounts for padding on "Home".If more menu items added, may be kicked to second line. */
@media screen and (min-width: 81em){
	.navigation-top .wrap {
	margin-left: auto;
	margin-right: auto;
	max-width: 975px;
	}