body {
    font-family: sans-serif;
    margin: 0;
    background-color: #C0DEED;
  }
  
  h1 {
    padding: 20px;
    text-align: center;
    font-size: 2.5em;
    background-color: white;
  }
  
  #sky {
    position: relative;
    width: 100%;
    height: 500px;
    background: url("clouds.png") repeat-x top center;
    overflow: hidden;
  }
  
  .plane-wrapper {
    position: absolute;
    top: 130px;
    left: -400px;
    animation: fly 8s linear infinite;
  }
  
  .plane {
    width: 350px;
    vertical-align: middle;
  }
  
  .tail-banner {
    position: absolute;
    left: -60px;
    top: 30px;
    background-color: #0d47a1;
    color: white;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 0.9em;
    transform-origin: left center;
    animation: wave 1.5s infinite ease-in-out;
  }
  
  @keyframes fly {
    from { left: -400px; }
    to { left: 100%; }
  }
  
  @keyframes wave {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
  }
  
  .banner {
    position: absolute;
    top: 80px;
    left: -500px;
    font-size: 1.8em;
    background-color: #1a73e8;
    color: white;
    padding: 10px 30px;
    border-radius: 20px;
    animation: bannerMove 6s ease-in-out forwards;
    transform-origin: center;
  }
  
  @keyframes bannerMove {
    0% { left: -500px; transform: scale(0.8) rotate(0deg); }
    50% { left: 50%; transform: scale(1.3) rotate(3deg); }
    100% { left: calc(50% - 180px); transform: scale(1) rotate(0deg); }
  }