Making a web page fit the screen

Question

I have a style that I'm trying to implement into my web page.

.dp-htkhbrvt {
  align-items: flex-start;
  background-color: #fafffc;
  border: 0.07vw none;
  display: flex;
  height: 71.11vw;
  padding: 0 0.01vw;
  width: 100.0vw;
}

.dp-htkhbrvt .text-7 {
  color: var(--black);
  margin-left: 4.38vw;
  margin-top: 68.89vw;
  min-height: 1.11vw;
  min-width: 3.4vw;
}

.dp-htkhbrvt .text-6 {
  color: var(--black);
  margin-left: 1.39vw;
  margin-top: 68.89vw;
  min-height: 1.11vw;
  min-width: 2.36vw;
}

.dp-htkhbrvt .flex-col {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3.4vw;
  margin-left: 23.68vw;
  margin-top: 13.26vw;
  min-height: 57.85vw;
  width: 64.79vw;
}

.dp-htkhbrvt .logo-option-2 {
  height: 5.35vw;
  margin-left: 7.36vw;
  width: 14.86vw;
}

.dp-htkhbrvt .overlap-group {
  height: 49.1vw;
  position: relative;
  width: 64.79vw;
}

.dp-htkhbrvt .log-in-card {
  align-items: center;
  background-color: #ffffff;
  border-radius: 0.35vw;
  box-shadow: 0.0vw 0.62vw 3.19vw #0000001a;
  display: flex;
  flex-direction: column;
  gap: 1.39vw;
  height: 27.08vw;
  left: 0;
  padding: 2.78vw 2.08vw;
  position: absolute;
  top: 0;
  width: fit-content;
}

.dp-htkhbrvt .text-1 {
  color: var(--black);
  margin-top: -0.07vw;
  width: fit-content;
}

.dp-htkhbrvt .type-bar-icon-right {
  gap: 16.53vw;
  height: 3.26vw;
  padding: 0.9vw 0.69vw 0.9vw 0.0vw;
}

.dp-htkhbrvt .group-8 {
  align-self: stretch;
  height: 1.46vw;
  margin-right: -0.14vw;
  min-width: 6.67vw;
  position: relative;
}

.dp-htkhbrvt .text_label {
  color: var(--black);
  direction: rtl;
  font-weight: 400;
  left: 0;
  line-height: normal;
  opacity: 0.5;
  position: absolute;
  top: 0;
}

.dp-htkhbrvt .type-bar-icon-left {
  padding: 0.9vw 0.69vw;
}

.dp-htkhbrvt .icon-eye {
  height: 1.67vw;
  min-width: 1.67vw;
}

.dp-htkhbrvt .text-2 {
  align-self: stretch;
  color: #000000cc;
  flex: 1;
  margin-top: -0.05vw;
  opacity: 0.5;
}

.dp-htkhbrvt .text-3 {
  align-self: stretch;
  color: var(--black);
  flex: 1;
  font-family: var(--font-family-arimo);
  font-size: var(--font-size-m);
  letter-spacing: 0;
  text-decoration: underline;
}

.dp-htkhbrvt .primary-action-btn {
  background-color: var(--main);
  border-radius: 0.35vw;
  height: 3.47vw;
  min-width: 25.35vw;
  position: relative;
}

.dp-htkhbrvt .text-4 {
  color: var(--black);
  left: 10.07vw;
  position: absolute;
  top: 0.9vw;
}

.dp-htkhbrvt .text-5 {
  color: var(--black);
  text-align: center;
  width: fit-content;
}

.dp-htkhbrvt .illustration-1 {
  height: 24.31vw;
  left: 24.38vw;
  position: absolute;
  top: 24.79vw;
  width: 40.42vw;
}

.dp-htkhbrvt .text {
  direction: rtl;
  font-weight: 400;
  line-height: normal;
}

.dp-htkhbrvt .type-bar-icon {
  align-items: center;
  border: 0.05vw solid;
  border-color: var(--black);
  border-radius: 0.35vw;
  display: flex;
  justify-content: flex-end;
  width: 25.35vw;
}

<input type="hidden" id="anPageName" name="page" value="dp-htkhbrvt" />
<div class="container-center-horizontal">
  <div class="dp-htkhbrvt text-14px screen">
    <div class="text-7 text">צור קשר</div>
    <div class="text-6 text">אודות</div>
    <div class="flex-col">
      <img class="logo-option-2" src="{% static 'images/img/logo.svg' %}" alt="logo option 2" />
      <div class="overlap-group">
        <div class="log-in-card">
          <h2 class="text-1 text h2">כניסה למערכת</h2>
          <div class="type-bar-icon-right type-bar-icon">
            <div class="group-8">
              <div class="text_label text">שם משתמש</div>
            </div>
          </div>
          <div class="type-bar-icon-left type-bar-icon">
            <img class="icon-eye" src="{% static 'images/img/eye.svg' %}" alt="icon-eye" />
            <div class="text-2 text text">סיסמה</div>
          </div>
          <!-- <div class="text-3 text">שכחתי סיסמה</div> -->
          <div class="primary-action-btn">
            <div class="text-4 text text">התחברות</div>
          </div>
          <p class="text-5 text text-14px">עוד לא הצטרפתם אלינו? לחצו כאן</p>
        </div>
        <img class="illustration-1" src="{% static 'images/img/illu.svg' %}" alt="illustration 1" />
      </div>
    </div>
  </div>
</div>

Could someone please help me make the entire thing fit my screen? What happens now is that the screen has a scrollbar, and you have to scroll to see some of the elements. I want everything to fit in my screen, or any resolution for that matter. In other words, I want the entire thing to "shrink" and fit in any given desktop resolution (not even mobile, just desktop)

Would very much appreciate any help!

Thank you!