.circle {
  width: 400px;
  height: 400px;
  position: relative;
  background-color: lightblue;
  border-radius: 50%;
}

.slice {
  position: absolute;
  width: 100%;
  height: 100%;
}

.letter-container {
  position: absolute;
  top: 0;
  left: 100%; /* Aanpassing voor positie aan het einde van taartpunt */
  transform-origin: top left;
  transform: rotate(-90deg); /* Aanpassing voor rotatie van letters */
}

.letter {
  font-size: 1.5em; /* Kies hier de gewenste lettergrootte */
}

.slice:nth-child(1) { transform: rotate(0deg); }
.slice:nth-child(2) { transform: rotate(40deg); }
.slice:nth-child(3) { transform: rotate(80deg); }
.slice:nth-child(4) { transform: rotate(120deg); }
.slice:nth-child(5) { transform: rotate(160deg); }
.slice:nth-child(6) { transform: rotate(200deg); }
.slice:nth-child(7) { transform: rotate(240deg); }
.slice:nth-child(8) { transform: rotate(280deg); }
.slice:nth-child(9) { transform: rotate(320deg); }



body{
	padding-top:60px;
}

/* fix padding under menu after resize */
@media screen and (max-width: 767px) {
	body { padding-top: 60px; }
}
@media screen and (min-width:768px) and (max-width: 991px) {
	body { padding-top: 110px; }
}
@media screen and (min-width: 992px) {
	body { padding-top: 60px; }
}

@-webkit-keyframes correct {
    0% {
        background-color: white;
    }
    25% {
        background-color: green;
    }
    75% {
        background-color: green;
    }
    100% {
        background-color: white;
    }
}
.correct {
    -webkit-animation-name: correct;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes wrong {
    0% {
        background-color: white;
    }
    25% {
        background-color: red;
    }
    75% {
        background-color: red;
    }
    100% {
        background-color: white;
    }
}
.wrong {
	-webkit-animation-name: wrong;
	-webkit-animation-duration: 500ms;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in-out;
}


.horsejump-grid {
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.horsejump-grid-cell {
	box-shadow: 0 0 0 1px black;
	overflow: hidden;
	position: relative;
	flex-basis: 33.333%;
}
.horsejump-grid-cell-content {
	width: 100%; height: 100%;
	top: 0; right: 0; bottom: 0; left: 0;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}
.horsejump-grid-cell:after {
	content: '';
	display: block;
	padding-bottom: 100%;
}


/* X Small */
.horsejump-grid {
	width: 55%;
	font-size: 3rem;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
	.horsejump-grid {
		width: 60%;
		font-size: 4rem;
	}
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
 	.horsejump-grid {
		width: 65%;
		font-size: 5rem;
	}
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
 	.horsejump-grid {
		width: 70%;
		font-size: 6rem;
	}
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
	.horsejump-grid {
		width: 75%;
		font-size: 7rem;
	}
}