:root{
  --gird-width:30px;
  --gird-height:30px;
  --line-color:#999;
  --dot-color:#ccc;
  --dot-size:2px;
  --point-gap-width:calc(var(--gird-width) * 4);
  --point-gap-height:calc(var(--gird-height) * 4);
}
html,body{
  padding:0;
  margin:0;
  width:100%;
  height: 100%;
}
.grid-bg{
  width: 100%;
  height: 90%;
  overflow: hidden;
}
.center-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: #fff;
    font-size: 2em;
    font-family: 'Lato', sans-serif;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.logo{
  margin-bottom: 30px;
  width: 400px;
  height: auto;
}
@media (max-width: 768px){
  .logo{
    width: 300px;
  }
}

.center-content h2{
  margin: 0;
  padding: 0;
  font-weight: 500;
}

.center-content h5{
  margin-top: 20px;
  padding: 0;
  font-weight: 300;
}

.center-content a{
    color: #fff;
    text-decoration: none;
    margin-top: 10px;
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #fff;
    border-radius: 5px;
    transition: 0.3s;
    font-size: 20px;
}

.ba-grid{
  position: relative;
  z-index: 1;

  background-image:
    /*     radial-gradient(ellipse at center, #2883b6 0%, #084688 100%), */
          radial-gradient(ellipse at bottom left, rgba(104,128,138,0.4) 10%, rgba(138,114,76,0) 40%),
          linear-gradient(to bottom, rgba(57,173,219,.25), rgba(42,60,87,0.4)),
          linear-gradient(135deg, #670d10, #092756);
}


.ba-grid:before,
.ba-grid:after,
.inner:before,
.inner:after{
  content:'';
  position: absolute;
  z-index: 1;
  top:0;
  bottom:0;
  left:0;
  right:0;
  mix-blend-mode: overlay;
}

.ba-grid:before{
  background-image:
          linear-gradient(var(--line-color), transparent 1px),
          linear-gradient(to right, var(--line-color), transparent 1px);
  background-size:
          100% var(--gird-height),
          var(--gird-width) 100%;
}

.ba-grid:after{
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: var(--point-gap-width) var(--point-gap-height);
  background-position: calc(var(--point-gap-width) / 2) calc(var(--point-gap-height) / 2);
}



.inner:before,
.inner:after{
  background-image: radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size: var(--point-gap-width) var(--point-gap-height);
  background-position: calc(var(--point-gap-width) / 2) calc(var(--point-gap-height) / 2);

}

.inner:after{

  transform: scale(1.1, 1.1);
}

.inner:before{
  /*   background-image: radial-gradient(var(--dot-color) calc(var(--dot-size) + 1px), transparent calc(var(--dot-size) + 1px)); */
  transform: scale(1.2, 1.2);
}

.anim:after{
  animation: 6.4s linear move infinite;
}

.anim .inner:after{
  animation: 3.2s linear move infinite;
}

.anim .inner:before{
  animation: 1.6s linear move infinite;
}

@keyframes move{
  0%{
    background-position:calc(var(--point-gap-width) / 2) calc(var(--point-gap-height) / 2);
  }
  100%{
    background-position:calc(var(--point-gap-width) / 2) calc(var(--point-gap-height) / 2 * -1);
  }
}