.start-section-container { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; height: 1000px; } .start-section-left-column { display: flex; flex-direction: column; justify-content: center; align-items: center; align-items: start; width: clamp(360px, 60vw, 650px); } .start-section-left-column-title-nocolor { white-space: nowrap; font-family: Poppins; font-size: clamp(30px, 4.5vw, 64px); font-weight: 600; cursor: default; } .start-section-left-column-title-colored { font-family: Poppins; font-size: clamp(30px, 4.5vw, 64px); color: #FF6800; font-weight: 600; cursor: default; } .start-section-left-column-description { font-family: Poppins; font-size: clamp(12px, 1.5vw, 18px); line-height: clamp(24px, 3vw, 36px); color: #6B6B6B; width: clamp(200px, 30vw, 420px); margin: 24px 0px 30px 0px; cursor: default; } .start-section-left-column-button { background: #4C40F7; border-radius: 12px; font-family: Poppins; font-size: 18px; font-weight: 600px; color: white; padding: 20px; width: 200px; display: flex; justify-content: center; align-items: center; filter: drop-shadow(10px 10px 15px rgba(76, 64, 247, 0.5)); } .start-section-left-column-button:hover { cursor: pointer; background: #8982f0; scale: 1.1; transition-duration: 0.4s; } .start-section-right-column { display: flex; flex-direction: row; justify-content: start; width: 100%; height: 550px; } .start-section-right-column-canvas { position: relative; width: 100%; height: 100%; } .start-section-right-column-art-top-left-pill { position: absolute; width: 200px; height: 65px; left: 40px; top: 26px; background: #4C40F7; box-shadow: 0px 4px 21px rgba(15, 11, 83, 0.15); border-radius: 80px; display: flex; justify-content: center; align-items: center; } .start-section-right-column-art-top-right-pill { position: absolute; width: 177px; height: 400px; right: 115px; top: 0px; background: #4C40F7; border-radius: 80px; display: flex; justify-content: center; align-items: end; } .start-section-right-column-art-bottom-left-pill { position: absolute; width: 177px; height: 400px; right: 0; top: 150px; background: #FFCC00; border-radius: 80px; display: flex; justify-content: center; align-items: end; } .start-section-right-column-art-bottom-right-pill { position: absolute; width: 289px; height: 88px; top: 440px; background: #FFCC00; box-shadow: 0px 4px 21px rgba(186, 149, 0, 0.15); border-radius: 80px; display: flex; justify-content: center; align-items: center; } .start-section-right-column-subject-1-title { font-family: Poppins; color: white; font-size: 18px; font-weight: 600; line-height: 20px; white-space: pre-line; text-align: center; } .start-section-right-column-subject-1-photo { object-fit: contain; width: 271px; } .start-section-right-column-subject-2-photo { object-fit: cover; width: 260px; } .start-section-right-column-subject-2-title { font-family: Poppins; color: #2D2D2D; font-size: 18px; font-weight: 600; white-space: pre-line; text-align: center; } @keyframes twitch { 0% {scale: 1;} 5% {scale: 1.1;} 10% {scale: 1;} } @media only screen and (min-width: 750px) { .start-section-container { height: 600px; flex-direction: row; } .start-section-left-column-title-nocolor { font-size: clamp(28px, 4.2vw, 64px); } .start-section-left-column-title-colored { font-size: clamp(28px, 4.2vw, 64px); } .start-section-left-column-description { font-size: clamp(12px, 1.5vw, 18px); line-height: clamp(24px, 3vw, 36px); width: clamp(200px, 30vw, 390px); margin: 20px 0px 26px 0px; margin-top: clamp(20px, 2.5vw, 50px); margin-bottom: clamp(26px, 3vw, 65px); } .start-section-left-column-button { font-size: clamp(13px, 1.6vw, 20px); padding: clamp(15px, 1.8vw, 25px); width: clamp(150px, 17vw, 250px); } .start-section-right-column { width: 100%; height: clamp(100%, 50vw, 750px) } .start-section-right-column-art-top-left-pill { width: clamp(120px, 20vw, 250px); height: clamp(60px, 7vw, 80px); left: initial; right: min(200px, 20vw); top: 26px; } .start-section-right-column-art-top-right-pill { width: clamp(150px, 18vw, 180px); height: clamp(380px, 45vw, 480px); left: initial; right: 0px; top: 0px; } .start-section-right-column-art-bottom-left-pill { width: clamp(150px, 18vw, 180px); height: clamp(350px, 42vw, 480px); left: initial; right: min(200px, 20vw); top: 120px; } .start-section-right-column-art-bottom-right-pill { width: clamp(120px, 20vw, 250px); height: clamp(60px, 7vw, 80px); right: 0px; top: clamp(400px, 47vw, 500px); } .start-section-right-column-subject-1-title { font-size: clamp(12px, 1.4vw, 21px); } .start-section-right-column-subject-1-photo { width: clamp(220px, 27vw, 290px); } .start-section-right-column-subject-2-photo { width: clamp(220px, 23vw, 275px); margin-right: 20px; } .start-section-right-column-subject-2-title { font-size: clamp(12px, 1.4vw, 21px); } } @media only screen and (min-width: 1050px) { .start-section-right-column-art-bottom-right-pill { right: -4vw; } }