index.css

:root {
    box-sizing: border-box;
    --White: hsl(0, 0%, 100%);
    --Light-pink: hsl(275, 100%, 97%);
    --Grayish-purple: hsl(292, 16%, 49%);
    --Dark-purple: hsl(292, 42%, 14%);
}


body {
    margin: 0px;
    background-color: var(--Light-pink);
}


#top-background {
    position: absolute;
    width: 100%;
    height: 30%;
    background-image: url('./assets/images/background-pattern-mobile.svg');
    background-repeat: no-repeat;
    background-clip: border-box;
    background-position: 0 -60px;
    background-size: cover;
}

@media screen and (min-width: 900px) {
    #top-background {
        position: absolute;
        width: 100%;
        height: 35%;
        background-image: url('./assets/images/background-pattern-desktop.svg');
        background-repeat: no-repeat;
        background-clip: border-box;
        background-position: 0 -30px;
        background-size: cover;
    }
}