/*-----------------------------------------*/
/* Canvas section of the index.ejs styling */
/*-----------------------------------------*/

/** Outer content container - contains all the different content sections */
#content {
  height: 100%;
  margin-left: 10rem;
  display: inline-block;
  position: relative;
  z-index: 1;
}

/** Outer canvas container - contains the canvas */
.canvas-section {
  width: calc(100% - 10rem);
  height: 100%;
  position: absolute;
  display: inline-block;
}

/** Centers the div inside the canvas container holding the canvas */
.center-canvas {
  width: 75%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.ratio-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}

.ascpect-ratio {
  padding-bottom: 56.25%;
}

/** Styles the inside the canvas container holding the canvas */
.canvas-container-outer {
  width: 75%;
  background-color: rgba(255,255,255);
}

/** Styles the canvas that holds the backgrounds and icons */
.canvas {
  width: 100%;
}