HTML/CSS - HELP others || Updated [2021] Online Editor and JavaScript Compiler

html

<!--Created by Glira Matteo ® and with my friends help-->
<!-- HELP others || COLLABORATION CODES advertise code -->
<!--Update: UI and style updated 10/12/2020 -->
    
   <!DOCTYPE html>
<html>
    <head>
        <title>HELP Plus +</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://material.io/resources/icons/?search=heart&icon=favorite_border&style=baseline">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Kufam&display=swap" rel="stylesheet">    
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mansalva&display=swap" rel="stylesheet"></head>
    <body>
   
   
    <div id="loader">
        <div id="text"><div id="h">H</div><div id="plus">+</div></div>
        <div id="scritta" >Help Plus</div>        </div> 
    
    
    
    
      <div class="title1"><h2>HELP Plus +</h2></div>

css

* {
    font-family: 'Kufam', cursive;
    display:scroll ;
    color: grey;}
body {
    background-color: #202020;
    display:block;
 }
 
h2 {
    box-shadow:6px 6px 12px  rgb(0,0,0,0.2),-6px -6px 12px  rgb(0,0,0,0.2);
    padding:10px;
    color: #ffffff;
    border-radius:7px;
    font-size:1.7em;
}
ul1{
    font-size:1.5em;
}
h5{
    font-size:1.2em;
    font-family:Courier New;
    text-align:left;
}
.created, .a{

BROWSER

Console