Как сделать чтоб при маштабировании отдалялся не только текст?

Question

IDBB @IDBB

HTML
CSS

Как сделать чтоб при маштабировании отдалялся не только текст?

Как сделать чтоб при маштабировании отдалялся не только текст?
Вот код HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,500&family=Open+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <title>CROWDME</title>
</head>
<body>

<div class="container">
   <div class="container-title">
        <img class="green-image" src="%D0%B7%D0%B5%D0%BB%D1%91%D0%BD%D1%8B%D0%B5%20%D0%BF%D0%B0%D0%BB%D0%BE%D1%87%D0%BA%D0%B8.PNG" alt="зелёные полоски" width="37" height="42">
        <div class="crowdme-title">crowdme</div>
    <div class="container-menu">
        <div class="menu-text">home</div>
        <div class="menu-text">how it works</div>
        <div class="menu-text">discover a project</div>
        <div class="menu-text">blog</div>
        <div class="menu-text">find out more</div>
    </div>
    </div>
    <div class="container-button">
        <div class="login">login</div>
    </div>
</div>

<div class="almost-background">
    <img class="first-bg" src="%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B9%20%D1%84%D0%BE%D0%BD%202.png" alt="первый фон" width="100%">
</div>

</body>
</html>

И CSS тоже:

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;

    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}


/* КОНТЕЙНЕР */

.container {
    text-transform: uppercase;
    display: flex;
    margin-left: 15px;
    width: 100%;
}

.container-title {
    display: flex;
    background-position: center;
}

.green-image {
    margin-top: 20px;
    margin-left: 130px;
}

.crowdme-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 31px;
    margin-top: 27px;
    margin-left: 7px;
    color: #6d6e70;
}

.container-menu {
    display: flex;
    margin-top: 39px;
    margin-left: 117px;
    color: #adadad;
    font-size: 16px;
    height: 22px;
}

.menu-text {
    margin-right: 28px;
    line-height: 1;
    padding: 3px;
}

.menu-text:hover {
    color: rgb(32, 47, 229);
    border-radius: 5px;
    transition: .2s;
}

.menu-text:hover:after {
    opacity: 1;
}

.menu-text:after {
    content: "";
    display: block;
    padding-top: 0.55px;
    width: 100%;
    border-bottom: 2px solid rgb(32, 47, 229);
    opacity: 0;
}

.menu-text:last-child {
    margin-right: 0;
}

.container-button {
    margin-top: 31px;
    margin-left: 74px;

    display: inline-block;
    color: #fff;
    background-color: #bcda5c;
    height: 37px;
    width: 115px;
    border-radius: 15px;
}

.container-button:hover {
    color: #bcda5c;
    background-color: rgb(48, 99, 237);
}

.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 37px;
}


/* ПОЧТИ ФОН */
.almost-background {
    background-size: cover;
}

.first-bg {
}