body {
  margin: 0;
  width: 1277px;
  height: 841px;
  background: #111;
  color: white;
  overflow: hidden;
  font-family: "DM Sans", sans-serif;
}

.noise::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org/2000/svg' width='100%' height='100%'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.3'/%3E%3C/svg%3E");
pointer-events: none;
}

#video-container {
  width: 1277px;
  height: 712.86px;
}

iframe {
  width: 1277px;
  height: 712.86px;
  border: none;
}

#info-container {
  width: 1277px;
  height: 128px;
  background: #FFA4BE;
  padding: 10px 20px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

#title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 2px;
  color: #FFFEF8;
  font-family: "obviously", sans-serif;
}

#creator, #date, #views {
  font-size: 18px;
  color: #FFFEF8;
}