.start-section-container { display: flex; flex-direction: column-reverse; justify-content: start; align-items: center; } .start-section-left-column { display: flex; flex-direction: column; justify-content: center; align-items: center; align-items: start; width: 100% } .start-section-left-column-title-nocolor { white-space: nowrap; font-family: Poppins; font-size: 8vw; font-weight: 600; cursor: default; } .start-section-left-column-title-colored { white-space: nowrap; font-family: Poppins; font-size: 8vw; color: #FF6800; font-weight: 600; cursor: default; } .start-section-left-column-description { font-family: Poppins; font-size: 2.8vw; line-height: 5vw; color: #6B6B6B; width: 80%; 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: clamp(200px, 40vw, 400px); 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: clamp(500px, 105vw, 620px); scale: 0.9; } .start-section-right-column-canvas { position: relative; width: 100%; height: 100%; } .start-section-right-column-art-top-left-pill { position: absolute; width: clamp(120px, 37.5vw, 220px); height: clamp(50px, 15vw, 80px); right: clamp(120px, 43vw, 500px); 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; white-space: pre-line; } .start-section-right-column-art-top-right-pill { position: absolute; width: clamp(80px, 25vw, 140px); height: clamp(270px, 75vw, 400px); left: clamp(120px, 43vw, 500px); top: 0px; background: #4C40F7; border-radius: 65px; display: flex; justify-content: center; align-items: end; } .start-section-right-column-art-bottom-left-pill { position: absolute; width: clamp(80px, 25vw, 140px); height: clamp(270px, 75vw, 400px); right: clamp(120px, 43vw, 500px); top: 120px; background: #FFCC00; border-radius: 65px; display: flex; justify-content: center; align-items: end; } .start-section-right-column-art-bottom-right-pill { position: absolute; width: clamp(120px, 37.5vw, 220px); height: clamp(50px, 15vw, 80px); top: clamp(300px, 80vw, 450px); left: clamp(120px, 43vw, 500px); background: #FFCC00; box-shadow: 0px 4px 21px rgba(186, 149, 0, 0.15); border-radius: 80px; display: flex; justify-content: center; align-items: center; white-space: pre-line; } .start-section-right-column-subject-1-title { font-family: Poppins; color: white; font-size: clamp(10px, 3vw, 21px); font-weight: 600; line-height: clamp(18px, 4.5vw, 25px); white-space: pre-line; text-align: center; } .start-section-right-column-subject-1-photo { object-fit: contain; width: clamp(128px, 40vw, 220px); } .start-section-right-column-subject-2-photo { object-fit: cover; width: clamp(128px, 40vw, 220px); margin-right: 7px; } .start-section-right-column-subject-2-title { font-family: Poppins; color: #2D2D2D; font-size: clamp(10px, 3vw, 21px); font-weight: 600; line-height: clamp(18px, 4.5vw, 25px); 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 { width: clamp(360px, 60vw, 650px); } .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, 165px); height: clamp(380px, 45vw, 480px); left: initial; right: 0px; top: 0px; } .start-section-right-column-art-bottom-left-pill { width: clamp(150px, 18vw, 165px); height: clamp(380px, 45vw, 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); left: initial; right: 0px; top: clamp(400px, 47vw, 500px); } .start-section-right-column-subject-1-title { font-size: clamp(12px, 1.4vw, 21px); line-height: clamp(24px, 2.8vw, 35px); } .start-section-right-column-subject-1-photo { margin-bottom: -2px; width: clamp(230px, 27vw, 290px); } .start-section-right-column-subject-2-photo { margin-bottom: -2.3px; width: clamp(230px, 25vw, 290px); 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; } }