#wheelOfFortune {
    margin: auto;
    width: 500px;
    height: 500px;
    padding: 1%;
    display: inline-flex;
    flex-direction: row;
    position: relative;
    overflow: hidden;
}
#wheel {
    display: block;
}
#spin, #masque {
    font-size: 1rem;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15%;
    height: 15%;
    margin: -7.5%;
    background: #000;
    color: #fff;
    box-shadow: 0 0 0 3px currentColor, 0 0px 15px 5px rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    transition: 0.2s;
}
#masque {
    background-color: #FFFFFF;
}
#spin::after {
    content: "";
    position: absolute;
    top: -10px;
    border: 10px solid transparent;
    border-bottom-color: currentColor;
    border-top: none;
}
.roue-overlay {
     opacity: 0.2;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-image: url('degrade-blanc.png');
     background-size: 100%;
     background-position: 50% 50%;
 }
.roue-contour {
    opacity: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('test3.png');
    background-size: 100%;
    background-position: 50% 50%;
}
/*.roue-flapper {
    opacity: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('flapper.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 243px 29px;
}*/
@media (max-width:400px) {
    #wheelOfFortune {
        width: 320px;
        height: 320px;
    }
}