css not working

by CoolBuys1290

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    *{
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .blur_container{
      border-radius: 20px;
      width:450px;
      height: 450px;
      background-image: url("https://picsum.photos/450/450");
      display:flex;
      justify-content: center;
      align-items: center;
    }
    .blur_cont{
      width: 425px;
      height: 425px;
      color: rgb(0, 0, 0);
      border-radius: 20px;
      background-color: #aec2eb48;
      vertical-align: middle;
      text-align: center;
      backdrop-filter: blur(8px);
      overflow-y: scroll;
    }

    .body_text{
      padding: 20px;
    }

    /* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #9e9a9a;
}
 
/* Handle */
html ::-webkit-scrollbar-thumb {
   height: 7rem;
    border-radius: 0.8rem;
    border: 0.2rem solid transparent;
    background-clip: content-box;
    background-color: #000000;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(0, 0, 0); 
}
  </style>
</head>
<body>
  <div class="blur_container">
    <div class="blur_cont">
      <p class="body_text">
        <span style="font-size:60px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Purchace</span><br> 
        Premium to veiw
      </p>
      <br>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam incidunt cumque veniam eum aperiam quis commodi sequi recusandae voluptates nam eligendi unde quos quia modi rem ratione, aliquam eos numquam?
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam id omnis cupiditate non at dolore! Quia odio quos numquam beatae, libero neque vel quam excepturi dolores. Eum quidem expedita iure!
        Lorem...