/* Digital Literacy Website revision 4 */

/* These are the settings for the entire document including the font color of the text */
*, html, body {
  margin: 0px;
  padding: 0;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 14px;
  color:#13ff00;
  box-sizing: border-box; 
}

/* This is the background color of the document (body) */
body { 
  background-color: #1f8742; 
} 

/* This is the main headline tag for the page*/
header h1 {
  color:#22af61;
  text-align: center;
  font-size: 50px;
}

/*This is where you can adjust the background color and other attributes of the header section */
header {
  width: 100%;
  padding: 15px 20px 20px 20px;
  background-color:#005f38;
  text-shadow: 0px 0px 5px #04885f;
  text-transform: uppercase;
} 

img {
  border: solid 2px blue;
}

/*This controls the width of the picture column*/
.col-1{
  width:33.3%;
  padding:2%;
}

/*This controls the width of the second column*/
.col-2{
  background-color:#4f9357;
  width:66.7%;
  padding:20px;
}

.col-1 img{
  width:100%;
}

h4{
  text-align:center;
  margin-bottom:20px;
  color: #5cc368;
}

/* This is where you can adjust your subheading text size, color, and placement */
.col-2 h3{
  text-align:center;
  color:#78cda8;
  font-size:1.5rem;
  margin-bottom:10px;
}

/* This is for the list */
ul {
  list-style-type: square;
  margin: 0px 0px 10px 20px;
  padding-left:10px;
}

/* This is where you can adjust the color and font size of the list items */
li {
  color: #18dc33; 
  font-size: 14px;
}

/* This is where you can adjust the size and color of the title of your list */
p {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  color:#60da8c;
  text-align: justify;
}

article p {
  font-size: 14px;
  color: #6fe84a;
  text-transform: capitalize;
}

/* This is where you can adjust the background color and other attributes of the footer section */
footer {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px 20px;
  background-color:#1c683d;
}

/* This is where you can adjust the attributes of the paragraph text of the footer section (including color) */
footer p {
  color: #00922c;
  text-align: center;
  font-size: 18px;
  text-shadow: 0px 0px 3px black;
}







/*Do not touch this section */
.flex-container{
  display: flex;
  flex-wrap:wrap;
  width:100%;
}