@font-face {
    font-family: 'Overpass';
    src: url(../font/Overpass-VariableFont_wght.ttf);
}
*{
    padding: 0;
    margin: 0;
    touch-action: none;
}
ul, li {
    list-style: none;
}
img {
    width: 100%;
}
:root{
    --blanc : hsl(0, 0%, 100%);
    --gris-clair : hsl(217, 12%, 63%);
    --gris-neutre : rgb(124, 135, 152);
    --bleu-fonce : hsl(213, 20%, 18%);
    --bleu-tres-fonce : hsl(216, 12%, 8%);
    --orange : hsl(25, 97%, 53%);
}
body{
    font-family: 'Overpass', sans-serif;
}
li{
  padding: 1.5rem;
  border-radius: 50%;
  position: relative;
}

li a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#box {
    width: 100%;
    max-width: 366px;
}
.inactive {
    color: var(--gris-neutre);
    background-color: var(--bleu-fonce);
}
.hover {
    background-color: var(--gris-neutre);
    color : var(--blanc);
    transition : .3s;
}
.active {
    color: var(--blanc);
    background-color: var(--orange);
    transition: 0;
}

@media screen and (max-width: 500px) {
    #box {
        width:300px ;
    }
}