Adding CSS files in Blazor client-side app. Doesn't work properly

I made a HTML design for the mainLayout in my Blazor application. I used third party icons and fonts and all worked fine in a code editor. But how can I add all this to my Blazor client application now? I tried copy and paste my code in MainLayout.razor.css and MainLayout.razor.css but it didn't work properly, also, I don't understand how do I download icons and fonts in my MainLayout?

What should I get: img1

What do I get: img

My CSS:

/*========== VARIABLES CSS ==========*/
:root {
    --header-height: 3.5rem;
    --nav-width: 219px;
    /*========== Colors ==========*/
    --first-color: #6923D0;
    --first-color-light: #F4F0FA;
    --title-color: #19181B;
    --text-color: #58555E;
    --text-color-light: #A5A1AA;
    --body-color: #F9F6FD;
    --container-color: #FFFFFF;
    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;
    --normal-font-size: .938rem;
    --small-font-size: .75rem;
    --smaller-font-size: .75rem;
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
    /*========== z index ==========*/
    --z-fixed: 100;
}

@media screen and (min-width: 1024px) {
    :root {
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

/*========== BASE ==========*/
*, ::before, ::after {
    box-sizing: border-box;
}

body {
    margin: var(--header-height) 0 0 0;
    padding: 1rem 1rem 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
}

h3 {
    margin: 0;
}
....
....
....

My HTML:

@inherits LayoutComponentBase

<!--========== HEADER ==========-->
<header class="header">
  <div class="header__container">
    <img src="Resources/img6.jpg" alt="" class="header__img">

    <a href="#" class="header__logo">StockMarket</a>

        <div class="header__search">-->
          <input type="search" placeholder="Search" class="header__input">-->
          <i class='bx bx-search header__icon'></i>-->
        </div>-->

    <div class="header__toggle">
      <i class='bx bx-menu' id="header-toggle"></i>
    </div>
  </div>
</header>

<!--========== NAV ==========-->
<div class="nav" id="navbar">
  <nav class="nav__container">
    <div>
      <a href="#" class="nav__link nav__logo">
        <i class='bx bxs-disc nav__icon'></i>
        <span class="nav__logo-name">StockMarket</span>
      </a>

      <div class="nav__list">
        <div class="nav__items">
          <h3 class="nav__subtitle">Profile</h3>

          <a href="#" class="nav__link active">
            <i class='bx bx-home nav__icon'></i>
....
....
....

code structure