html,
body {
    padding: 0;
    margin: 0;
    background-image: url("../img/GreenBackgroudn.gif");
    background-color: #00B841;
    background-attachment: local;
    background-repeat: repeat-x;
    position: inherit;
/*Comment: rgb(0, 186, 255) is a nice colour*/
/*Comment: Spacing and background image*/
}

canvas {
    display: contents;
/*Comment: States that it is a block element rather than an inline element*/
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
/*Comment: Centralizes the canvas*/
    border: 1px solid #212121;
/*Comment: Shows the canvas border*/
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    z-index: -100;
/*Comment: Default browser settings^^^*/
}

#menu-canvas {
    z-index: 0;
    margin-left: 0px;
}

#bg-canvas {
    z-index: 5;
}
/*Comment: Has a value of 0, meaning it is on the axis*/

#fg-canvas {
    z-index: 6;
}
/*Comment: Has a value of 1, meaning it is in front of the background canvas*/

#lvl2-canvas {
    display: none;
    z-index: 3;
}

#lvl2fg-canvas {
    display: none;
    z-index: 4;
}

#lvl3-canvas {
    display: none;
    z-index: 1;
}

#lvl3fg-canvas {
    display: none;
    z-index;
}

#tExT-canvas {
    z-index: 10;
}

#character-canvas {
    z-index: 15;
}

#winScreen-canvas {
    z-index: 100;
    display: none;
}

.PlayButton {
    display: inline-block;
    border-radius: 4px;
    background-color: transparent;
    border: 2px solid #555555;
    color: #000000;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin-left: 150px;
    z-index: 100;
}

.PlayButton {
    display: inline-block;
    border-radius: 4px;
    background-color: transparent;
    border: 2px solid #555555;
    color: #000000;
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    padding: 10px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin-left: 400px;
/*Comment: Change location for the play button here. Left alters x position while top alters the y position relative to their respective labels; left, top.*/
    margin-top: 275px;
    position: absolute;
    z-index: 100;
}

.PlayButton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
    z-index: 100;
}

.PlayButton span:after {
  content: '\00bb';
  position: absolute;
  top: 0;
  right: -20px;
  transition: 0.5s;
    z-index: 100;
}

.PlayButton:hover span {
  padding-right: 25px;
    z-index: 100;
}

.PlayButton:hover span:after {
  right: 0;
    z-index: 100;
}

.CreditsButton {
    display: inline-block;
    border-radius: 4px;
    background-color: transparent;
    border: 2px solid #555555;
    color: #000000;
    text-align: center;
    font-size: 28px;
    padding: 20px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin-left: 150px;
    z-index: 100;
}

.CreditsButton {
    display: inline-block;
    border-radius: 4px;
    background-color: transparent;
    border: 2px solid #555555;
    color: #000000;
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    padding: 10px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin-left: 400px;
/*Comment: Change location for the play button here. Left alters x position while top alters the y position relative to their respective labels; left, top.*/
    margin-top: 355px;
    position: absolute;
    z-index: 100;
}

.CreditsButton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
    z-index: 100;
}

.CreditsButton span:after {
  content: '\00bb';
  position: absolute;
  top: 0;
  right: -20px;
  transition: 0.5s;
    z-index: 100;
}

.CreditsButton:hover span {
  padding-right: 25px;
    z-index: 100;
}

.CreditsButton:hover span:after {
  right: 0;
    z-index: 100;
}

@font-face {
    font-family: "PixelEmulator";
    src: url("../font/Pixel-Calculon.otf");
/*Comment: Font source^^^*/
}