.ag-format-container {
    width: 1142px;
    margin: 0 auto;
  }
  
  
  html,
  body,
  .ag-night-sky-block {
    height: 100%;
  }
  
  .ag-night-sky-block {
    background-color: #000354;
  
    z-index: 1;
    position: relative;
  }
  .ag-night-sky_sky {
    height: 87%;
  
    z-index: -5;
  }
  .ag-night-sky_clouds,
  .ag-night-sky_sky,
  .ag-night-sky_stars,
  .ag-night-sky_twinkling {
    width: 100%;
  
    position: absolute;
    left: 0;
    top: 0;
  }
  .ag-night-sky_clouds,
  .ag-night-sky_stars,
  .ag-night-sky_twinkling {
    display: block;
    height: 100%;
  
    right: 0;
    bottom: 0;
  }
  .ag-night-sky_stars {
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/night-sky/images/stars.png) repeat 0 0;
  }
  .ag-night-sky_twinkling {
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/night-sky/images/twinkling.png) repeat 0 0;
  
    -webkit-animation: an-twinkling 200s linear infinite;
    -moz-animation: an-twinkling 200s linear infinite;
    -o-animation: an-twinkling 200s linear infinite;
    animation: an-twinkling 200s linear infinite;
  }
  .ag-night-sky_clouds {
    background: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/night-sky/images/clouds.png) repeat-x 0 0;
    background-size: 50%;
    margin-top: 55%;
  
    z-index: 2;
  
    -webkit-animation: an-clouds 2000s linear infinite;
    -moz-animation: an-clouds 2000s linear infinite;
    -o-animation: an-clouds 2000s linear infinite;
    animation: an-clouds 2000s linear infinite;
  }
  
  @-webkit-keyframes an-twinkling {
    0% {
      background-position: 0 0;
    }
    to {
      background-position: -10000px 5000px;
    }
  }
  @-moz-keyframes an-twinkling {
    0% {
      background-position: 0 0;
    }
    to {
      background-position: -10000px 5000px;
    }
  }
  @-o-keyframes an-twinkling {
    0% {
      background-position: 0 0;
    }
    to {
      background-position: -10000px 5000px;
    }
  }
  @keyframes an-twinkling {
    0% {
      background-position: 0 0;
    }
    to {
      background-position: -10000px 5000px;
    }
  }
  
  @-webkit-keyframes an-clouds {
    0% {
      background-position: 0 0;
    }
    to {
      background-position: 10000px 0;
    }
  }
  @-moz-keyframes an-clouds {
    0% {
      background-position: 0 0;
    }
    to {
      background-position: 10000px 0;
    }
  }
  @-o-keyframes an-clouds {
    0% {
      background-position: 0 0;
    }
    to {
      background-position: 10000px 0;
    }
  }
  @keyframes an-clouds {
    0% {
      background-position: 0 0;
    }
    to {
      background-position: 10000px 0;
    }
  }
  
  
  @media only screen and (max-width: 767px) {
    .ag-format-container {
      width: 96%;
    }
  }
  
  @media (min-width: 768px) and (max-width: 979px) {
    .ag-format-container {
      width: 750px;
    }
  
  }
  
  @media (min-width: 980px) and (max-width: 1161px) {
    .ag-format-container {
      width: 960px;
    }
  
  }
  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .container .bottom {
    min-height: 150px;
    position: relative;
  }
  @keyframes move {
    from {
      background-position-x: 0;
    }
    to {
      background-position-x: 500px;
    }
  }
  .container .bottom div {
    position: absolute;
    background-position-y: bottom;
    background-repeat: repeat-x;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
  .container .bottom .bg1 {
    background-image: url("https://static.typingclub.com/m/tpmedia/img/clouds3.png");
    z-index: 1;
    transform: translateY(-15px);
    animation: move 55s infinite linear reverse;
    -webkit-animation: move 55s infinite linear reverse;
    height: 150%;
  }
  .container .bottom .bg3 {
    background-image: url("https://static.typingclub.com/m/tpmedia/img/clouds1.png");
    z-index: 4;
    height: 150%;
  }
  .container .bottom .bg2 {
    background-image: url("https://static.typingclub.com/m/tpmedia/img/clouds2.png");
    z-index: 5;
    transform: translateY(15px);
    animation: move 55s infinite linear;
    -webkit-animation: move 55s infinite linear;
    height: 150%;
  }