* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box; }

*:after, *:before {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box; }

[role="button"] {
  cursor: pointer; }

body {
  /* couleur inutile */
  background: #53687e;
  background: -webkit-linear-gradient(330deg, #53687e, #2e2e2e) fixed;
  background: -moz-linear-gradient(330deg, #53687e, #2e2e2e) fixed;
  background: -o-linear-gradient(330deg, #53687e, #2e2e2e) fixed;
  background: linear-gradient(120deg, #53687e, #2e2e2e) fixed;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; }

.calculator {
  margin: 0 auto;
  text-align: center;
  padding-top: 100px; }

.calculator .container {
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1.5;
  padding-bottom: 50px;
  position: relative; }

.calculator .container .key-group {
  /* fond calculatrice */
  background-color: rgb(0, 0, 0);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
     -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
          box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  padding: 8px; }

.calculator .container .key-group .keypad {
  background-color: #33373f;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  /* couleur texte display*/
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-size: 2rem;
  border: none;
  margin: 0;
  padding: 8px; }

.calculator .container .key-group .keypad.display {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  cursor: default;
  background-color: transparent;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 2.5rem;
  grid-column: 1 / span 3;
  height: 3.5rem;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
     -moz-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  text-align: center; }

.calculator .container .key-group .keypad.clear {
  /* fond bouton effacer */
  background-color: #1e242c;
  /* couleur bouton effacer */
  color: #ff5151; }

  .calculator .container .key-group .keypad.display.chrono {
    /* fond bouton effacer */
    background-color: #1e242c;
    font-size: 1.5rem;
    /* couleur bouton effacer */
    color: #ff5151; }

.calculator .container .key-group .keypad.valider {
  /* fond bouton valider */
  background-color: #1e242c;
  /* couleur bouton valider */
  color: #51aaff; }
  
.calculator .container .key-group .keypad.clear {
grid-column: 2 / span 2; }  

.calculator .container .key-group .keypad.valider {
grid-column: 1 / span 3; }

.rainbow {
  animation-name: rainbow;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes rainbow {
    0% { color: #fc0303 }
    17% { color: #45f52a }
    34% { color: #2a7bf5 }
    51% { color: #2af5e4 }
    68% { color: #c92af5 }
    85% { color: #f5dd2a }
    100% { color: #66655d }
}