body,
html {
  height: 100%;
  margin:0;
}

body {
  font-family: Helvetica, sans-serif;
  color: #fff;
  line-height: 1.2;
  background:#000;
}

/* container */

#video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* vídeo principal */

#youtube-video{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

/* fundo borrado */

.video-bg{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:200%;
  height:200%;
  filter:blur(40px);
  opacity:.6;
  pointer-events:none;
}

/* HORIZONTAL (igual seu comportamento original) */

@media (min-aspect-ratio: 16/9){

  #youtube-video{
    width:100vw;
    height:56.25vw;
  }

}

/* VERTICAL */

@media (max-aspect-ratio: 16/9){

  .video-bg{
    display:block;
  }

  #youtube-video{
    width:177.78vh;
    height:100vh;
    max-width:90vw;
    max-height:50.6vw;
  }

}

.btn,
.btn:hover {
  border: solid 1px #fff;
  color: #fff;
  font-size: 21px;
}

a,
a:hover {
  color: #fff;
  text-decoration: none;
}

a:hover {
  opacity: .7;
}

#content {
  flex: 1 0 auto;
  z-index: 1;
  font-size: 20px;
}

footer {
  flex-shrink: none;
  z-index: 1;
}

#data {
  font-size: 16px;
  white-space: nowrap;
}

@media (min-width: 1200px) {

  #data {
    font-size: 26px;
  }

}