body {
  margin: 0;
  font: normal normal normal 1.7rem/1.7 -apple-system,BlinkMacSystemFont,Nunito Sans,Helvetica,Arial,sans-serif;
}

#container {
  position: fixed;
  width: 100%;
  height: 100%;
  color: #222222;
  font-size: 4rem;
  background-color: #f7df1e;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

document.addEventListener("DOMContentLoaded", () => {
  const containerElm = document.querySelector("#container");
  
  const getRandomIntInclusive = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  
  const getRandomRGB = () => {
    const r = getRandomIntInclusive(0, 255);
    const g = getRandomIntInclusive(0, 255);
    const b = getRandomIntInclusive(0, 255);
    return `rgb(${r}, ${g}, ${b})`;
  };
  
  const handleOnClick = () => {
    containerElm.style.backgroundColor = getRandomRGB();
  }
  
  containerElm.addEventListener("click", handleOnClick);
});