:root {
  --code-max-height: 60rem;
}

.icon-grid {
  width: 8rem;
  height: 8rem;
  margin: 0.2em;
  text-align: center;
  padding: 0.3em;
}

.icon-grid__line {
  height: 4rem;
}

.icon-grid__line .gdoc-icon {
  width: 3em;
  height: 3em;
}

.icon-grid__line--text {
  font-size: 0.8em;
}

/* Light mode theming */
:root,
:root[color-theme="light"] {
  --header-background: #3d9be9;
  --header-font-color: #ffffff;
}

  @media (prefers-color-scheme: light) {
    :root {
      --header-background: #3d9be9;
      --header-font-color: #ffffff;
    }
  }
/* Dark mode theming */
:root,
:root[color-theme="dark"] {
  --header-background: #3d9be9;
  --header-font-color: #ffffff;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --header-background: #3d9be9;
      --header-font-color: #ffffff;
    }
  }
/* ================INSTRUCTIONS=================*/ 
/* By changing the info below, you can reduce the size of the logo or hide the search box. You can also override the standard font characteristics if you would like to use your own custom styles. In order for your changes to work though, you MUST include a reference in your HTML pages to both the common CSS file and custom CSS file in that order.

Instructions are provided below for customizing these classes. */

/* =============Width===============*/ 
/* BY DEFAULT, THERE IS NO MAX WIDTH:
If you want the want to restrict the width of the page, remove the comment out slashes and astricks surrounding the ".tmp-container  {max-width: 1170px;}". you can change the 1170px to a smaller/larger max width if you'd like */
 
/* .tmp-container {
	max-width: 1170px;
} */

/* =============Search===============*/ 
/* BY DEFAULT, Search box is displayed:
If you want the to hide the search, remove the comment out slashes and astricks surrounding the ".search-box {display:none;}" below.  */
 

#search-box {
	display: none;
}

/* =============LOGO===============*/ 
/* THE DEFAULT LOGO HEIGHT IS 65PX:
If you want the logo to be smaller (50px), comment out the ".logo-header img {height 65px;}" below and remove the comment out slashes and astricks surrounding the ".logo-header img {height: 50px...margin-top: 18px;}" and the header search input (so the search box size is reduced too). 50px is the MINIMUM HEIGHT for the logo. */
/* .logo-header img {
    height: 65px;
}*/

.logo-header img {
	height: 50px;
} 

.header-search input[type="search"] {
	height: 30px;
	margin-top: 16px;
}
.header-search button[type="submit"] {
	width: 26px;
	height: 30px;
	margin-top: 18px;
}


/* =============STANDARD CONTENT===============*/ 
/* TO CHANGE THE TEXT SIZE OF THE CONTENT, FONT, ETC:
By default, USGS has set the font size, family, etc. in order to provide a consistent size for content across all pages. If you would prefer not to have any of these pre-defined formats, you can change them below. NOTE: header and footer will not be changed. */
/* #maincontent {
	font-family: 'Source Sans Pro',sans-serif;
	font-size: 14px;
    line-height: 1.42857;
    color: #333333;
    background-color: #fff;
	padding-left: 15px;
	padding-right: 15px;
} */

/* =============SEARCH===============*/ 
/* THIS HIDES THE SEARCH BOX ON VERY SMALL DEVICES:
For simplification, search bar is visible on larger screens but is hidden on small screens. If you would prefer not to have the search box at all, you can remove the "@media (max-width:500px) {" and the second closing "}". below */
@media (max-width:500px){
.header-search form { 
	display: none}
}

/* =============SOCIAL MEDIA===============*/ 
/* If you would prefer not to have the social media links, you can remove the comment out slashes and astricks surrounding the content below */
.footer-social-links { 
	display: none}