@import url('bulma.min.css');

*{
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    
    font-family: 'Roboto', sans-serif;
}

html{
    background-color: #323232;
}

.label{
    color: #FFF;
}

.bg-rouge{ background-color: #F64740; color: #FFF; border: none; }
.bg-bleu{ background-color: #197BBD; color: #FFF; border: none; }
.bg-vert{ background-color: #9FDB6B; color: #FFF; border: none; }
.bg-jaune{ background-color: #FFC251; color: #FFF; border: none; }
.bg-violet{ background-color: #E56399; color: #FFF; border: none; }

.column{
    height: 100px;
}

.block-masque{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2.5px;
}

.block-masque.blanc{ background-color: #FFFFFF; }

.block-masque.rouge{ background-color: #F64740;}
.block-masque.rouge .title{ color: #70211E;}

.block-masque.bleu{ background-color: #197BBD; }
.block-masque.bleu .title{ color: #0C3856;}

.block-masque.vert{ background-color: #9FDB6B; }
.block-masque.vert .title{ color: #496431;}

.block-masque.jaune{ background-color: #FFC251; }
.block-masque.jaune .title{ color: #745925;}

.block-masque.violet{ background-color: #E56399; }
.block-masque.violet .title{ color: #692D46;}

.block-masque.hard{background-image: url(hard.png); background-size: 20%; background-repeat: no-repeat;}

.block-masque.oui{
    background-color: #646464;
}

.block-masque.oui:hover{
    opacity: .7;
}

.block-masque.oui .title{
    color: #FFFFFF;
}

.hide{
    margin-left: 50px;
}