html, body {
    margin:0px;
    height:100%;
    /*overflow-x: hidden; */
    position: relative;
  }

  a {
    color: #006BFF;
    text-decoration: none;
  }
  a:hover {
    font-weight: bold;

  }

  .logo {
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 960px;
    width: 90%;
    transform: translate(-50%, -50%);
    animation: pulse 5s linear infinite alternate;
    -webkit-animation: pulse 5s linear infinite alternate;
    -moz-animation: pulse 5s linear infinite alternate;
    -o-animation: pulse 5s linear infinite alternate;
  }

  .absoluteBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
  .mainBox {
    position: absolute;
    max-width: 960px;
    max-height: 760px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
    width: 0%;
    height: auto;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 3px 7px rgb(235, 235, 235);
    padding: 5px;
    overflow-y: scroll;
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    transition:width 300ms ease-in-out, height 300ms ease-in-out, opacity 300ms ease-in-out;
  }

  ::-webkit-scrollbar {
    width: 10px;
  }

  .mainBox.enlarge {
    width: 90%;
    height: 70%;
    opacity: 100;
  }
  
  @keyframes pulse {
    0%   {width: 90%;}
    40%  {width: 94%;}
    50%  {width: 95%;}
    60%  {width: 94%;}
    100% {width: 90%;}
  }
  @-webkit-keyframes pulse {
    0%   {width: 90%;}
    40%  {width: 94%;}
    50%  {width: 95%;}
    60%  {width: 94%;}
    100% {width: 90%;}
  }
  @-moz-keyframes pulse {
    0%   {width: 90%;}
    40%  {width: 94%;}
    50%  {width: 95%;}
    60%  {width: 94%;}
    100% {width: 90%;}
  }
  @-o-keyframes pulse {
    0%   {width: 90%;}
    40%  {width: 94%;}
    50%  {width: 95%;}
    60%  {width: 94%;}
    100% {width: 90%;}
  }
  
  .loading {
  opacity: 0;
  position: relative;
  background: #000;
  height:100%;
  z-index:9999;
  animation: logo-loading 4s 1;
  -webkit-animation: logo-loading 4s 1;
  -moz-animation: logo-loading 4s 1;
  -o-animation: logo-loading 4s 1;
  }
  /* Standard Syntax */
  @keyframes logo-loading {
    0% {opacity:1;}
    90% {opacity:1;}
    100% {opacity:0;}
  }
  /* Safari Syntax */
  @-webkit-keyframes logo-loading {
    0% {opacity:1;}
    90% {opacity:1;}
    100% {opacity:0;}
  }
  /* Mozilla Syntax */
  @-moz-keyframes logo-loading {
    0% {opacity:1;}
    90% {opacity:1;}
    100% {opacity:0;}
  }
  /* Opera Syntax */
  @-o-keyframes logo-loading {
    0% {opacity:1;}
    90% {opacity:1;}
    100% {opacity:0;}
  }

  /* SANDBOX STUFF */
  .bg {
    animation:slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, rgb(153, 214, 255) 50%, rgb(208, 236, 255) 50%);
    bottom:0;
    left:-50%;
    opacity:.5;
    position:fixed;
    right:-50%;
    top:0;
    z-index:-1;
  }
  
  .bg2 {
    animation-direction:alternate-reverse;
    animation-duration:4s;
  }
  
  .bg3 {
    animation-duration:5s;
  }
  
  @keyframes slide {
    0% {
      transform:translateX(-25%);
    }
    100% {
      transform:translateX(25%);
    }
  }
  /* SANDBOX STUFF */