body {
  margin: 0;
  padding: 0;
}


.map-image {
  width: 100%;
}

.map-marker {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@keyframes rainbow-bg{
		100%,0%{
			background-color: rgb(255,0,0);
		}
		8%{
			background-color: rgb(255,127,0);
		}
		16%{
			background-color: rgb(255,255,0);
		}
		25%{
			background-color: rgb(127,255,0);
		}
		33%{
			background-color: rgb(0,255,0);
		}
		41%{
			background-color: rgb(0,255,127);
		}
		50%{
			background-color: rgb(0,255,255);
		}
		58%{
			background-color: rgb(0,127,255);
		}
		66%{
			background-color: rgb(0,0,255);
		}
		75%{
			background-color: rgb(127,0,255);
		}
		83%{
			background-color: rgb(255,0,255);
		}
		91%{
			background-color: rgb(255,0,127);
		}
}

.correct-marker {
  border-radius: 0%;
  background-color: white;
  animation: rainbow-bg 2s linear infinite;
}

.marker-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  pointer-events: none;
}

.map-image-marker-wrapper {
  position: relative;
}

#img {
  width: 100%;
  background-color: green;
  height:60px
}

#canvas {
  width: 100%;
}

#mainwrapper {
  display: flex;
  flex-direction: column;
}

.c {
  width: 100%;
}