body {
      background-color: rgb(243, 234, 212);
      margin: 0px;
      font-size: 20px;
  }

  h1 {
      font-size: 32px;
      position: absolute;
      color: green;
      top: 10%;
      left: 35%;
  }

  .container {
      display: flex;
      flex-direction: column;
      gap: 60px;
      align-items: center;
      margin-top: 100px;
  }

  .allpage {
      background-color: white;
      width: 1100px;
      border-radius: 20px;
      padding: 20px;
      display: flex;
      gap: 40px;
      transition: transform 250ms;
      box-shadow: inset 0 0 20px rgb(212, 143, 3);
  }

  .allpage:hover {
      transform: scale(1.02);
  }

  h2 {
      color: rgb(43, 28, 200);
      margin-bottom: 10px;
      border-bottom: 2px solid #7f89f4;
      padding-bottom: 10px;
      font-size: 25px;
  }

  p>a {
      text-decoration: none;
  }

  p {
      line-height: 25px;
  }

  @media(max-width: 1100px) {
      .allpage {
          align-items: center;
          flex-direction: column;
          width: 100%;
      }

  }

  @media(max-width:720px) {
      h1 {
          top: 30px;
          font-size: 25px;
          left: 35px;
      }

      .allpage {
          align-items: center;
          width: 80%;
      }

      .left-side>img {
          width: 100%;
          height: 60%;
          padding: 10px;
      }

      .right-side {
          padding: 10px;
      }
  }