html, body {
        overflow-y:hidden;
        height:100%;
        margin: 0
      }

      canvas {
        padding: 0;
        margin: auto;
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        -moz-user-select: none;  
        -webkit-user-select: none;
        max-width: 100% !important;
        max-height: 100% !important;
      }

      #preload-container {
        width: 100%;
        height: 100%;
      }

      #preload-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%;
      }

      @font-face {
        font-family: 'textFont';
        src: url('assets/fonts/trashim/trashim.ttf');
        font-style: normal;
      }

      @font-face {
        font-family: 'textFontLatin';
        src: url('assets/fonts/CelticHand.ttf');
        font-style: normal;
      }
/* 
      @font-face {
        font-family: 'logoFont';
        src: url('assets/fonts/trashim/trashimclm-bold-webfont.ttf');
        font-style: normal;
      } */

      @font-face {
        font-family: 'newspaper';
        src: url('assets/fonts/shlomo/Shlomo.ttf');
        font-style: normal;
      }

      @font-face {
        font-family: 'newspaperBold';
        src: url('assets/fonts/shlomo/ShlomoLightBold.ttf');
        font-style: normal;
      }

      @font-face {
        font-family: 'mainText';
        src: url('assets/fonts/assistant/assistant-regular.ttf');
        font-style: normal;
      }

      @font-face {
        font-family: 'mainTextBold';
        src: url('assets/fonts/assistant/assistant-bold.ttf');
        font-style: normal;
      }
/* 
      @font-face {
        font-family: 'messages';
        src: url('assets/fonts/David_Libre/DavidLibre-Regular.ttf');
        font-style: normal;
      } */

      .loader,
      .loader:before,
      .loader:after {
        background: #06985b;
        -webkit-animation: load1 1s infinite ease-in-out;
        animation: load1 1s infinite ease-in-out;
        width: 1em;
        height: 4em;
      }
      .loader {
        color: #06985b;
        text-indent: -9999em;
        margin: 88px auto;
        position: relative;
        font-size: 11px;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
      }
      .loader:before,
      .loader:after {
        position: absolute;
        top: 0;
        content: '';
      }
      .loader:before {
        left: -1.5em;
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
      }
      .loader:after {
        left: 1.5em;
      }
      @-webkit-keyframes load1 {
        0%,
        80%,
        100% {
          box-shadow: 0 0;
          height: 4em;
        }
        40% {
          box-shadow: 0 -2em;
          height: 5em;
        }
      }
      @keyframes load1 {
        0%,
        80%,
        100% {
          box-shadow: 0 0;
          height: 4em;
        }
        40% {
          box-shadow: 0 -2em;
          height: 5em;
        }
      }

      .loaderContainer {
        position: absolute;
        top: calc(50% - 4em);
        left: calc(50% - 1em);
      }
      
      .loaderText {
        color: white
      }