/* ╔═════════════════════════════════════════════════════════════════════════╗ */ /* ║ POSITIONING : HEADER (GARDEN) ║ */ /* ╚═════════════════════════════════════════════════════════════════════════╝ */ .positioning-main-garden-1 { } .positioning-main-garden-2 { --x: 110%; } /* right 110 */ .positioning-main-garden-3 { --x: 80%; } /* right 80 */ .positioning-main-garden-4 { --x: 90%; --y: 220%; } /* right 90, down 220 */ .positioning-main-garden-5 { --x: 265%; --y: 15%; } /* right 265, down 15 */ .positioning-main-garden-6 { --x: 230%; --y: 80%; } /* right 230, down 80 */ .positioning-main-garden-7 { --x: -50%; --y: -20%; } /* left 50, up 20 */ .positioning-main-garden-8 { --x: -150%; --y: 10%; } /* left 150, down 10 */ .positioning-main-garden-9 { --x: -70%; --y: 50%; } /* left 70, down 50 */ .positioning-main-garden-10 { --x: -5%; --y: 75%; } /* left 5, down 75 */ .positioning-main-garden-11 { --x: -350%; --y: 700%; } /* left 350, down 700 */ .positioning-main-garden-12 { --x: 150%; --y: 800%; } /* right 150, down 800 */ .positioning-main-garden-13 { --x: -290%; --y: 900%; } /* left 290, down 900 */ .positioning-main-garden-14 { --x: -350%; --y: 1000%; } /* left 350, down 1000 */ .positioning-main-garden-15 { --x: -5%; --y: 650%; } /* left 5, down 650 */ .positioning-main-garden-16 { --x: -65%; --y: 920%; } /* left 65, down 920 */ .positioning-main-garden-17 { --x: -35%; --y: 125%; } /* left 35, down 125 */ .positioning-main-garden-18 { --x: -80%; --y: 180%; } /* left 80, down 180 */ .positioning-main-garden-19 { --x: 350%; --y: 35%; } /* right 350, down 35 */ .positioning-main-garden-20 { --x: 410%; --y: 70%; } /* right 410, down 70 */ .positioning-main-garden-21 { --x: 350%; --y: 120%; } /* right 350, down 120 */ .positioning-main-garden-22 { --x: 410%; --y: 170%; } /* right 410, down 170 */ .positioning-main-garden-23 { --x: 470%; --y: 220%; } /* right 470, down 220 */ /* ╔═════════════════════════════════════════════════════════════════════════╗ */ /* ║ POSITIONING : HEADER (FOREST) ║ */ /* ╚═════════════════════════════════════════════════════════════════════════╝ */ .positioning-main-forest-1 { --x: -80%; } /* left 80 */ .positioning-main-forest-2 { --x: -160%; --y: 20%; } /* left 160, down 20 */ .positioning-main-forest-3 { --x: 40%; } /* right 40 */ .positioning-main-forest-4 { --x: 160%; --y: 20%; } /* right 160, down 20 */ .positioning-main-forest-5 { --x: 120%; --y: 40%; } /* right 120, down 40 */ .positioning-main-forest-6 { --x: 260%; --y: 40%; } /* right 260, down 40 */ .positioning-main-forest-7 { --x: -60%; --y: 40%; } /* left 60, down 40 */ .positioning-main-forest-8 { --x: -100%; --y: 100%; } /* left 100, down 100 */ .positioning-main-forest-9 { --x: -180%; --y: 60%; } /* left 180, down 60 */ .positioning-main-forest-10 { --x: -260%; --y: 40%; } /* left 260, down 40 */ .positioning-main-forest-11 { --x: 60%; --y: 80%; } /* right 60, down 80 */ .positioning-main-forest-12 { --x: 180%; --y: 80%; } /* right 180, down 80 */ .positioning-main-forest-13 { --x: 240%; --y: 100%; } /* right 240, down 100 */ .positioning-main-forest-14 { --x: 300%; --y: 140%; } /* right 300, down 140 */ .positioning-main-forest-15 { --x: 220%; --y: 160%; } /* right 220, down 160 */ .positioning-main-forest-16 { --x: 280%; --y: 200%; } /* right 280, down 200 */ .positioning-main-forest-17 { --x: 100%; --y: 120%; } /* right 100, down 120 */ .positioning-main-forest-18 { --x: 140%; --y: 160%; } /* right 140, down 160 */ .positioning-main-forest-19 { --x: 120%; --y: 200%; } /* right 120, down 200 */ .positioning-main-forest-20 { --x: -120%; --y: 140%; } /* left 120, down 140 */ .positioning-main-forest-21 { --x: -200%; --y: 120%; } /* left 200, down 120 */ .positioning-main-forest-22 { --x: -260%; --y: 140%; } /* left 260, down 140 */ .positioning-main-forest-23 { --x: -100%; --y: 200%; } /* left 100, down 200 */ .positioning-main-forest-24 { --x: -220%; --y: 200%; } /* left 220, down 200 */ .positioning-main-forest-25 { --x: -180%; --y: 240%; } /* left 180, down 240 */ .positioning-main-forest-26 { --x: -280%; --y: 240%; } /* left 280, down 240 */ .positioning-main-forest-27 { --x: 220%; --y: 240%; } /* right 220, down 240 */ .positioning-main-forest-28 { --x: 280%; --y: 280%; } /* right 280, down 280 */ .positioning-main-forest-29 { --x: 160%; --y: 240%; } /* right 160, down 240 */ .positioning-main-forest-30 { --x: 60%; --y: 240%; } /* right 60, down 240 */ .positioning-main-forest-31 { --y: 280%; } /* down 280 */ .positioning-main-forest-32 { --x: 100%; --y: 300%; } /* right 100, down 300 */ .positioning-main-forest-33 { --x: 180%; --y: 340%; } /* right 180, down 340 */ .positioning-main-forest-34 { --x: -140%; --y: 300%; } /* left 140, down 300 */ .positioning-main-forest-35 { --x: -220%; --y: 300%; } /* left 220, down 300 */ .positioning-main-forest-36 { --x: -180%; --y: 340%; } /* left 180, down 340 */ .positioning-main-forest-37 { --x: -80%; --y: 360%; } /* left 80, down 360 */ .positioning-main-forest-38 { --x: -260%; --y: 360%; } /* left 260, down 360 */ .positioning-main-forest-39 { --x: 280%; --y: 320%; } /* right 280, down 320 */ .positioning-main-forest-40 { --x: 100%; --y: 340%; } /* right 100, down 340 */ .positioning-main-forest-41 { --x: -160%; --y: 400%; } /* left 160, down 400 */ .positioning-main-forest-42 { --x: 220%; --y: 380%; } /* right 220, down 380 */ .positioning-main-forest-43 { --x: 180%; --y: 420%; } /* right 180, down 420 */ .positioning-main-forest-44 { --x: -220%; --y: 420%; } /* left 220, down 420 */ .positioning-main-forest-45 { --x: -20%; --y: 400%; } /* left 20, down 400 */ .positioning-main-forest-46 { --x: -120%; --y: 420%; } /* left 120, down 420 */ .positioning-main-forest-47 { --x: 60%; --y: 420%; } /* right 60, down 420 */ .positioning-main-forest-48 { --y: 160%; } /* down 160 */ /* ╔═════════════════════════════════════════════════════════════════════════╗ */ /* ║ POSITIONING : INFO BOX : TOP ║ */ /* ╚═════════════════════════════════════════════════════════════════════════╝ */ /* "16 Colours" (box 2) : top */ .positioning-box2-top-1 { --x: -40%; --y: -80%; } /* left 40, up 80 */ .positioning-box2-top-2 { --x: -160%; --y: -80%; } /* left 160, up 80 */ .positioning-box2-top-3 { --x: 260%; --y: -120%; } /* right 260, up 120 */ .positioning-box2-top-4 { --x: -220%; --y: -60%; } /* left 220, up 60 */ .positioning-box2-top-5 { --x: -240%; --y: -20%; } /* left 240, up 20 */ .positioning-box2-top-6 { --x: 260%; --y: 40%; } /* right 260, down 40 */ .positioning-box2-top-7 { --x: 100%; --y: -80%; } /* right 100, up 80 */ .positioning-box2-top-8 { --x: 180%; --y: -80%; } /* right 180, up 80 */ .positioning-box2-top-9 { --x: -100%; --y: -60%; } /* left 100, up 60 */ .positioning-box2-top-10 { --x: 40%; --y: -60%; } /* right 40, up 60 */ .positioning-box2-top-11 { --x: 120%; --y: -40%; } /* right 120, up 40 */ .positioning-box2-top-12 { --x: -60%; --y: -60%; } /* left 60, up 60 */ .positioning-box2-top-13 { --x: 60%; --y: -20%; } /* right 60, up 20 */ .positioning-box2-top-14 { --x: -140%; } /* left 140 */ .positioning-box2-top-15 { --x: 240%; --y: -40%; } /* right 240, up 40 */ .positioning-box2-top-16 { --x: -260%; } /* left 260 */ /* "Unique Artwork" (box 3) : top */ .positioning-box3-top-1 { --x: -240%; --y: -120%; } /* left 240, up 120 */ .positioning-box3-top-2 { --x: 220%; --y: -120%; } /* right 220, up 120 */ .positioning-box3-top-3 { --x: -140%; --y: -100%; } /* left 140, up 100 */ .positioning-box3-top-4 { --x: -240%; --y: -80%; } /* left 240, up 80 */ .positioning-box3-top-5 { --x: 100%; --y: -100%; } /* right 100, up 100 */ .positioning-box3-top-6 { --x: 140%; --y: -60%; } /* right 140, up 60 */ .positioning-box3-top-7 { --x: -180%; --y: -60%; } /* left 180, up 60 */ .positioning-box3-top-8 { --x: -80%; --y: -80%; } /* left 80, up 80 */ .positioning-box3-top-9 { --x: 20%; --y: -80%; } /* right 20, up 80 */ .positioning-box3-top-10 { --x: 240%; --y: -80%; } /* right 240, up 80 */ .positioning-box3-top-11 { --x: -140%; --y: 10%; } /* left 140, down 10 */ .positioning-box3-top-12 { --x: 60%; --y: -30%; } /* right 60, up 30 */ .positioning-box3-top-13 { --x: -180%; --y: -440%; } /* left 180, up 440 */ .positioning-box3-top-14 { --x: -20%; --y: -400%; } /* left 20, up 400 */ .positioning-box3-top-15 { --y: -280%; } /* up 280 */ .positioning-box3-top-16 { --x: -240%; --y: -340%; } /* left 240, up 340 */ .positioning-box3-top-17 { --x: -20%; --y: -20%; } /* left 20, up 20 */ .positioning-box3-top-18 { --x: -200%; --y: -200%; } /* left 200, up 200 */ .positioning-box3-top-19 { --x: 60%; --y: -160%; } /* right 60, up 160 */ .positioning-box3-top-20 { --x: 200%; --y: -20%; } /* right 200, up 20 */ .positioning-box3-top-21 { --x: -240%; --y: -20%; } /* left 240, up 20 */ .positioning-box3-top-22 { --x: -240%; --y: 40%; } /* left 240, down 40 */ /* Continuity" (box 4) : top */ .positioning-box4-top-1 { --x: 80%; --y: -100%; } /* right 80, up 100 */ .positioning-box4-top-2 { --x: -240%; --y: 20%; } /* left 240, down 20 */ .positioning-box4-top-3 { --x: -80%; --y: -100%; } /* left 80, up 100 */ .positioning-box4-top-4 { --y: -60%; } /* up 60 */ .positioning-box4-top-5 { --x: 140%; --y: -60%; } /* right 140, up 60 */ .positioning-box4-top-6 { --x: 80%; --y: -40%; } /* right 80, up 40 */ .positioning-box4-top-7 { --x: 240%; --y: -80%; } /* right 240, up 80 */ .positioning-box4-top-8 { --x: -240%; --y: -120%; } /* left 240, up 120 */ .positioning-box4-top-9 { --x: -120%; --y: -80%; } /* left 120, up 80 */ .positioning-box4-top-10 { --x: -180%; --y: -60%; } /* left 180, up 60 */ .positioning-box4-top-11 { --x: -140%; --y: -20%; } /* left 140, up 20 */ .positioning-box4-top-12 { --x: 40%; --y: -20%; } /* right 40, up 20 */ .positioning-box4-top-13 { --x: -40%; --y: -70%; } /* left 40, up 50 */ .positioning-box4-top-14 { --x: 200%; } /* right 200 */ /* Destructive Elements" (box 5) : top */ .positioning-box5-top-1 { --x: -180%; --y: -200%; } /* left 180, up 200 */ .positioning-box5-top-2 { --x: -200%; --y: -140%; } /* left 200, up 140 */ .positioning-box5-top-3 { --x: -60%; --y: -180%; } /* left 60, up 180 */ .positioning-box5-top-4 { --x: 20%; --y: -140%; } /* right 20, up 140 */ .positioning-box5-top-5 { --x: 180%; --y: -200%; } /* right 180, up 200 */ .positioning-box5-top-6 { --x: 100%; --y: -180%; } /* right 100, up 180 */ .positioning-box5-top-7 { --x: 160%; --y: -100%; } /* right 160, up 100 */ .positioning-box5-top-8 { --x: 240%; --y: -80%; } /* right 240, up 80 */ .positioning-box5-top-9 { --x: 180%; --y: -40%; } /* right 180, up 40 */ .positioning-box5-top-10 { --x: -120%; --y: -120%; } /* left 120, up 120 */ .positioning-box5-top-11 { --x: -80%; --y: -80%; } /* left 80, up 80 */ .positioning-box5-top-12 { --x: -180%; --y: -40%; } /* left 180, up 40 */ .positioning-box5-top-13 { --x: -20%; --y: -40%; } /* left 20, up 40 */ .positioning-box5-top-14 { --x: -60%; } /* left 60 */ .positioning-box5-top-15 { --x: 60%; } /* right 60 */ /* "Collect To Advance" (box 6) : top */ .positioning-box6-top-1 { --x: -240%; --y: -60%; } /* left 240, up 60 */ .positioning-box6-top-2 { --x: 240%; --y: -40%; } /* right 240, up 40 */ .positioning-box6-top-3 { --x: -140%; --y: -45%; } /* left 140, up 45 */ .positioning-box6-top-4 { --x: -60%; --y: -50%; } /* left 60, up 50 */ .positioning-box6-top-5 { --x: 80%; --y: -60%; } /* right 80, up 60 */ .positioning-box6-top-6 { --x: -50%; --y: -60%; } /* left 50, up 60 */ .positioning-box6-top-7 { --x: 50%; --y: -60%; } /* right 50, up 60 */ .positioning-box6-top-8 { --x: -50%; --y: -73%; } /* left 50, up 73 */ .positioning-box6-top-9 { --x: 50%; --y: -73%; } /* right 50, up 73 */ .positioning-box6-top-10 { --x: 140%; } /* right 140 */ .positioning-box6-top-11 { --x: 220%; --y: 40%; } /* right 220, down 40 */ .positioning-box6-top-12 { --x: -220%; --y: 40%; } /* left 220, down 40 */ /* "Inventory" (box 7) : top */ .positioning-box7-top-1 { --x: 180%; --y: -100%; } /* right 180, up 100 */ .positioning-box7-top-2 { --x: 120%; --y: -40%; } /* right 120, up 40 */ .positioning-box7-top-3 { --x: 40%; --y: -80%; } /* right 40, up 80 */ .positioning-box7-top-4 { --x: -40%; --y: -60%; } /* left 40, up 60 */ .positioning-box7-top-5 { --x: -100%; --y: -40%; } /* left 100, up 40 */ .positioning-box7-top-6 { --x: -180%; --y: -100%; } /* left 180, up 100 */ .positioning-box7-top-7 { --x: -220%; --y: -60%; } /* left 220, up 60 */ .positioning-box7-top-8 { --x: -180%; } /* left 180 */ .positioning-box7-top-9 { --x: 240%; } /* right 240 */ .positioning-box7-top-10 { --x: 80%; --y: -140%; } /* right 80, up 140 */ .positioning-box7-top-11 { --x: -20%; } /* left 20 */ /* "Trading Shop" (box 8) : top */ .positioning-box8-top-1 { --x: -220%; --y: -40%; } /* left 220, up 40 */ .positioning-box8-top-2 { --x: -140%; --y: -80%; } /* left 140, up 80 */ .positioning-box8-top-3 { --x: -40%; --y: -100%; } /* left 40, up 100 */ .positioning-box8-top-4 { --x: 120%; --y: -100%; } /* right 120, up 100 */ .positioning-box8-top-5 { --x: 40%; --y: -80%; } /* right 40, up 80 */ .positioning-box8-top-6 { --x: 200%; --y: -60%; } /* right 200, up 60 */ .positioning-box8-top-7 { --x: -30%; --y: -60%; } /* left 30, up 60 */ .positioning-box8-top-8 { --x: -22%; --y: -50%; } /* left 22, up 50 */ .positioning-box8-top-9 { --x: -160%; --y: -20%; } /* left 160, up 20 */ .positioning-box8-top-10 { --x: 60%; --y: -40%; } /* right 60, up 40 */ .positioning-box8-top-11 { --y: -20%; } /* up 20 */ .positioning-box8-top-12 { --x: 160%; } /* right 160 */ .positioning-box8-top-13 { --x: -220%; --y: 40%; } /* left 220, down 40 */ /* "New Gardens" (box 9) : top */ .positioning-box9-top-1 { --x: 80%; --y: -100%; } /* right 80, up 100 */ .positioning-box9-top-2 { --x: 20%; --y: -80%; } /* right 20, up 80 */ .positioning-box9-top-3 { --x: -100%; --y: -100%; } /* left 100, up 100 */ .positioning-box9-top-4 { --x: -60%; --y: -60%; } /* left 60, up 60 */ .positioning-box9-top-5 { --x: -140%; --y: -40%; } /* left 140, up 40 */ .positioning-box9-top-6 { --x: -240%; --y: -80%; } /* left 240, up 80 */ .positioning-box9-top-7 { --x: -240%; } /* left 240 */ .positioning-box9-top-8 { --x: -160%; } /* left 160 */ .positioning-box9-top-9 { --x: 160%; --y: -100%; } /* right 160, up 100 */ .positioning-box9-top-10 { --x: 180%; --y: -40%; } /* right 180, up 40 */ .positioning-box9-top-11 { --x: 220%; --y: 20%; } /* right 220, down 20 */ .positioning-box9-top-12 { --x: 260%; --y: -80%; } /* right 260, up 80 */ /* "Skills Employed" (box 10) : top */ .positioning-box10-top-1 { --x: -80%; --y: -60%; } /* left 80, up 60 */ .positioning-box10-top-2 { --x: -140%; --y: -40%; } /* left 140, up 40 */ .positioning-box10-top-3 { --x: 80%; --y: -60%; } /* right 80, up 60 */ .positioning-box10-top-4 { --y: -40%; } /* up 40 */ .positioning-box10-top-5 { --x: 140%; --y: -20%; } /* right 140, up 20 */ .positioning-box10-top-6 { --x: 200%; --y: -80%; } /* right 200, up 80 */ .positioning-box10-top-7 { --x: 240%; --y: 40%; } /* right 240, down 40 */ .positioning-box10-top-8 { --x: -240%; --y: -100%; } /* left 240, up 100 */ .positioning-box10-top-9 { --x: -240%; } /* left 240 */ .positioning-box10-top-10 { } .positioning-box10-top-11 { --x: -20%; } /* left 20 */ /* ╔═════════════════════════════════════════════════════════════════════════╗ */ /* ║ POSITIONING : INFO BOX : LEFT / RIGHT ║ */ /* ╚═════════════════════════════════════════════════════════════════════════╝ */ /* "What is Fuml For ?" (box 1) : left */ .positioning-box1-left-1 { --x: 100%; --y: -40%; } /* right 100, up 40 */ .positioning-box1-left-2 { --x: -120%; --y: 110%; } /* left 120, down 110 */ .positioning-box1-left-3 { --y: -20%; } /* up 20 */ .positioning-box1-left-4 { --x: -20%; } /* left 20 */ .positioning-box1-left-5 { } .positioning-box1-left-6 { --x: -100%; --y: 20%; } /* left 100, down 20 */ .positioning-box1-left-7 { --x: -100%; } /* left 100 */ .positioning-box1-left-8 { --x: -100%; --y: -20%; } /* left 100, up 20 */ .positioning-box1-left-9 { --x: -200%; --y: -20%; } /* left 200, up 20 */ .positioning-box1-left-10 { --x: -200%; --y: 20%; } /* left 200, down 20 */ .positioning-box1-left-11 { --x: -200%; } /* left 200 */ /* "What is Fuml For ?" (box 1) : right */ .positioning-box1-right-1 { --x: 80%; --y: -20%; } /* right 80, up 20 */ .positioning-box1-right-2 { --x: 180%; } /* right 180 */ .positioning-box1-right-3 { --y: -20%; } /* up 20 */ .positioning-box1-right-4 { --x: 20%; } /* right 20 */ .positioning-box1-right-5 { } .positioning-box1-right-6 { --x: 100%; } /* right 100 */ .positioning-box1-right-7 { --x: 100%; --y: 20%; } /* right 100, down 20 */ .positioning-box1-right-8 { --x: 100%; --y: 20%; } /* right 100, down 20 */ .positioning-box1-right-9 { --x: 200%; --y: 20%; } /* right 200, down 20 */ .positioning-box1-right-10 { --x: 200%; } /* right 200 */ .positioning-box1-right-11 { --x: 200%; --y: -20%; } /* right 200, up 20 */ /* "16 Colours" (box 2) : left */ .positioning-box2-left-1 { } .positioning-box2-left-2 { --x: 20%; --y: 20%; } /* right 20, down 20 */ .positioning-box2-left-3 { } .positioning-box2-left-4 { --x: -100%; } /* left 100 */ .positioning-box2-left-5 { --x: -120%; --y: -20%; } /* left 120, up 20 */ .positioning-box2-left-6 { --x: -100%; --y: 20%; } /* left 100, down 20 */ .positioning-box2-left-7 { --x: -120%; } /* left 120 */ .positioning-box2-left-8 { --x: -200%; } /* left 200 */ .positioning-box2-left-9 { --x: -200%; } /* left 200 */ .positioning-box2-left-10 { --x: -180%; --y: -20%; } /* left 180, up 20 */ .positioning-box2-left-11 { --x: -200%; } /* left 200 */ /* "16 Colours" (box 2) : right */ .positioning-box2-right-1 { --x: 80%; } /* right 80 */ .positioning-box2-right-2 { --x: 340%; --y: 220%; } /* right 340, down 220 */ .positioning-box2-right-3 { --x: 220%; --y: 320%; } /* right 220, down 320 */ .positioning-box2-right-4 { --y: -30%; } /* up 30 */ .positioning-box2-right-5 { --x: 320%; --y: 440%; } /* right 320, down 440 */ .positioning-box2-right-6 { } .positioning-box2-right-7 { --x: 120%; --y: -20%; } /* right 120, up 20 */ .positioning-box2-right-8 { --x: 200%; } /* right 200 */ .positioning-box2-right-9 { --x: 180%; --y: -20%; } /* right 180, up 20 */ .positioning-box2-right-10 { --x: 200%; } /* right 200 */ /* "Unique Artwork" (box 3) : left */ .positioning-box3-left-1 { --x: 20%; --y: 20%; } /* right 20, down 20 */ .positioning-box3-left-2 { } .positioning-box3-left-3 { --x: -80%; } /* left 80 */ .positioning-box3-left-4 { --x: -80%; --y: -20%; } /* left 80, up 20 */ .positioning-box3-left-5 { --x: -100%; } /* left 100 */ .positioning-box3-left-6 { --x: -220%; --y: 20%; } /* left 220, down 20 */ .positioning-box3-left-7 { --x: -200%; } /* left 200 */ .positioning-box3-left-8 { --x: -180%; } /* left 180 */ /* "Unique Artwork" (box 3) : right */ .positioning-box3-right-1 { --x: -20%; --y: -40%; } /* left 20, up 40 */ .positioning-box3-right-2 { } .positioning-box3-right-3 { --x: 20%; --y: -20%; } /* right 20, up 20 */ .positioning-box3-right-4 { --x: 120%; --y: -20%; } /* right 120, up 20 */ .positioning-box3-right-5 { --x: 100%; --y: -20%; } /* right 100, up 20 */ .positioning-box3-right-6 { --x: 60%; --y: 20%; } /* right 60, down 20 */ .positioning-box3-right-7 { --x: 200%; --y: 20%; } /* right 200, down 20 */ .positioning-box3-right-8 { --x: 200%; --y: 20%; } /* right 200, down 20 */ .positioning-box3-right-9 { --x: 160%; --y: -20%; } /* right 160, up 20 */ /* "Continuity" (box 4) : left */ .positioning-box4-left-1 { } .positioning-box4-left-2 { } .positioning-box4-left-3 { --x: -100%; --y: 20%; } /* left 100, down 20 */ .positioning-box4-left-4 { --x: -80%; --y: 20%; } /* left 80, down 20 */ .positioning-box4-left-5 { --x: -200%; } /* left 200 */ .positioning-box4-left-6 { --x: -200%; --y: -20%; } /* left 200, up 20 */ /* "Continuity" (box 4) : right */ .positioning-box4-right-1 { --x: -20%; --y: -20%; } /* left 20, up 20 */ .positioning-box4-right-2 { } .positioning-box4-right-3 { --x: 60%; } /* right 60 */ .positioning-box4-right-4 { --x: 100%; } /* right 100 */ .positioning-box4-right-5 { --x: 200%; --y: -40%; } /* right 200, up 40 */ .positioning-box4-right-6 { --x: 180%; --y: -20%; } /* right 180, up 20 */ /* "Destructive Elements" (box 5) : left */ .positioning-box5-left-1 { --x: 20%; } /* right 20 */ .positioning-box5-left-2 { --x: -20%; --y: -20%; } /* left 20, up 20 */ .positioning-box5-left-3 { --x: 20%; } /* right 20 */ .positioning-box5-left-4 { --x: -40%; --y: -40%; } /* left 40, up 40 */ .positioning-box5-left-5 { --x: -180%; --y: -20%; } /* left 180, up 20 */ .positioning-box5-left-6 { --x: -100%; } /* left 100 */ .positioning-box5-left-7 { --x: -100%; } /* left 100 */ .positioning-box5-left-8 { --x: -20%; --y: 80%; } /* left 20, down 80 */ .positioning-box5-left-9 { --x: -160%; --y: -40%; } /* left 140, up 40 */ .positioning-box5-left-10 { --x: -200%; } /* left 200 */ .positioning-box5-left-11 { --x: -380%; --y: 350%; } /* left 380, down 350 */ /* "Destructive Elements" (box 5) : right */ .positioning-box5-right-1 { --x: 20%; --y: -20%; } /* right 20, up 20 */ .positioning-box5-right-2 { --x: -20%; } /* left 20 */ .positioning-box5-right-3 { } .positioning-box5-right-4 { } .positioning-box5-right-5 { --x: 100%; } /* right 100 */ .positioning-box5-right-6 { --x: 120%; --y: 20%; } /* right 120, down 20 */ .positioning-box5-right-7 { --x: 100%; --y: -20%; } /* right 100, up 20 */ .positioning-box5-right-8 { --x: 100%; --y: -20%; } /* right 100, up 20 */ .positioning-box5-right-9 { --x: 200%; } /* right 200 */ .positioning-box5-right-10 { --x: 210%; --y: -20%; } /* right 180 */ .positioning-box5-right-11 { --x: 180%; --y: -20%; } /* right 180, up 20 */ .positioning-box5-right-12 { --x: 200%; } /* right 200 */ /* "Collect To Advance" (box 6) : left */ .positioning-box6-left-1 { --y: 40%; } /* down 40 */ .positioning-box6-left-2 { --x: -100%; } /* left 100 */ .positioning-box6-left-3 { --x: -100%; } /* left 100 */ .positioning-box6-left-4 { --x: -20%; --y: 20%; } /* left 20, down 20 */ .positioning-box6-left-5 { } .positioning-box6-left-6 { --x: -100%; --y: 20%; } /* left 100, down 20 */ .positioning-box6-left-7 { --x: -200%; } /* left 200 */ .positioning-box6-left-8 { --x: -200%; } /* left 200 */ .positioning-box6-left-9 { --x: -180%; --y: 60%; } /* left 180, down 60 */ /* "Collect To Advance" (box 6) : right */ .positioning-box6-right-1 { --x: 100%; } /* right 100 */ .positioning-box6-right-2 { --x: 20%; --y: 20%; } /* right 20, down 20 */ .positioning-box6-right-3 { } .positioning-box6-right-4 { --y: 20%; } /* down 20 */ .positioning-box6-right-5 { --x: 100%; } /* right 100 */ .positioning-box6-right-6 { --x: 100%; --y: -20%; } /* right 100, up 20 */ .positioning-box6-right-7 { --x: 200%; --y: 20%; } /* right 200, down 20 */ .positioning-box6-right-8 { --x: 180%; --y: 20%; } /* right 180, down 20 */ .positioning-box6-right-9 { --x: 180%; --y: 20%; } /* right 180, down 20 */ /* "Inventory" (box 7) : left */ .positioning-box7-left-1 { --x: 20%; --y: -20%; } /* right 20, up 20 */ .positioning-box7-left-2 { } .positioning-box7-left-3 { } .positioning-box7-left-4 { --x: -100%; --y: -20%; } /* left 100, up 20 */ .positioning-box7-left-5 { --x: -80%; --y: -40%; } /* left 80, up 40 */ .positioning-box7-left-6 { --x: -100%; --y: -40%; } /* left 100, up 40 */ .positioning-box7-left-7 { --x: -200%; } /* left 200 */ .positioning-box7-left-8 { --x: -200%; } /* left 200 */ .positioning-box7-left-9 { --x: -200%; } /* left 200 */ /* "Inventory" (box 7) : right */ .positioning-box7-right-1 { --x: 100%; } /* right 100 */ .positioning-box7-right-2 { --x: 20%; --y: 20%; } /* right 20, down 20 */ .positioning-box7-right-3 { } .positioning-box7-right-4 { --y: 20%; } /* down 20 */ .positioning-box7-right-5 { --x: 100%; } /* right 100 */ .positioning-box7-right-6 { --x: 100%; } /* right 100 */ .positioning-box7-right-7 { --x: 200%; } /* right 200 */ .positioning-box7-right-8 { --x: 180%; --y: 20%; } /* right 180, down 20 */ .positioning-box7-right-9 { --x: 200%; } /* right 200 */ /* "Trading Shop" (box 8) : left */ .positioning-box8-left-1 { } .positioning-box8-left-2 { --x: 20%; } /* right 20 */ .positioning-box8-left-3 { } .positioning-box8-left-4 { --x: -80%; } /* left 80 */ .positioning-box8-left-5 { --x: -100%; --y: -20%; } /* left 100, up 20 */ .positioning-box8-left-6 { --x: -120%; } /* left 120 */ .positioning-box8-left-7 { --x: -200%; } /* left 200 */ .positioning-box8-left-8 { --x: -200%; } /* left 200 */ .positioning-box8-left-9 { --x: -200%; } /* left 200 */ /* "Trading Shop" (box 8) : right */ .positioning-box8-right-1 { } .positioning-box8-right-2 { --x: 80%; --y: 20%; } /* right 80, down 20 */ .positioning-box8-right-3 { --x: 20%; } /* right 20 */ .positioning-box8-right-4 { --x: 200%; } /* right 200 */ .positioning-box8-right-5 { --x: 180%; --y: -20%; } /* right 180, up 20 */ .positioning-box8-right-6 { --x: 100%; } /* right 100 */ .positioning-box8-right-7 { } .positioning-box8-right-8 { --x: 120%; --y: 20%; } /* right 120, down 20 */ .positioning-box8-right-9 { --x: 200%; } /* right 200 */ /* "New Gardens" (box 9) : left */ .positioning-box9-left-1 { --x: -80%; --y: -20%; } /* left 80, up 20 */ .positioning-box9-left-2 { } .positioning-box9-left-3 { --y: 20%; } /* down 20 */ .positioning-box9-left-4 { } .positioning-box9-left-5 { --y: 20%; } /* down 20 */ .positioning-box9-left-6 { --x: -100%; } /* left 100 */ .positioning-box9-left-7 { --x: -100%; } /* left 100 */ .positioning-box9-left-8 { --x: -100%; } /* left 100 */ .positioning-box9-left-9 { --x: -200%; } /* left 200 */ .positioning-box9-left-10 { --x: -200%; } /* left 200 */ .positioning-box9-left-11 { --x: -180%; --y: 20%; } /* left 180, down 20 */ .positioning-box9-left-12 { --x: -200%; } /* left 200 */ /* "New Gardens" (box 9) : right */ .positioning-box9-right-1 { --x: -20%; } /* left 20 */ .positioning-box9-right-2 { } .positioning-box9-right-3 { } .positioning-box9-right-4 { --x: 20%; --y: 40%; } /* right 20, down 40 */ .positioning-box9-right-5 { --x: 100%; } /* right 100 */ .positioning-box9-right-6 { --x: 100%; --y: -20%; } /* right 100, up 20 */ .positioning-box9-right-7 { --x: 90%; --y: 10%; } /* right 90, down 10 */ .positioning-box9-right-8 { --x: 100%; } /* right 100 */ .positioning-box9-right-9 { --x: 200%; } /* right 200 */ .positioning-box9-right-10 { --x: 160%; } /* right 160 */ .positioning-box9-right-11 { --x: 200%; } /* right 200 */ .positioning-box9-right-12 { --x: 200%; } /* right 200 */ /* "Skills Employed" (box 10) : left */ .positioning-box10-left-1 { --x: -100%; --y: -20%; } /* left 100, up 20 */ .positioning-box10-left-2 { --x: -20%; } /* left 20 */ .positioning-box10-left-3 { } .positioning-box10-left-4 { --x: -200%; } /* left 200 */ .positioning-box10-left-5 { --x: -120%; --y: 20%; } /* left 120, down 20 */ .positioning-box10-left-6 { --x: -100%; } /* left 100 */ .positioning-box10-left-7 { --x: -20%; --y: 20%; } /* left 20, down 20 */ .positioning-box10-left-8 { --x: -200%; } /* left 200 */ .positioning-box10-left-9 { --x: -200%; } /* left 200 */ /* "Skills Employed" (box 10) : right */ .positioning-box10-right-1 { } .positioning-box10-right-2 { } .positioning-box10-right-3 { } .positioning-box10-right-4 { --x: 100%; --y: -20%; } /* right 100, up 20 */ .positioning-box10-right-5 { --x: 120%; } /* right 120 */ .positioning-box10-right-6 { --x: 200%; } /* right 200 */ .positioning-box10-right-7 { --x: 180%; --y: -20%; } /* right 180, up 20 */ .positioning-box10-right-8 { --x: 100%; } /* right 100 */ .positioning-box10-right-9 { --x: 200%; } /* right 200 */ /* "Sheeba" (box 11) : left */ .positioning-box11-left-1 { --y: 40%; } /* down 40 */ .positioning-box11-left-2 { --x: -100%; } /* left 100 */ .positioning-box11-left-3 { --x: -100%; } /* left 100 */ .positioning-box11-left-4 { --x: -20%; --y: 20%; } /* left 20, down 20 */ .positioning-box11-left-5 { } .positioning-box11-left-6 { --x: -100%; --y: 20%; } /* left 100, down 20 */ .positioning-box11-left-7 { --x: -210%; --y: 30%; } /* left 210, down 30 */ .positioning-box11-left-8 { --x: -180%; --y: 40%; } /* left 180, down 40 */ /* "Sheeba" (box 11) : right */ .positioning-box11-right-1 { --x: 20%; --y: 20%; } /* right 20, down 20 */ .positioning-box11-right-2 { } .positioning-box11-right-3 { --y: 20%; } /* down 20 */ .positioning-box11-right-4 { --x: 120%; } /* right 120 */ .positioning-box11-right-5 { --x: 100%; } /* right 100 */ .positioning-box11-right-6 { --x: 100%; --y: -20%; } /* right 100, up 20 */ .positioning-box11-right-7 { --x: 200%; --y: 20%; } /* right 200, down 20 */ .positioning-box11-right-8 { --x: 180%; --y: 20%; } /* right 180, down 20 */ .positioning-box11-right-9 { --x: 180%; --y: 20%; } /* right 180, down 20 */ /* ╔═════════════════════════════════════════════════════════════════════════╗ */ /* ║ POSITIONING : FOOTER ║ */ /* ╚═════════════════════════════════════════════════════════════════════════╝ */ .positioning-box10-footer-1 { --x: -380%; } /* footer-left-380 */ .positioning-box10-footer-2 { --x: -240%; } /* left-240 */ .positioning-box10-footer-3 { --x: -160%; } /* left-160 */ .positioning-box10-footer-4 { --x: -80%; } /* left-80 */ .positioning-box10-footer-5 { } .positioning-box10-footer-6 { --x: 80%; } /* right-80 */ .positioning-box10-footer-7 { --x: 160%; } /* right-160 */ .positioning-box10-footer-8 { --x: 240%; } /* footer-right-380 */ .positioning-box10-footer-9 { --x: 300%; } /* footer-right-260 */ .positioning-box10-footer-10 { --x: 380%; } /* footer-right-380 */