.start-section-container { display: flex; flex-direction: row; justify-content: center; align-items: center; height: 600px; } .start-section-left-column { display: flex; flex-direction: column; justify-content: center; align-items: center; align-items: start; min-width: min(55vw, 800px); } .start-section-left-column-title-nocolor { 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: 250px; height: 88px; right: 300px; 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: 592px; } .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: 850px) { .start-section-left-column-title-nocolor { font-size: clamp(30px, 4.5vw, 64px); } .start-section-left-column-title-colored { font-size: clamp(30px, 4.5vw, 64px); } .start-section-left-column-description { font-size: clamp(12px, 1.5vw, 18px); line-height: clamp(24px, 3vw, 36px); width: clamp(200px, 30vw, 420px); 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%; max-width: 370px; height: clamp(100%, 50vw, 750px) } .start-section-right-column-art-top-left-pill { width: clamp(120px, 20vw, 250px); height: clamp(60px, 7vw, 80px); right: min(200px, 20vw); top: 26px; } .start-section-right-column-art-top-right-pill { width: clamp(150px, 18vw, 180px); height: clamp(340px, 40vw, 480px); right: 0px; top: 0px; } .start-section-right-column-art-bottom-left-pill { width: clamp(150px, 18vw, 180px); height: clamp(340px, 40vw, 480px); right: min(200px, 20vw); top: 120px; } .start-section-right-column-art-bottom-right-pill { width: clamp(120px, 20vw, 250px); height: clamp(60px, 7vw, 80px); left: clamp(0px, 16vw, 190px); top: clamp(350px, 42vw, 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, 21vw, 280px); } .start-section-right-column-subject-2-photo { width: clamp(500px, 60vw, 650px); } .start-section-right-column-subject-2-title { font-size: clamp(12px, 1.4vw, 21px); } } @media only screen and (min-width: 1000px) { } @media only screen and (min-width: 1500px) { } @media only screen and (min-width: 1700px) { }