* {
margin: 0;
padding:0;
}

header#canvas {
width: 37.75vw;
height: 20vw;
margin: 3.5vw;
margin-left: 3.5vw;
background-color: white;
}


section {
width: 100%;
height: 200%;
float: left;
margin-top: 0%;
}



figure {
float: left;
}

/* forsta raden */



.crimson-1 {
background-color: lemonchiffon;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-1:hover {
background-color: magenta;
width: 1%;
height: 100%;
margin-right: 0%;
}

.limegreen-1 {
background-color: mediumaquamarine;
width: 1%;
height: 100%;
margin-right: 0.%
}

.limegreen-1:hover {
background-color: lightskyblue;
width: 1%;
height: 100%;
margin-right: 0.%
}

.dodgerblue-1 {
background-color: dodgerblue;
width: 1%;
height:100%;
margin-right: 0%;
}

.dodgerblue-1:hover {
background-color: gold;
width: 1%;
height:100%;
margin-right: 0%;
}

.darkorange-1 {
background-color: darkorange;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-1:hover {
background-color: greenyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-1 {
background-color: thistle;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-1:hover {
background-color: yellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.green-1 {
background-color: blanchedalmond;
width: 1%;
height: 100%;
margin-right: 0%;
}

.green-1:hover {
background-color: maroon;
width: 1%;
height: 100%;
margin-right: 0%;
}

.rebeccapurple-1 {
background-color: lightyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.rebeccapurple-1:hover {
background-color: coral;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-1 {
background-color: lightslategray;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-1:hover {
background-color: white;
width: 1%;
height: 100%;
margin-right: 0%;
}

.lightpink-1 {
background-color: lightpink;
width: 1%;
height: 100%;
margin-right: 0%;
}

.lightpink-1:hover {
background-color: blue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-2 {
background-color: darkorange;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-2:hover {
background-color: greenyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-2 {
background-color: thistle;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-2:hover {
background-color: yellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-2 {
background-color: wheat;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-2:hover {
background-color: magenta;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-2 {
background-color: steelblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-2:hover {
background-color: white;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-3 {
background-color: cornflowerblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-3:hover {
background-color: lightblue;
width: 1%;
height: 100%;
margin-right: 0%;
}



/* andra raden */




.crimson-1 {
background-color: lemonchiffon;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-1:hover {
background-color: magenta;
width: 1%;
height: 100%;
margin-right: 0%;
}

.limegreen-1 {
background-color: mediumaquamarine;
width: 1%;
height: 100%;
margin-right: 0.%
}

.limegreen-1:hover {
background-color: lightskyblue;
width: 1%;
height: 100%;
margin-right: 0.%
}

.dodgerblue-1 {
background-color: dodgerblue;
width: 1%;
height:100%;
margin-right: 0%;
}

.dodgerblue-1:hover {
background-color: gold;
width: 1%;
height:100%;
margin-right: 0%;
}

.darkorange-1 {
background-color: darkorange;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-1:hover {
background-color: greenyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-1 {
background-color: thistle;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-1:hover {
background-color: yellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.green-1 {
background-color: blanchedalmond;
width: 1%;
height: 100%;
margin-right: 0%;
}

.green-1:hover {
background-color: maroon;
width: 1%;
height: 100%;
margin-right: 0%;
}

.rebeccapurple-1 {
background-color: lightyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.rebeccapurple-1:hover {
background-color: coral;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-1 {
background-color: lightslategray;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-1:hover {
background-color: white;
width: 1%;
height: 100%;
margin-right: 0%;
}

.lightpink-1 {
background-color: lightpink;
width: 1%;
height: 100%;
margin-right: 0%;
}

.lightpink-1:hover {
background-color: blue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-2 {
background-color: darkorange;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-2:hover {
background-color: greenyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-2 {
background-color: thistle;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-2:hover {
background-color: yellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-2 {
background-color: wheat;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-2:hover {
background-color: magenta;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-2 {
background-color: steelblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-2:hover {
background-color: white;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-3 {
background-color: cornflowerblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-3:hover {
background-color: lightblue;
width: 1%;
height: 100%;
margin-right: 0%;
}




/* tredje raden */




.crimson-1 {
background-color: lemonchiffon;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-1:hover {
background-color: magenta;
width: 1%;
height: 200%;
margin-right: 0%;
}

.limegreen-1 {
background-color: mediumaquamarine;
width: 1%;
height: 100%;
margin-right: 0.%
}

.limegreen-1:hover {
background-color: lightskyblue;
width: 1%;
height: 100%;
margin-right: 0.%
}

.dodgerblue-1 {
background-color: dodgerblue;
width: 1%;
height:100%;
margin-right: 0%;
}

.dodgerblue-1:hover {
background-color: gold;
width: 1%;
height:100%;
margin-right: 0%;
}

.darkorange-1 {
background-color: darkorange;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-1:hover {
background-color: greenyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-1 {
background-color: thistle;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-1:hover {
background-color: yellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.green-1 {
background-color: blanchedalmond;
width: 1%;
height: 100%;
margin-right: 0%;
}

.green-1:hover {
background-color: maroon;
width: 1%;
height: 100%;
margin-right: 0%;
}

.rebeccapurple-1 {
background-color: lightyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.rebeccapurple-1:hover {
background-color: coral;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-1 {
background-color: lightslategray;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-1:hover {
background-color: white;
width: 1%;
height: 100%;
margin-right: 0%;
}

.lightpink-1 {
background-color: lightpink;
width: 1%;
height: 100%;
margin-right: 0%;
}

.lightpink-1:hover {
background-color: blue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-2 {
background-color: darkorange;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-2:hover {
background-color: greenyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-2 {
background-color: thistle;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-2:hover {
background-color: yellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-2 {
background-color: wheat;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-2:hover {
background-color: magenta;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-2 {
background-color: steelblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-2:hover {
background-color: white;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-3 {
background-color: cornflowerblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-3:hover {
background-color: lightblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

/* fjarde raden */




.crimson-1 {
background-color: lemonchiffon;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-1:hover {
background-color: magenta;
width: 1%;
height: 200%;
margin-right: 0%;
}

.limegreen-1 {
background-color: mediumaquamarine;
width: 1%;
height: 100%;
margin-right: 0.%
}

.limegreen-1:hover {
background-color: lightskyblue;
width: 1%;
height: 100%;
margin-right: 0.%
}

.dodgerblue-1 {
background-color: dodgerblue;
width: 1%;
height:100%;
margin-right: 0%;
}

.dodgerblue-1:hover {
background-color: gold;
width: 1%;
height:100%;
margin-right: 0%;
}

.darkorange-1 {
background-color: darkorange;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-1:hover {
background-color: greenyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-1 {
background-color: thistle;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-1:hover {
background-color: yellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.green-1 {
background-color: blanchedalmond;
width: 1%;
height: 100%;
margin-right: 0%;
}

.green-1:hover {
background-color: maroon;
width: 1%;
height: 100%;
margin-right: 0%;
}

.rebeccapurple-1 {
background-color: lightyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.rebeccapurple-1:hover {
background-color: coral;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-1 {
background-color: lightslategray;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-1:hover {
background-color: white;
width: 1%;
height: 100%;
margin-right: 0%;
}

.lightpink-1 {
background-color: lightpink;
width: 1%;
height: 100%;
margin-right: 0%;
}

.lightpink-1:hover {
background-color: blue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-2 {
background-color: darkorange;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-2:hover {
background-color: greenyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-2 {
background-color: thistle;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-2:hover {
background-color: yellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-2 {
background-color: wheat;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-2:hover {
background-color: magenta;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-2 {
background-color: steelblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-2:hover {
background-color: white;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-3 {
background-color: cornflowerblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-3:hover {
background-color: lightblue;
width: 1%;
height: 100%;
margin-right: 0%;
}


/* femte raden */




.crimson-1 {
background-color: lemonchiffon;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-1:hover {
background-color: magenta;
width: 1%;
height: 200%;
margin-right: 0%;
}

.limegreen-1 {
background-color: mediumaquamarine;
width: 1%;
height: 100%;
margin-right: 0.%
}

.limegreen-1:hover {
background-color: lightskyblue;
width: 1%;
height: 100%;
margin-right: 0.%
}

.dodgerblue-1 {
background-color: dodgerblue;
width: 1%;
height:100%;
margin-right: 0%;
}

.dodgerblue-1:hover {
background-color: gold;
width: 1%;
height:100%;
margin-right: 0%;
}

.darkorange-1 {
background-color: darkorange;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-1:hover {
background-color: greenyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-1 {
background-color: thistle;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-1:hover {
background-color: yellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.green-1 {
background-color: blanchedalmond;
width: 1%;
height: 100%;
margin-right: 0%;
}

.green-1:hover {
background-color: maroon;
width: 1%;
height: 100%;
margin-right: 0%;
}

.rebeccapurple-1 {
background-color: lightyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.rebeccapurple-1:hover {
background-color: coral;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-1 {
background-color: lightslategray;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-1:hover {
background-color: white;
width: 1%;
height: 100%;
margin-right: 0%;
}

.lightpink-1 {
background-color: lightpink;
width: 1%;
height: 100%;
margin-right: 0%;
}

.lightpink-1:hover {
background-color: blue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-2 {
background-color: darkorange;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-2:hover {
background-color: greenyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-2 {
background-color: thistle;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-2:hover {
background-color: yellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-2 {
background-color: wheat;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-2:hover {
background-color: magenta;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-2 {
background-color: steelblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-2:hover {
background-color: white;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-3 {
background-color: cornflowerblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-3:hover {
background-color: lightblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

/* sjette raden */




.crimson-1 {
background-color: lemonchiffon;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-1:hover {
background-color: magenta;
width: 1%;
height: 200%;
margin-right: 0%;
}

.limegreen-1 {
background-color: mediumaquamarine;
width: 1%;
height: 100%;
margin-right: 0.%
}

.limegreen-1:hover {
background-color: lightskyblue;
width: 1%;
height: 100%;
margin-right: 0.%
}

.dodgerblue-1 {
background-color: dodgerblue;
width: 1%;
height:100%;
margin-right: 0%;
}

.dodgerblue-1:hover {
background-color: gold;
width: 1%;
height:100%;
margin-right: 0%;
}

.darkorange-1 {
background-color: darkorange;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-1:hover {
background-color: greenyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-1 {
background-color: thistle;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-1:hover {
background-color: yellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.green-1 {
background-color: blanchedalmond;
width: 1%;
height: 100%;
margin-right: 0%;
}

.green-1:hover {
background-color: maroon;
width: 1%;
height: 100%;
margin-right: 0%;
}

.rebeccapurple-1 {
background-color: lightyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.rebeccapurple-1:hover {
background-color: coral;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-1 {
background-color: lightslategray;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-1:hover {
background-color: white;
width: 1%;
height: 100%;
margin-right: 0%;
}

.lightpink-1 {
background-color: lightpink;
width: 1%;
height: 100%;
margin-right: 0%;
}

.lightpink-1:hover {
background-color: blue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-2 {
background-color: darkorange;
width: 1%;
height: 100%;
margin-right: 0%;
}

.darkorange-2:hover {
background-color: greenyellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-2 {
background-color: thistle;
width: 1%;
height: 100%;
margin-right: 0%;
}

.thistle-2:hover {
background-color: yellow;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-2 {
background-color: wheat;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-2:hover {
background-color: magenta;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-2 {
background-color: steelblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.black-2:hover {
background-color: white;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-3 {
background-color: cornflowerblue;
width: 1%;
height: 100%;
margin-right: 0%;
}

.crimson-3:hover {
background-color: lightblue;
width: 1%;
height: 100%;
margin-right: 0%;
}