.square, .circle {
    width: 100px;
    height: 100px;
    display: block;
}

.circle {
    border-radius: 50%;
}

#blockRed {
    background-color: red;
    position: relative;
    top: 20px;
    left: 20px;
}

#blockYellow {
    background-color: yellow;
}

#container {
    width: 400px;
    background-color: blue;
    margin: 0 auto;
}

#blockWood {
    background-image: url('wood.jpeg');
}

#artwork {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  position: relative;
  background-color: white;
}

.art {
  position: absolute;
}

.art.red {
  width: 200px;
  height: 300px;
  background-color: red;
  left: 0;
  top: 0;
}

.art.yellow {
  width: 200px;
  height: 300px;
  background-color: yellow;
  right: 0;
  top: 0;
}
#navigation {

font-family: Georgia, serif; font-size:
 
100%;

border-top: solid 2px #4E0102;

border-bottom: solid 2px #4E0102;

}
li {

display: inline;

list-style-type: none;

}
a:link, a:visited, a:active {
  color: #17037A;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #17037A;
  text-decoration: underline;
  font-weight: bold;
}

.current {
  text-decoration: underline;
  font-weight: bold;
}