/******    Utilisation de la font-family LATO    *****/
body {
    font-family: 'Lato', sans-serif;
}

/******    Création du Background en 2 couleurs  *****/
.bg-custom {
    background: linear-gradient(90deg, hsla(0, 4%, 80%, 0.3) 50%,
            hsla(0, 0%, 100%, 1) 50%,
            hsla(0, 0%, 97%, 1) 50%,
            hsla(0, 0%, 100%, 1) 50%,
            hsla(0, 9%, 98%, 1) 50%);
    background-position: center;
}

/***  Customisation du bloc affichant le score en cours ***/
.blockCurrent-custom {
    width: 120px;
    height: 80px;
    margin: 80px auto;
    padding-top: 5px;
}

.iconRedDot {
    background: red;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    padding: auto;
}

/*** DÉBUT : CSS du bloc DÉ ***/
.diceContainer {
    display: grid;
    background-color: rgb(250, 250, 250);
    width: 70px;
    height: 70px;
    grid-template-rows: repeat(3, 20px);
    grid-template-columns: repeat(3, max-content);
    box-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;
    margin: 0 auto;
    align-content: center;
    justify-content: center;
    align-items: center;

}

.dots {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin: 0 6px;
}

.dots__red {
    background: red;
}

.dots__blank {
    visibility: hidden;
}

/*********  FIN : CSS du bloc DÉ   ********/

/*********  Custom du CSS des boutons  ********/
.btnCustom {
    border-style: none;
    background-color: rgb(255, 255, 255, 0);
    font-family: 'lato', sans-serif;
}

.btnCustom:hover {
    box-shadow: rgba(100, 100, 111, 0.5) 0px 7px 29px 0px;
}

@media only screen and (orientation: landscape) and (max-height: 428px) {
    .hero-body {
        padding: 0;
        display: none;
    }

    .hero-head,
    .hero-foot {
        display: none;
    }
}