@font-face {
    font-family: 'umbrageregular';
    src: url('umbrage2-webfont.eot');
    src: url('umbrage2-webfont.eot?#iefix') format('embedded-opentype'),
         url('umbrage2-webfont.woff') format('woff'),
         url('umbrage2-webfont.ttf') format('truetype'),
         url('umbrage2-webfont.svg#umbrageregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    width: 100%;
    overflow-x: hidden;
    background: linear-gradient(132deg, #4c4947, #1b3a5e);
    background-size: 400% 400%;
    animation: BackgroundGradient 30s ease infinite;
}

p {
  font-family: 'umbrageregular' Arial, sans-serif;
}

#objective {
  text-align: center;
  font-family: umbrageregular;
  font-size: 22px;
  color: yellow;
}

#text {
  text-align: center;
  font-family: umbrageregular;
  font-size: 15px;
  color: white;
}

#img {
    margin: auto;
    display: block;
}

#myCanvas {
    border: 1px solid black;
    margin: auto;
    display: block;
}

-webkit-animation: BackgroundGradient 30s ease infinite;
-moz-animation: BackgroundGradient 30s ease infinite;
animation: BackgroundGradient 30s ease infinite;

@-webkit-keyframes BackgroundGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes BackgroundGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes BackgroundGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#overlay{
  height:100%;
  width:100%;
  background:rgba(0, 0, 0, 1);
  position:fixed;
  left:0;
  top:0;
 }