* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 8px;
  }

html {
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(0, 0, 0);
}

main{
    display: flex;
    justify-content: center;
    align-items: center;
}

#calc-grid{
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: minmax(120px, auto) repeat(5, 100px);
    grid-gap: 5px;
}

.bg {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 500% 500%;
    background-image: linear-gradient(90deg, rgb(12, 129, 32) 10%, rgb(11, 150, 39) 25%, rgb(15, 96, 20) 50%, #056715 100%);
    -webkit-animation: AnimateBG 10s ease infinite;
            animation: AnimateBG 10s ease infinite;
  }
  
  @-webkit-keyframes AnimateBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  @keyframes AnimateBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

#affichage{
    grid-column: 1 / 5;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 150%;
    background-color: rgb(0, 0, 0);
    color: white;
}

.span-two {
    grid-column: span 2;
}