body {
    margin: 0;
    background: #000; 
  }
  video { 
      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      transform: translateX(-50%) translateY(-50%);
      transition: 1s opacity;
  }
  .stopfade { 
     opacity: .5;
  }
  
  #error { 
    font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
    font-weight:100; 
    background: rgba(0,0,0,0.3);
    color: white;
    padding: 2rem;
    width: 33%;
    margin:2rem;
    float: right;
    font-size: 1.2rem;
  }
  h1 {
    font-size: 3rem;
    text-transform: uppercase;
    margin-top: 0;
    letter-spacing: .3rem;
  }
  #error button { 
    display: block;
    width: 80%;
    padding: .4rem;
    border: none; 
    margin: 1rem auto; 
    font-size: 1.3rem;
    background: rgba(255,255,255,0.23);
    color: #fff;
    border-radius: 3px; 
    cursor: pointer;
    transition: .3s background;
  }
  #error button:hover { 
     background: rgba(0,0,0,0.5);
  }
  
  a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    background:rgba(0,0,0,0.5);
    padding: .5rem;
    transition: .6s background; 
  }
  a:hover{
    background:rgba(0,0,0,0.9);
  }
  @media screen and (max-width: 500px) { 
    div{width:70%;} 
  }
  @media screen and (max-device-width: 800px) {
    html { background: url(https://thenewcode.com/assets/images/error.jpg) #000 no-repeat center center fixed; }
    #bgvid { display: none; }
  }