h1 {
   color:rgb(0, 20, 100);
   font-family: Verdana, Geneva, Tahoma, sans-serif; 
   text-align: center;
   max-width: 800px;
   margin: 0 auto 30px auto;
   padding: 0 20px;
}
p {
   font-size: x-large;
   text-align: center;
   max-width: 800px;
   margin: 0 auto 30px auto;
   padding: 0 20px;
}
h2{
   font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   text-align: center;
   font-size: xx-large;
   max-width: 800px;
   margin: 0 auto 30px auto;
   padding: 0 20px;
}
body {
      margin: 0;
      padding: 20px;
      background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 60%, #90EE90 60%, #90EE90 100%);
      font-family: Arial, sans-serif;
      min-height: 100vh;
  }

  .restaurant-container {
      position: relative;
      width: 100%;
      height: 500px;
      margin: 20px auto;
      background: transparent;
      overflow: hidden;
  }

  /* Sky and ground */
  .sky {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 40%;
      background: transparent;
  }

  .ground {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 60%;
      background: transparent;
  }

  /* Restaurant building */
  .building {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 400px;
      height: 300px;
      background: #d0a281;
      border: 5px solid #8B4513;
  }

  /* Roof */
  .roof {
      position: absolute;
      top: -50px;
      left: -20px;
      width: 440px;
      height: 60px;
      background: #571414;
      transform: skewY(-5deg);
      border: 5px solid #654321;
  }

  .roof::before {
      content: '';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 30px solid #571414;
  }

  /* Windows */
  .window {
      position: absolute;
      width: 60px;
      height: 80px;
      background: #b2e9ff;
      border: 5px solid #8B4513;
      border-radius: 5px;
  }

  .window-left {
      top: 80px;
      left: 50px;
  }

  .window-right {
      top: 80px;
      right: 50px;
  }

  .window-center {
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
  }

  /* Door */
  .door {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 120px;
      background: #422109;
      border: 5px solid #5c3b1a;
      border-radius: 5px 5px 0 0;
  }

  .door-handle {
      position: absolute;
      top: 50%;
      right: 10px;
      width: 8px;
      height: 8px;
      background: #FFD700;
      border-radius: 50%;
  }

  /* Sign */
  .sign {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 40px;
      background: #FFD700;
      border: 3px solid #8B4513;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #8B0000;
      font-size: 16px;
  }


  /* Trees */
  .tree {
      position: absolute;
  }

  .tree-trunk {
      width: 20px;
      height: 60px;
      background: #8B4513;
      border-radius: 3px;
  }

  .tree-leaves {
      position: absolute;
      top: -30px;
      left: -20px;
      width: 60px;
      height: 60px;
      background: #228B22;
      border-radius: 50%;
  }

  .tree-left {
      bottom: 100px;
      left: 50px;
  }

  .tree-right {
      bottom: 100px;
      right: 50px;
  }

  /* Sun */
  .sun {
      position: absolute;
      top: 30px;
      right: 50px;
      width: 60px;
      height: 60px;
      background: #FFD700;
      border-radius: 50%;
      box-shadow: 0 0 20px #FFD700;
  }

  /* Clouds */
  .cloud {
      position: absolute;
      background: white;
      border-radius: 50px;
      opacity: 0.8;
  }

  .cloud::before,
  .cloud::after {
      content: '';
      position: absolute;
      background: white;
      border-radius: 50px;
  }

  .cloud-1 {
      top: 50px;
      left: 100px;
      width: 80px;
      height: 30px;
  }

  .cloud-1::before {
      top: -15px;
      left: 10px;
      width: 50px;
      height: 40px;
  }

  .cloud-1::after {
      top: -10px;
      right: 10px;
      width: 40px;
      height: 35px;
  }

  .cloud-2 {
      top: 80px;
      right: 150px;
      width: 60px;
      height: 25px;
  }

  .cloud-2::before {
      top: -10px;
      left: 5px;
      width: 35px;
      height: 30px;
  }

  .cloud-2::after {
      top: -8px;
      right: 5px;
      width: 30px;
      height: 28px;
  }