/* CSS document*/

#container {
width: 80%;
margin: 0 auto;
}

/* Typography */

h1,h2,h3 {
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
line-height: 1.3em;
}

h4 {
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
font-style: italic;
line-height: 1.3em;
}

.bolditalic {
font-family: 'Noto Sans', sans-serif;
font-size: 24px;
font-weight: 700;
font-style: italic;
line-height: 1.3em;
}

p, li {
font-family: 'Noto Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5em;
}

li {
font-family: 'Noto Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.8em;
}

.italic {
font-family: 'Noto Sans', sans-serif;
font-size: 16px;
font-weight: 400;
font-style: italic;
line-height: 1.3em;
}

/* Layout */
	
#section1 {
clear: both;
}
	
#section1, #section2, #section3 {
clear: both;
padding-top: 20px;
} 
	
#sidebar {
background-color: #E6EBEB;
margin-top: 50px;
padding: 10px 50px 30px 20px;
}

.column1 {
float: left;
width: 60%;
}

.column2 {
float: left;
width: 35%;
margin-left: 20px;
}

footer {
clear: both;}

/* Navigation */

ul#nav {
margin: 0;
padding: 20px 0 0 0;
}
	
ul#nav li {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #999;
}

ul#nav li {
float: left;
margin-right: 10px;
}

ul#nav li:first-child {
margin-left: 0;
}

ul#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color on hover */
ul#nav li a:hover {
background-color: #111;
}

/* Other List Styles */

ul.square {
list-style-type: square;
}

/* Other Styles */

p.history {
columns: 2;
column-gap: 40px;
}

p.link {
border-top: 1px dashed #ccc;
padding-top: 30px;}

/* Media */

img {
width: 100%;
margin: 40px 0;}

/* Responsive Design */

@media screen and (max-width: 900px) {

p.history {
columns: 1;
column-gap: 0;}
 
.column1 {
clear: both;
width: 100%;}

.column2 {
clear: both;
width: 100%;
margin-left: 0;}

#sidebar {
margin-top: 20px;
}

img {
width: 100%;
}

}