:root {
    /*--tableBlinkColor: darkslategrey;*/
}

body {
    background-color: black;
    margin: 0px;
    padding: 0px;
}

#titrePrincipal {
    margin: auto;
    color: white;
    font-family: Georgia; /* Castellar, Century, Garamond, Georgia, Goudy Old Style, Monotype Corsiva, Vivaldi */
    text-align: center;
}

#titrePrincipal, nav, #descriptionsLiens { display: none; }

h1 {
    font-size: 3.4em;
    margin: 12px;
}

#titrePrincipalCircular {
    border-radius: 50%;
    background: -webkit-linear-gradient(to right, #FFF2CC, #C99402 28%, #BD8B00, #C99402 72%, #FFF2CC);
    background: -moz-linear-gradient(to right, #FFF2CC, #C99402 28%, #BD8B00, #C99402 72%, #FFF2CC);
    background: linear-gradient(to right, #FFF2CC, #C99402 28%, #BD8B00, #C99402 72%, #FFF2CC);
    
    position: absolute;
    z-index: 1;
    animation: variationContourTable 3s forwards linear;
    animation-play-state: paused;
    transition: background-color 2s;
}
#titrePrincipalCircular, #sousTitre {display: none; }

#affichageDescription {
    box-sizing: border-box;
    padding: 8px;
    text-align: justify;
    line-height: 22px;
    position: absolute;
    z-index: 2;
    background-color: #FAF2D9;
    box-shadow: 0px 0px 2px #666;
    border-radius: 6px;
    display: none;
}

canvas {
    margin: 0px;
    box-sizing: border-box;
    position: absolute;
}

#table, .assiette, .canvasAnimation, .canvasText { border-radius: 50%; }
#table, .assiette, .canvasText { display: none; }

#table {
    z-index: 1;
    animation: 2s forwards ease-out;
    animation-play-state: paused;
}

.assiette { z-index: 2; }
.assiette:hover {}

.canvasAnimation { z-index: 2; }
.canvasAnimation:hover { cursor: pointer; }

.canvasText {
    z-index: 2;
    transform-origin: center;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.imgAssiette {
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    display: none;
}

@keyframes rotationAssiette360 {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}

@keyframes rotationAssiette45 {

    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(45deg);
    }
}

@keyframes rotationAssiette30 {

    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(30deg);
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@keyframes zoomOut {
    from {
        transform: scale(3);
    }

    to {
        transform: scale(1);
    }
}

@keyframes rotationTable {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}

@keyframes variationContourTable {
    to {
        background-color: var(--tableBlinkColor,darkgreen);
    }
}

@keyframes defaultContourTable {
    /*from {
        background-color: var(--tableBlinkColor,darkgreen);
    }*/
    to {
        background-color: var(--tableDefaultColor, navy);
    }
}