@charset "UTF-8";
/* CSS Document */
/*Apply margin and padding properties to various existing CSS rules in the external stylesheet of the Koala site. Create new styles as necessary. Use short-hand properties to make coding easier.

Apply float left and right float properties to images in the Koala site. There should be two images per page. Adjust the margin to the images to add space between the text and the image.

Apply a padding value, background-color, border, and margin to the image element in the Koala site.

Create a class for the banner to remove these elements, then apply that class to the banner element on all three html pages.*/


body {
  background-color: #C7E6B3;
}

div {
  width: 600 px;
  border: 5px solid green;
  padding: 20px;
  margin: 10px;
}

img {
  border: 1px solid navy;
  padding: 20;px;
  margin: 10px:
}

img.banner {
  border: none;
  padding: none;
  margin: none;
}

figure {
  border: 1px solid black;
  background-color: white;
  padding: 0.5em;
  margin: 0.5em;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: none;
}

h1 {
  font-family: 'Fira Sans', sans-serif;
  color: #47371F;
  text-align: center;
  font-size: 42px;
  background-color: tan;
  border: 1px solid black;
  padding: 25px;
  margin: 15px;
}

h2 {
    font-family: 'Fira Sans', sans-serif;
    background-color: #B8D4E0;
    font-style: italic;
    color: #47371F;
    padding: 25px;
    margin: 15px;
    border: 1px solid black;
}

h3, h4 {
  color: #47371F;
}

p, ul, ol {
  font-family: Verdana, Verdana, Geneva, sans-serif;
}

.center {
  text-align: center;
}

p.white {
  color: navy;
  background: white;
}

ul li a {
  font-family: "Comic Sans MS", "Comic Sans MS", cursive;
  color: red;
}

ul li a:visited {
  font-family: "Comic Sans MS", "Comic Sans MS", cursive;
  color: yellow;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav li {
  float: left;
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: Verdana, Verdana, Geneva, sans-serif
}

nav li a:visited{
  color: grey;
  font-family: Verdana, Verdana, Geneva, sans-serif
}

/* Change the link color to #111 (black) on hover */
nav li a:hover {
  background-color: #111;
}