/* <!--- Anna Wendela Bonnevier logo (my logo)

      /\ |  |  ||´´\
     /__\|  |  ||--<
    /    \\/ \/ |,,/

    ---> */

@charset "UTF-8";



	* {
		margin: 0;
		padding: 0;
		color: #000;
	}


	main#canvas {
		width: 54vw;
		height: 39vw;
		margin: 15vh auto 5vh auto;
	}


	figcaption {
		font-size: 12pt;
		text-align: right;
		font-family: "Helvetica", serif;
	}


  section {
    width: 100%;
    float: left;
  }

    article {
      width: 100%;
      float: left;
    }

      figure {
        width: 100%;
        height: 100%;
        float: left;
      }

section#background {
    width: 100%;
    height: 100%;
    
    float: left;
}

.row1 {
  height: 16%;
}

.row2 {
  height: 10%;
}

.row3 {
  height: 9%;
}

.row4 {
  height: 10%;
}

.row5 {
  height: 45%;
}

.row6 {
  height: 10%;
}



.yellow {
  background-color: gold;
}

.red1 {
  background-color: red;
  width: 2%;
  margin-right: 1%;
}

.green1 {
  background-color: green;
  width: 4%;
  margin-right: 1%;
}

.blue1 {
  background-color: navy;
  width: 1%;
  margin-right: 2%;
}

.orange1 {
  background-color: darkorange;
  width: 4%;
  margin-right: 2%;
}

.grey {
  background-color: lightgrey;
  width: 9%;
  margin-right: 2%;
}

.darkgreen {
  background-color: darkgreen;
  width: 1%;
  margin-right: 2.5%;
  margin-left: -1%;
}

.purple {
  background-color: purple;
  width: 1%;
  margin-right: 1%;
}

.black1 {
  background-color: black;
  width: 2%;
  margin-right: 2.5%;
}

.pink1 {
  background-color: lightpink;
  width: 2%;
  margin-right: 6%;
}

.red2 {
  background-color: red;
  width: 2%;
  margin-right: 6%;
}

.black2 {
  background-color: black;
  width: 8%;
  margin-right: 6%;
}

.red3 {
  background-color: red;
  width: 16%;
  margin-right: 0%;
}

.pink2 {
  background-color: lightpink;
  width: 7%;
  margin-right: 4%;
}

.black3 {
  background-color: black;
  width: 15%;
  margin-right: 4.5%;
}

.red4 {
  background-color: red;
  width: 4%;
  margin-right: 10.5%;
}

.orange3 {
  background-color: darkorange;
  width: 15%;
  margin-right: 10%;
}

.blue2 {
  background-color: navy;
  width: 30%;
  margin-right: 0%;
}

.green2 {
  background-color: green;
  width: 26%;
  margin-right: 19%;
}

.black4 {
  background-color: black;
  width: 55%;
  margin-right: 0%;
}


.yellow:hover {
  background-color: red;
}

.red1:hover {
  background-color: green;
}

.green1:hover {
  background-color: navy;
}

.blue1:hover {
  background-color: darkorange;
}

.orange1:hover {
  background-color: lightgrey;
}

.grey:hover {
  background-color: darkgreen;
}

.darkgreen:hover {
  background-color: purple;
}

.purple:hover {
  background-color: black;
}

.black1:hover {
  background-color: lightpink;
}

.pink1:hover {
  background-color: darkorange;
}

.red2:hover {
  background-color: black;
}

.black2:hover {
  background-color: red;
}

.red3:hover {
  background-color: lightpink;
}

.pink2:hover {
  background-color: black;
}

.black3:hover {
  background-color: red;
}

.red4:hover {
  background-color: darkorange;
}

.orange3:hover {
  background-color: navy;
}

.blue2:hover {
  background-color: green;
}

.green2:hover {
  background-color: black;
}

.black4:hover {
  background-color: gold;
}