/*
font-family: 'Audiowide', cursive;
font-family: 'Bree Serif', serif;
font-family: 'Comfortaa', cursive;
font-family: 'Courgette', cursive;
font-family: 'Girassol', cursive;
font-family: 'Lobster', cursive;
font-family: 'Rubik', sans-serif;
font-family: 'Russo One', sans-serif;
font-family: 'Suez One', serif;
font-family: 'Days One', sans-serif;
*/


#format {
  margin: 0 auto;
  max-width: 960px;
}

header {
  background-color: #36454f;
  padding: 20px;
  color: white;
  text-align: center;
  font-size: 20px;
  font-family: 'Days One', sans-serif;
}

.head-grid {
    display: grid;
    grid-template-columns: 225px 1fr;
}
.head-grid img {
    grid-column: 1;
    border: 5px solid white;
}

header img {
    width: auto;
    height: 150px;
}

.header-text {
    text-align: left;

}

aside {
    display: none;
}

aside p {
    text-align: center;
    margin: 0px;
    padding: 20px 0 20px 0;
    color: #36454f;
    background-color: orange;
}

nav {
	background-color: #396E94;
	text-align: center;
	box-shadow: 0 2px 15px gray;
    font-family: 'Roboto', sans-serif;
}
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
nav ul li a {
	display: block;
	color: #fff;
	text-align: center;
	padding: 0.75rem;
	text-decoration: none;
	font-size: 0.95rem;
}
nav a:hover {
	background-color: #bbb;
	color: #36454f;
}



nav li:first-child {
	display: block;
}
nav li {
	display: none;
}

/* the onclick JS toggles the .repsonsive class from display none (.navigation li) to display block because the repsonsive class is added to the end of the class list like this in HTML Line #6.
  <ul class="navigation responsive">
  */
.responsive li {
	display: block;
}


h1 {
    font-size: 1.3em;
}

h2 {
    font-size: 1.1em;
    color: #396E94;
    display: block;
}

h3 {
    color: #396E94;
}

h4 {
    font-size: 20px;
}

p {
    font-family: 'Roboto', sans-serif;
}

#color1 h2 {
    color: white;
}

#color2 h2 {
    color: white;
}

main {
    margin: 0 10px 0 10px;
    font-family: 'Roboto', sans-serif;
    min-height: calc(100vh - 274px);
  }

#hero-section {
    display: block;
}

#heroimage {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;

    width: 100%;
}

.summary {
    display: block;
    
}

.summary-format {
    line-height: 0.180rem;
    text-decoration: none;
}

#fulltext {
    display: block;
}


img {
      align-items: center;
  }

footer {
  text-align: center;
  clear: both;
  background-color: #36454f;
  padding: 20px 0 5px 0;
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
}

footer a {
  color: #FFFFFF;
}

/* Lesson 2 Grid */

.lesson3_grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1em;
}

.page-head {
    grid-column: 1;
    text-align: center;
    margin: 30px 0 30px 0;
    padding: 0 100px 0 100px;
}

#color1 {
    grid-column: 1;
    width: auto;
    background-color: #36454F;
    color: white;
    text-align: center;
    padding: 5px;
    border-radius: 15px;
}

#color2 {
    grid-column: 1;
    width: auto;
    background-color: #396E94;
    color: white;
    text-align: center;
    padding: 5px;
    border-radius: 15px;
}

#color3 {
    grid-column: 1;
    width: auto;
    background-color: #D6D6D6;
    text-align: center;
    padding: 5px;
    border-radius: 15px;
}

a {
    text-decoration: none;
    color: #0057b8;
}

.paragraph_height {
    height: 140px;
}

.article-section {
    padding-top: 15px;
}

#articleimage {
    width: 250px;
}

.article-text {
    padding: 10px;
}


.hero-section {
    display: grid;
    grid-template-columns: 1fr;
}

#summary-block {
    background-color: #396E94;
    color: white;
    display: block;
    padding-top: -10px;
    text-align: center;
}

.bottom-info {
    width: 100%;
    background-color: #36454F;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1em;
}

#map {
    width: 355px;
    height: 250px;
}

.forcast-header {
 
    border: 5px solid lightgray;
    padding: 10px;
    color: white;
    background-color: #396E94;
}

.forcast-section {
    text-align: center;
}

.article-box {
    border: 5px solid lightgray;

}

.forecast-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    justify-content: end;
}

.contact-info h3 {
    color: white;

}

.bottom-info {
    width: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 10px;
    display: block;
}

.location-img {

    grid-column: 1;
    grid-row: 2;
}

.contact-info {
    grid-column: 1;
    grid-row: 1;
}

.icons {
    display: none;
}

.days1 {
    text-align: center;
    padding-top: 15px;
    color: white;
    background-color: #396E94;
    grid-column: 1;
    font-size: 15px;
}

.days2 {
    text-align: center;
    padding-top: 15px;
    color: white;
    background-color: #396E94;
    grid-column: 2;
    font-size: 15px;
}

.days3 {
    text-align: center;
    padding-top: 15px;
    color: white;
    background-color: #396E94;
    grid-column: 3;
    font-size: 15px;
}

.days4 {
    text-align: center;
    padding-top: 15px;
    color: white;
    background-color: #396E94;
    grid-column: 4;
    font-size: 15px;
}

.days5 {
    text-align: center;
    padding-top: 15px;
    color: white;
    background-color: #396E94;
    grid-column: 5;
    font-size: 15px;
}