html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #009c3b;
}

#bandeira {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.tira {
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  background-image: url('../img/bandeira-flat.png');
  will-change: transform;
  animation-name: onda;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes onda {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(calc(var(--amp, 14px) * -1)); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(var(--amp, 14px)); }
  100% { transform: translateY(0); }
}