:root {
      color-scheme: dark;
  }
  
  body {
      margin: 0;
      background: #5B5B5B;
      overflow-x: hidden;
      user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
    
  .scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 20px);
    background: repeating-linear-gradient(
      to bottom,
      #2C2C2C 0px,
      #2C2C2C 10px,
      transparent 4px,
      transparent 20px
    );
    animation: moveScan 1.5s linear infinite;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
  }

  @keyframes moveScan {
    from { transform: translateY(0); }
    to   { transform: translateY(20px); }
  }    
  body * {
    position: relative;
    z-index: 5;
  }

  /* Youtube embed stuff */ 
  .yt-wrapper {
    width: 50%;   
    margin: 0 auto;
  }

  .yt-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
  }

  .yt-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  main {
    text-align: center;
    padding-top: 40px;
  }

  .image-video-container {
      position: relative;
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: fit-content; 
  }

  .video-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-106%, -190%);
      width: 51%;
      height: auto;
  }
  .yt-responsive {
      padding-bottom: 30%;
      position: relative;
      height: 0;
      overflow: hidden;
  }

  .yt-responsive iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 94%;
      height: 90%;
      border: none;
  }