html, body {
  height: 100%;
  margin: 0;
}
.site-header{
  height:72px;
  background: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
  display:flex;
  align-items:center;
}
.site-header .header-inner{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 16px;
}
.logo{
  font-weight:700;
  color:#0b7a7a;
}
.main-nav a{
  margin-left:18px;
  color:#2b2b2b;
  text-decoration:none;
}

.hero{
  min-height: calc(100vh - 72px);
  background: #000;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.stripes{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:220px;
  background: repeating-linear-gradient(90deg,
    #00e6a1 0 18px,
    #000 18px 28px,
    #ff2d2d 28px 44px,
    #000 44px 54px,
    #18d3ff 54px 70px,
    #000 70px 80px,
    #9b59ff 80px 100px);
  mix-blend-mode:screen;
}
.hero-inner{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:40px 16px;
}
.player-wrap{
  width:80%;
  max-width:1000px;
  aspect-ratio: 16/9;
  background:#000;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  border-radius:6px;
  overflow:hidden;
}
.player-wrap iframe,
.player-wrap video{
  width:100%;
  height:100%;
  border:0;
  display:block;
  object-fit:cover;
}

@media (max-width:720px){
  .player-wrap{ width:95%; }
  .stripes{ height:120px; }
}