*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-snap-type:y mandatory;
}

body{
  background:#000;
  color:#fff;
  font-family:Arial, sans-serif;
  overflow-x:hidden;
}

/* INTRO */

.intro{
  text-align:center;
  padding:40px 20px;
}

.intro h1{
  font-size:2.2rem;
  font-weight:300;
  margin-bottom:10px;
}

.intro p{
  opacity:0.6;
  font-size:1rem;
}

/* VIDEO FEED */

.video-wall{
  width:100%;
}

/* EACH CLIP */

.card{
  width:100%;
  height:100vh;

  scroll-snap-align:start;

  overflow:hidden;
  position:relative;

  background:#000;
}

/* VIDEO */

video{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;
}

/* FOOTER */

.footer{
  text-align:center;
  padding:40px 20px;
  opacity:0.4;
  font-size:0.8rem;
}
/* ==========================
   VIDEO OVERLAY V2
========================== */

.overlay{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:24px;

  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.72)
    );

  z-index:2;
}

.quote{

  margin:0 0 10px 0;

  color:#fff;

  font-size:1rem;
  line-height:1.5;

  text-shadow:
    0 1px 3px rgba(0,0,0,.5);
}

.channel-link{

  display:inline-block;

  color:#fff;

  text-decoration:none;

  font-size:.9rem;

  opacity:.9;

  border-bottom:
    1px solid rgba(255,255,255,.35);

  transition:
    opacity .2s ease;
}

.channel-link:hover{
  opacity:1;
}