@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
      body{
        font-family: 'Montserrat', sans-serif;
        color : white;
        text-align: center;
        font-size: 30px;
        background-color: coral;
        scroll-behavior: smooth;
      }
      .choix .ball{
        display: inline-block;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: rgb(0, 255, 234);
        color: black;
        font-size: 21px;
        text-align: center;
        line-height: 50px;
        margin: 15px;
        box-shadow: inset 2px 2px 1em black;
      }

      .ball {
        display: inline-block;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: white;
        color: black;
        font-size: 21px;
        text-align: center;
        line-height: 50px;
        margin: 15px;
        box-shadow: inset 2px 2px 1em black;
        opacity: 0;
        transform: scale(0.5);
        animation: appear 0.5s forwards;
        animation-delay: 0.1s;
      }

      @keyframes appear {
        0% {
          opacity: 0;
          transform: scale(0.5);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }

      .ball.red {
        background-color: red;
        color: white;
      }

      .ball.green {
        background-color: green;
        color: white;
      }

      .ball.blue {
        background-color: blue;
        color: white;
      }
      h1{
          text-align: center;
          font-weight: 900;
      }

      button {
        font-size: 16px;
        padding: 1em 3.3em;
        transform: perspective(200px) rotateX(1deg);
        font-family: 'Bebas Neue', cursive;
        color: white;
        font-weight: 900;
        border: none;
        border-radius: 5px;
        background: linear-gradient(0deg, rgb(75, 207, 97) 0%, rgb(85, 252, 70) 100%);
        box-shadow: rgba(148, 251, 63, 0.2) 0px 40px 29px 0px;
        will-change: transform;
        transition: all 0.3s;
        border-bottom: 2px solid rgb(112, 252, 70);
        margin-top: 60px;
        margin-bottom: 60px;
      }
      
      button:hover {
        transform: perspective(180px) rotateX(30deg) translateY(2px);
      }
      
      button:active {
        transform: perspective(170px) rotateX(36deg) translateY(5px);
        background: linear-gradient(0deg, rgb(251, 101, 63) 0%, rgb(252, 91, 70) 100%);
        border-bottom: 2px solid rgb(252, 70, 70);
        box-shadow: rgba(251, 91, 63, 0.2) 0px 40px 29px 0px;
      }
      .valid {
        font-size: 16px;
        padding: 1em 3.3em;
        transform: perspective(200px) rotateX(1deg);
        font-family: 'Bebas Neue', cursive;
        color: white;
        font-weight: 900;
        border: none;
        border-radius: 5px;
        background: linear-gradient(0deg, rgba(63,94,251,1) 0%, rgba(70,135,252,1) 100%);
        box-shadow: rgba(63,94,251,0.2) 0px 40px 29px 0px;
        will-change: transform;
        transition: all 0.3s;
        border-bottom: 2px solid rgba(70,135,252,1);
        margin-top: 60px;
        margin-bottom: 60px;
      }
      
      .valid:hover {
        transform: perspective(180px) rotateX(30deg) translateY(2px);
      }
      
      .valid:active {
        transform: perspective(170px) rotateX(36deg) translateY(5px);
        background: linear-gradient(0deg, rgb(251, 101, 63) 0%, rgb(252, 91, 70) 100%);
        border-bottom: 2px solid rgb(252, 70, 70);
        box-shadow: rgba(251, 91, 63, 0.2) 0px 40px 29px 0px;
      }
      .défaite{
        font-family: 'Bebas Neue', cursive;
      }
      input[type='checkbox']:checked {
        background-color: red;
      }