BackgroundChange_custom

/*Downloaded from https://www.codeseek.co/2ajoyce/backgroundchange_custom-ONWPVx */
*, *:before, *:after {
  box-sizing: inherit;
}

html body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
}

.background {
  min-height: 100%;
  min-width: 100%;
  position: absolute;
}
.background #background_canvas {
  margin: 0px;
  padding: 0px;
}

.content {
  position: relative;
}
.content #content_navbar {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  padding: 15px 20px 15px 20px;
  background-image: linear-gradient(to right, #860c0c, #ce7777);
  box-shadow: 1px 1px 1px rgba(97, 0, 0, 0.5);
}
.content #content_navbar a {
  text-decoration: none;
  color: black;
  background-color: #a66088;
  padding: 10px;
  border-radius: 8px;
  -webkit-box-shadow: 1px 1px 1px #14002c;
  -moz-box-shadow: 1px 1px 1px #14002c;
  box-shadow: 1px 1px 1px #14002c;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.content #content_navbar a:active {
  -webkit-box-shadow: 0.5px 0.5px 0.5px #14002c;
  -moz-box-shadow: 0.5px 0.5px 0.5px #14002c;
  box-shadow: 0.5px 0.5px 0.5px #14002c;
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.content #content_navbar .setting {
  margin-left: auto;
}
.content #content_navbar .link {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.content #content_body .content_body_entry {
  background-color: #dbdbdb;
  margin: 20px;
  padding: 10px 20px 10px 20px;
}
.content #content_body .content_body_entry p {
  background-color: white;
  color: black;
  padding: 15px;
}

/*Downloaded from https://www.codeseek.co/2ajoyce/backgroundchange_custom-ONWPVx */
(function() {
    var color1 = "white";
    var color2 = "grey";

    function drawBackground() {
        var canvas_tile = document.createElement('canvas');
        var ctx_tile = canvas_tile.getContext('2d');
        // Define the aspects of the canvas
        ctx_tile.canvas.width = document.documentElement.clientWidth;
        ctx_tile.canvas.height = document.documentElement.clientHeight;
        ctx_tile.lineWidth = 15;
        //Draw the picture
        var grd = ctx_tile.createLinearGradient(0, 0, document.documentElement.clientHeight, document.documentElement.clientWidth);
        grd.addColorStop(0, color1);
        grd.addColorStop(1, color2);
        ctx_tile.fillStyle = grd;
        ctx_tile.fillRect(0, 0, document.documentElement.clientWidth,
                          document.documentElement.clientHeight);
        // save canvas image as data url (png format by default)
        var tile_URL = canvas_tile.toDataURL();
        var tile = new Image();
        tile.onload = function() {
            // I'm not sure if this is actually necessary in this case
        };
        tile.src = tile_URL;
        document.body.style.background = "url("+ tile.src + ") no-repeat center center fixed";
    }
    document.getElementById('background-random').addEventListener(
        "click", function() {
            color1 = randomColor();
            color2 = randomColor();
            drawBackground();
        });
    document.getElementById('background-reset').addEventListener(
        "click", function() {
            color1 = "white";
            color2 = "grey";
            drawBackground();
        });
    window.addEventListener(
        "resize", function() {
            drawBackground();
        });
    drawBackground();

}());