bl-frontend-rs/css/start.css

.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;
    }
}