.fraction-wrapper{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap:10px;
    justify-content: center;
}
.fraction-game{
    display:inline-flex;
    align-items:center;
    gap:2px;
    margin:5px;
    width: fit-content;
}
.fraction{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.fraction {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  font-size: 1.1em;
}

.fraction span:first-child {
  display: block;
  border-bottom: 2px solid #000;
  padding: 0 4px;
}

.fraction span:last-child {
  display: block;
  padding: 0 4px;
}

.fraction input{

    width: 25px;;
    height:25px;
    border:solid 0.5px hsl(var(--hb), 95%, 60%)!important;
    border-radius: 3px;
    background-color: white;
    font-size:14px;

    text-align:center;

    margin:2px;
}
.fraction-circle{
    width:120px;
    height:120px;
}

.fraction-game.ok{
    background:#d4f8d4;
}
.fraction-game.faux{
    background:#ffd6d6;
}
.bar{

    width:28px;
    height:2px;
    background:black;
    margin:2px 0;
}
.solution{
        display:none;
    margin-left:10px;
    font-size:14px;
    color:#c00;
    font-weight:bold;
}
.circle-zone{
    display:flex;
    gap:6px;
}
#example-fraction{
    
    overflow: auto;
}


.frac-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.step-info{
    display: flex;
    align-items: center;
    height: 50px;
    margin:auto;
}
.equal {
    display: flex;
    align-items: center;
    font-size: 30px;
    margin: auto;
    height: 130px;
}