HTML/CSS - prueba [Q&A answer for @Insomnio L] Online Editor and JavaScript Compiler

html

<!-- Created by Insomnio L-->
<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Insomnio L noticias</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <header>
        <a href="#" class="logo">
            <span>InsomnioL</span>News </a>
        <input type="checkbox" id="menu-bar">
        <label for="menu-bar" class="fa fa-bars "></label>
        <nav class="navbar">
         <a href="#inicio">inicio</a>
            
         <a href="#noticias">noticias</a>
           
         <a href="#sobre_nosotros">sobre nosotros </a>
           

css

/* Created by Insomnio L */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap');
:root{
--naranja: rgb(255, 176, 100);
--ostion: rgb(200, 200, 200);
--morado: rgb(239, 154, 238);
--claro:  rgb(202, 166, 226);
--cielo:  rgb(149, 209, 228);
--degradado:linear-gradient(90deg,var(--cielo),var(--claro))
}
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
border: none;
text-transform: capitalize;
}
*::selection{
    background:var(--naranja);
    color: white;
}

BROWSER

Console