Making a web page fit the screen - html

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!