Браузер не видит стили

let fullwindow = document.getElementById('fullblock');
let modal = document.getElementById('myModal');
let modalcontent = document.getElementsByClassName('modal-content')[0];
let loginlink = document.getElementsByClassName('loginandsignup')[0];

var elemclose = document.getElementsByClassName("close")[0];

loginlink.onclick = function() {
  modalcontent.style.display = "block";
}


elemclose.onclick = function() {
  modalcontent.style.display = "none";
}


window.onclick = function(event) {
  if (event.target == fullwindow) {
    modalcontent.style.display = "none";
  }
}

.modal {
  /*display: none;*/
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.modal-content {
  display: none;
  position: relative;
  background-color: #E1BEE7;
  margin: auto;
  padding: 0;
  border: 5px solid #7B1FA2;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #9C27B0;
  color: white;
}

.modal-body {
  padding: 2px 16px;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #9C27B0;
  color: white;
}

<div id="fullblock">


  <header id="pageHeader">
    <div class="headerinsides">
      <span class="flexcitylinkwrapper">
        <a href="#" class="flexcitylink">
                <span class="icon">
                        <svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
                </span>
      <span class="labelforicon">
                 Краснодар
                </span>
      </a>
      </span>
      <span class="intermediatespace">
                </span>
      <span class="telephonenumber">
                8 (800) 600 3900 (круглосуточно)
                </span>
      <span class="addressandworkschedule">
                    Адрес и график работы
                </span>
      <span class="payment">
                    Оплата
                </span>
      <span class="delivery">
                    Доставка
                </span>
    </div>
    <div class="headerinsidessecondrow">
      <!--<button class="catalogbutton">Каталог товаров</button>-->
      <button class="catalogbutton">Каталог товаров</button>

      <span class="betweenspace">
</span>

      <span class="findinfo">
        <input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
        <button class="searchbutton">Найти</button>
</span>

      <span class="secondbetweenspace">
</span>

      <span class="loginandsignup">
    <span class="loginsignupimg">
        <img src="../images/header_profile-icon.png">
    </span>
      <span class="loginsignuptext">
        Вход и регистрация
    </span>
      </span>

      <span class="basket">
    <span class="loginsignupimg">
        <img src="../images/header_cart-icon.png">
    </span>
      <span class="loginsignuptext">
        Корзина
    </span>
      </span>
    </div>
  </header>

  <div id="myModal" class="modal">


    <div class="modal-content">
      <div class="modal-header">
        <span class="close">&times;</span>
        <h2>Шапка модального окна</h2>
      </div>
      <div class="modal-body">
        <p>Какой-то текст в теле модального окна</p>
        <p>Ещё другой текст...</p>
      </div>
      <div class="modal-footer">
        <h3>Футер модального окна</h3>
      </div>
    </div>

  </div>

</div>