/* =================================================================
   VARIABLE.CSS
   ================================================================= */

:root {

   /* ----------------------------------------------------------------
      BACKGROUND
      ---------------------------------------------------------------- */
   --bg-image: url("Design/Background Gradient.png");
   --bg-size: cover;
   --bg-position: center center;
   --bg-repeat: no-repeat;

   /* ----------------------------------------------------------------
      Center Tittle.png  –  arc judul di atas tengah
      ---------------------------------------------------------------- */
   --title-width: 40%;
   --title-height: auto;
   --title-min-width: 280px;
   --title-max-width: 960px;
   --title-top: 0;
   --title-left: 50%;

   /* ----------------------------------------------------------------
      BuildingB.png  –  menara kiri (Aspire Tower)
      ---------------------------------------------------------------- */
   --building-b-width: 22%;
   --building-b-height: auto;
   --building-b-min-width: 100px;
   --building-b-max-width: 420px;
   --building-b-bottom: 0px;
   --building-b-left: 0px;

   /* ----------------------------------------------------------------
      BuildingA.png  –  menara kanan (Big Ben)
      ---------------------------------------------------------------- */
   --building-a-width: 22%;
   --building-a-height: auto;
   --building-a-min-width: 100px;
   --building-a-max-width: 420px;
   --building-a-bottom: 0px;
   --building-a-right: 0px;

   /* ----------------------------------------------------------------
      QR.png  –  frame QR code di bawah tengah
      ---------------------------------------------------------------- */
   --qr-width: 1%;
   --qr-height: auto;
   --qr-min-width: 110px;
   --qr-max-width: 170px;
   --qr-bottom: 2%;
   --qr-right: 2%;
   --qr-gen-size: 106;

   /* ----------------------------------------------------------------
      Area konten Social Wall
      ---------------------------------------------------------------- */
   --wall-top: 18%;
   --wall-bottom: 14%;
   --wall-padding-x: 23%;
   --wall-gap: 10px;
}

/* ------------------------------------------------------------------
   TABLET  768px – 1199px
   ------------------------------------------------------------------ */
@media (max-width: 1199px) {
   :root {
      --title-width: 60%;
      --title-max-width: 720px;

      --building-b-width: 26%;
      --building-b-max-width: 320px;

      --building-a-width: 26%;
      --building-a-max-width: 320px;

      --qr-width: 5%;
      --qr-min-width: 110px;
      --qr-max-width: 160px;
      --qr-gen-size: 106;
      --qr-right: 2%;

      --wall-padding-x: 27%;
      --wall-top: 20%;
      --wall-bottom: 16%;
      --wall-gap: 9px;
   }
}

/* ------------------------------------------------------------------
   MOBILE  480px – 767px
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
   :root {
      --title-width: 86%;
      --title-min-width: 220px;
      --title-max-width: 560px;
      --title-top: 0%;

      --building-b-width: 38%;
      --building-b-min-width: 80px;
      --building-b-max-width: 220px;

      --building-a-width: 38%;
      --building-a-min-width: 80px;
      --building-a-max-width: 220px;

      --qr-width: 10%;
      --qr-min-width: 100px;
      --qr-max-width: 150px;
      --qr-gen-size: 100;
      --qr-right: 2%;
      --qr-bottom: 0.8%;

      --wall-padding-x: 4%;
      --wall-top: 22%;
      --wall-bottom: 22%;
      --wall-gap: 8px;
   }
}

/* ------------------------------------------------------------------
   SMALL MOBILE  < 480px
   ------------------------------------------------------------------ */
@media (max-width: 479px) {
   :root {
      --title-width: 96%;
      --title-min-width: 180px;
      --title-max-width: 440px;
      --title-top: 1%;

      --building-b-width: 44%;
      --building-b-min-width: 70px;
      --building-b-max-width: 180px;

      --building-a-width: 44%;
      --building-a-min-width: 70px;
      --building-a-max-width: 180px;

      --qr-width: 13%;
      --qr-min-width: 90px;
      --qr-max-width: 130px;
      --qr-gen-size: 100;
      --qr-right: 2%;
      --qr-bottom: 0.5%;

      --wall-padding-x: 2%;
      --wall-top: 24%;
      --wall-bottom: 24%;
      --wall-gap: 6px;
   }
}