/*
 * Baseline styles
 */
 body {
    /* background: rgb(7, 15, 51); */

    background-image: url(bg1.jpg);
    background-size: cover;
    background-color: rgba(7, 15, 51, 0.85);
    background-blend-mode: darken;
    text-align: center;
    /* padding: 5%; */
    font-family: -apple-system, system-UI, BlinkMacSystemFont, Verdana, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
  }
  .background{
    height: 100%;
    width: 100%;
    background-color: rgb(7, 15, 51);
    -webkit-clip-path: polygon(0 0, 100% 0, 89% 62%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 89% 62%, 0% 100%);
    position: absolute;
    opacity: 0.8em;
    z-index: -1;
  }

  h2 {
    color: #ccc;
    margin: 0;
    font: 1.2rem verdana;
    text-transform: uppercase;
    letter-spacing: .1em;
  }
  h3 {
    color: rgb(155, 155, 155);
    margin: 0;
    font: .8rem;
    letter-spacing: .1em;
  }  


  /* Contact Span*/
  .contact{
    color: lightgray;
    font-size: 1rem;
  }

  .contact h4{
    color: rgb(190, 243, 140);
    font-size: 1rem;    
  }

  .unclaimed{
    color: rgb(202, 202, 201);
    font-size: 0.8rem;       
  }

  /*
   * Loading Dots
   * Can we use pseudo elements here instead :after?
   */
  .loading span {
    display: inline-block;
    vertical-align: middle;
    width: .6em;
    height: .6em;
    margin: .19em;
    background: #007DB6;
    border-radius: .6em;
    animation: loading 1s infinite alternate;
  }
  
  /*
   * Dots Colors
   * Smarter targeting vs nth-of-type?
   */
  .loading span:nth-of-type(2) {
    background: #008FB2;
    animation-delay: 0.2s;
  }
  .loading span:nth-of-type(3) {
    background: #009B9E;
    animation-delay: 0.4s;
  }
  .loading span:nth-of-type(4) {
    background: #00A77D;
    animation-delay: 0.6s;
  }
  .loading span:nth-of-type(5) {
    background: #00B247;
    animation-delay: 0.8s;
  }
  .loading span:nth-of-type(6) {
    background: #5AB027;
    animation-delay: 1.0s;
  }
  .loading span:nth-of-type(7) {
    background: #A0B61E;
    animation-delay: 1.2s;
  }
  
  /*
   * Animation keyframes
   * Use transition opacity instead of keyframes?
   */
  @keyframes loading {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }