a:link, a:visited {
    border-radius: 50%;
    display: inline-block;
    background-color: #F2F8F1;
    color: limegreen;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

dialog {
    opacity: 90%;
}

dialog::backdrop {
    background: #F2F8F1;
    opacity: 50%;
}

html, body, #LiveBPMN {
    font-family: Optima;
    font-size: 100%;
    overflow: hidden;
    width: 100%;
}

div.grid {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    /*grid-template-rows: calc(10vh) auto calc(5vh);*/
    /* 'fr' means "fraction", say "1/3" here: */
    grid-template-rows: 7.5vh 85vh 7.5vh;
    /*grid-template-rows: repeat(3, 1fr);*/
    height: 98vh;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-bottom: 0vh;
    margin-top: 0vh;
    padding: 0px;
}

p {
    text-align: center;
}

.Menu {
    align-items: center;
    cursor: default;
    display: flex;
    font-size: 3vmin;
    justify-content: center;
    text-align: center;
    /* 'blur' est le 3e param. : */
    /*text-shadow: 1px 0px 0px limegreen;*/
}
#Copyright {
    grid-column: 20;
    grid-row: 3;
}
#Copyright_ {
    font-size: 2vh;
}
#Information {
    grid-column: 19;
    grid-row: 3;
}
#Information_ {
    font-size: 5vmin;
}
#Camera {
    grid-column: 2;
    grid-row: 3;
}
#Reload {
    grid-column: 1;
    grid-row: 3;
}

.BlaBlaBla {
    font-size: 3vmin;
    padding: 5%;
    text-align: center;
    /* 'blur' est le 3e param. : */
    text-shadow: 0.5px 0px 0px limegreen;
}

.TC {
    align-items: center;
    border: 1px solid limegreen;
    border-radius: 50%;
    cursor: default;
    display: flex;
    font-size: 1.5vmin;
    justify-content: center;
    text-align: center;
}

#TC0 {
    /*font-size: 3vmin;*/
    grid-column: 1;
    grid-row: 1;
}

#TC1 {
    grid-column: 2;
    grid-row: 1;
}

#TC2 {
    grid-column: 3;
    grid-row: 1;
}

#TC3 {
    grid-column: 4;
    grid-row: 1;
}

#TC4 {
    grid-column: 5;
    grid-row: 1;
}

#TC5 {
    grid-column: 6;
    grid-row: 1;
}

#TC6 {
    grid-column: 7;
    grid-row: 1;
}

#TC7 {
    grid-column: 8;
    grid-row: 1;
}

#TC8 {
    grid-column: 9;
    grid-row: 1;
}

#TC9 {
    grid-column: 10;
    grid-row: 1;
}

#TC10 {
    grid-column: 11;
    grid-row: 1;
}

#TC11 {
    grid-column: 12;
    grid-row: 1;
}

#TC12 {
    grid-column: 13;
    grid-row: 1;
}

#TC13 {
    grid-column: 14;
    grid-row: 1;
}

#TC14 {
    border: 3px solid darkgreen;
    grid-column: 15;
    grid-row: 1;
}

#TC14_ {
    animation: X 5s ease-out infinite;
    font-weight: bold;
    text-shadow: 1px 0px 0px limegreen;
}

#TC15 {
    border: none;
    grid-column: 16;
    grid-row: 1;
}

#TC16 {
    grid-column: 17;
    grid-row: 1;
}

#TC17 {
    grid-column: 18;
    grid-row: 1;
}

#TC18 {
    grid-column: 19;
    grid-row: 1;
}

#TC19 {
    grid-column: 20;
    grid-row: 1;
}

.Screen {
    /*border: 5px solid red;*/
    grid-column: 1 / span 20;
    grid-row: 2;
    visibility: hidden;
}

@keyframes X {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes Y {
    from {
        transform: scale(100%);
    }
    to {
        transform: scale(125%);
    }
}

.Beat_effect:hover {
    animation: Y 1s ease-out infinite;
}

.Menu_right:hover {
    animation: X 1s ease-out infinite;
}
