/* 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: 0px;
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 14px;
  color:#68c05c;
  box-sizing: border-box; 
}

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

/* This is the main headline tag for the page*/
header h1 {
  color:#00c95a;
  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:#006b16;
  text-shadow: 0px 0px 5px lightgray;
  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:#16ac37;
  width:66.7%;
  padding:20px;
}

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

h4{
  text-align:center;
  margin-bottom:20px;
  color: yellowgreen;
}

/* This is where you can adjust your subheading text size, color, and placement */
.col-2 h3{
  text-align:center;
  color:#42d872;
  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: #0f6d00; 
  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:#3dd64e;
  text-align: justify;
}

article p {
  font-size: 14px;
  color: greenyellow;
  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:#205e05;
}

/* This is where you can adjust the attributes of the paragraph text of the footer section (including color) */
footer p {
  color: #4a992a;
  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%;
}