/* Téléphone Portable */
@media only screen and (max-width: 1000px) {
  body {
	font-size: 3.3em !important;
  }
  
  button {
	width: 500px;
    height: 88px;
	font-size:42px !important;
  }
  
  .scaler {
	  width: 450px !important;
	  height: 475px !important;	  
  }
  
  #segments {
    width: 1300px !important;
    height: 1300px !important;
  }
}

/* Ordinateur */
body {
	width:100%;
	margin: 0 auto;
	display:block;
	text-align:center;
	max-width:100%;
	font-size: 27px;
}

p {
	font-family: system-ui;
}

h1 {
	font-family: cursive;
	text-align: center;
	font-size: 27px;
}

.question {
	/* font-size: 23px; */
}

.botrig {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 11px;
    width: 100%;
	font-size:11px;
}

.scaler {
  -webkit-transform: scale(0.33);
  -webkit-transform-origin: 0 0;
  margin-top: 33px;
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 222px;
  /* float: left; */
  height: 220px;
  /* margin: 8px 23px 33px 8px; */
}

#segments {
  border-radius: 50%;
  border: solid 23px black;
  height: 600px;
  width: 600px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
}

.segment {
  -webkit-transform-origin: 0 100%;
  background: rgb(227, 234, 249);
  box-shadow: 0 0 0 6px rgb(29, 39, 57) inset;
  height: 50%;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
}

.button {
  cursor: pointer;
  border: none;
  padding: 12px 24px;
  border-radius: 5px;
  font-size: 14px;
  letter-spacing: 1px;
  transition: 0.3s;
}

.primary-button {
  background-color: rgb(0, 102, 204);
  color: white;
}

.primary-button:hover {
  background-color: rgb(0, 102, 204, 0.85);
}



ul > :nth-child(1) {
  background-color: yellow;
}

ul > :nth-child(1):hover {
  background-color: #d5d500;
  cursor:pointer;
}

ul > :nth-child(2) {
  background-color: green;
}

ul > :nth-child(2):hover {
  background-color: darkgreen;
  cursor:pointer;
}

ul > :nth-child(3) {
  background-color: blue;
}

ul > :nth-child(3):hover {
  background-color: darkblue;
  cursor:pointer;
}

ul > :nth-child(4) {
  background-color: orange;
}

ul > :nth-child(4):hover {
  background-color: #e09100;
  cursor:pointer;
}

ul > :nth-child(5) {
  background-color: rebeccapurple;
}

ul > :nth-child(5):hover {
  background-color: #411b66;
  cursor:pointer;
}

ul > :nth-child(6) {
  background-color: hotpink;
}

ul > :nth-child(6):hover {
  background-color: #ef3391;
  cursor:pointer;
}

ul > :nth-child(7) {
  background-color: brown;
}

ul > :nth-child(7):hover {
  background-color: saddlebrown;
  cursor:pointer;
}

ul > :nth-child(8) {
  background-color: red;
}

ul > :nth-child(8):hover {
  background-color: darkred;
  cursor:pointer;
}