body{
	background-color: #212121;
}
/* title */
.title{
	color: #FFFFFF;
}

div.title{
	max-width: 50em;
  margin: 0em auto;
  padding: 0em;
  background-color: #323232;
}

.title h1{
  font-size: 4em;
  margin-bottom: 0em;
  font-family: "Protest Guerrilla", sans-serif;
}
.title li, .title p{
	font-size: 1.5em;
  margin-top: 0em;
  margin-bottom: 0em;
  margin-left: 1em
}

/* article */
.article{
	color: #E6E0BC;
  margin: 0em;
  padding: 0;
  text-height: 1;
  line-height: 1.5;
}
div.article{ /* div classed as article */
  background-color: #2F3B28;
  background-image: url("https://projects.codecraftworks.com/web/pX7Df61WWnNtWgUFIiJq/assets/green skin.png");
  background-size: 50em;
  border: solid #564030;
  border-bottom-left-radius: 3em;
  border-top-right-radius: 3em;
  max-width: 50em;
  margin: 2em auto;
  padding-right: 1em;
  padding-left: 1em;
  padding-top: 0;
  padding-bottom: 1em;
  font-family: "Merriweather", system-ui;
}

.article h2{
	font-size: 2.4em;
  font-family: "Protest Guerrilla", sans-serif;
  color: #FFFFFF;
}

.article h3{
	font-size: 1.8em;
  font-family: "Protest Guerrilla", sans-serif;
  color: #FFFFFF;
}

.article p{
	margin-left: 2em;
}

.article li{
	max-width: 23em;
}

.article img{
	max-width: 23em;
}

/* split box */
.split-box{
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

/* fonts */
.protest-guerrilla-regular {
  font-family: "Protest Guerrilla", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.merriweather-light {
  font-family: "Merriweather", system-ui;
  font-weight: 300;
  font-style: normal;
}

.merriweather-regular {
  font-family: "Merriweather", system-ui;
  font-weight: 400;
  font-style: normal;
}

.merriweather-bold {
  font-family: "Merriweather", system-ui;
  font-weight: 700;
  font-style: normal;
}

.merriweather-black {
  font-family: "Merriweather", system-ui;
  font-weight: 900;
  font-style: normal;
}

.merriweather-light-italic {
  font-family: "Merriweather", system-ui;
  font-weight: 300;
  font-style: italic;
}

.merriweather-regular-italic {
  font-family: "Merriweather", system-ui;
  font-weight: 400;
  font-style: italic;
}

.merriweather-bold-italic {
  font-family: "Merriweather", system-ui;
  font-weight: 700;
  font-style: italic;
}

.merriweather-black-italic {
  font-family: "Merriweather", system-ui;
  font-weight: 900;
  font-style: italic;
}