@font-face {
    font-family: 'Graffiti';
    src: url(../font/Urzeit.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BlueScreen';
    src: url(../font/BlueScreen.ttf);
}
@keyframes H1ColorRotation {
    from, to {color: #0b215cdc;}
    12.5%      {color: #126d74dc;}
    25%      {color: #3b77bbd5;}
    37.5%      {color: #3be2ffe0;}
    50%      {color: #7faccae1;}
    62.5%      {color: #3b80ffe0;}
    75%      {color: #1c3c94d5;}
    87.5%      {color: #112442dc;}
}

@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

:root {
    background-image: url(../img/backgroundTest.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Graffiti';
}

.body {
    height: auto;
    width: auto;
    display: flex;
    flex-direction: column;
}

h1 {
    text-shadow: 2px 2px 0 #11265ed5, 2px -2px 0 #11265ed5, -2px 2px 0 #11265ed5, -2px -2px 0 #11265ed5, 2px 0px 0 #11265ed5, 0px 2px 0 #11265ed5, -2px 0px 0 #11265ed5, 0px -2px 0 #11265ed5, 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #3be2ffe0, 0 0 30px #3be2ffe0, 0 0 40px #3be2ffe0, 0 0 55px #3be2ffe0, 0 0 75px #3be2ffe0;
    text-align: center;
}
h2 {
    text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
    color: #000000;
}

.bandeauTitre {
    display: flex;
    flex-direction: row;
    width: 95vw;
}
.homeDiv {
    display: flex;
    align-items: top;
    width: 25%;
    margin-top: 2rem;
    margin-left: 2rem;
}
.homeLink {
    display: flex;
    height: fit-content;
}
.homeLink img {
    width: 5rem;
    height: 5rem;
    filter:
    drop-shadow(0px 1px 2px #1e688bb6)
    drop-shadow(0px -1px 2px #1e688bb6)
    drop-shadow(1px 0px 2px #1e688bb6)
    drop-shadow(-1px 0px 2px #1e688bb6);
}
.Titre {
    font-size: 3rem;
    animation: H1ColorRotation 20s infinite ease;
    text-shadow: 0 0 10px rgba(255,255,255,.5), 0 0 15px rgba(255,255,255,.5);
    font-family: 'BlueScreen';
    display: flex;
    height: fit-content;
    justify-content: center;
    width: 80vw;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.divCentrage {
    display: flex;
    width: 25%;
}

.Board {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    height: 80vh;
}

.Choix {
    display: flex;
    flex-direction: row;
    height: 20%;
    justify-content: space-evenly;
    align-items: center;
    padding: 0%;
    margin: 0%;
}

.Choix button {
    display: block;
    height: 4rem;
    width: 4rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    pointer-events: all;
}
.Rock {
    background-image: url(../img/RockW.png);
    background-size: cover;
}
.Paper {
    background-image: url(../img/PaperW.png);
    background-size: cover;
}
.Cisor {
    background-image: url(../img/CisorW.png);
    background-size: cover;
}


.Roll {
    background-image: url(../img/Dices.png);
    background-size: cover;
}

.PC {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 6rem;
    width: 98vw;
    background-size: cover;
    padding-bottom: 2rem;
}
.IARock, .IAPaper, .IACisor {
    display: none;
    height: 4rem;
    width: 4rem;
}

.Result {
    display: flex;
    flex-direction: column;
    height: 8rem;
    width: 98vw;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
    color: #2e9fd3a2;
    text-shadow: 1px 1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, -1px -1px 0 #000000, 1px 0px 0 #000000, 0px 1px 0 #000000, -1px 0px 0 #000000, 0px -1px 0 #000000;
}    
.Win, .Loose, .Draw, .Debug {
    animation: fadeIn linear 1s;
    -webkit-animation: fadeIn linear 1s;
    -moz-animation: fadeIn linear 1s;
    -o-animation: fadeIn linear 1s;
    display: none;
    font-size: 5rem;
}