HTML/CSS - A Broken Poet Series Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>Poem Page</title>
    </head>
        <div id="openback" class="hub">
    <header><p id="intro" class="hub">A Broken Poet Series</p>
    </header>
    <body>
        <p style="text-align:50%" id="tab" class="hub">Table of Contents:</p>
        </div>
<!--Links to each poem-->
        <nav>
            <ul id="toc">
                <li><a href="#SilentStreams" class="t1">Silent Stream</a></li>
                <li><a href="#LavendarFields" class="t1">Lavendar Fields</a></li>
                <li><a href="#EmptyHalls" class="t1">Empty Halls</a></li>
                <li><a href="#BrokenShards" class="t1">Broken Shards</a></li>
                <li><a href="#FoggyMirror" class="t1">Foggy Mirror</a></li>
                <li><a href="#SodaPop" class="t1">Soda Pop</a></li>
                <li><a href="#Imagination" class="t1">Imagination</a></li>
                <li><a href="#Forgotten" class="t1">Forgotten</a></li>
            </ul>
        </nav>   
<!--All Poems-->    
<section id="all-poems">   
    <section id="SilentStream" class="Poems">
Feb 5, 2022 <br>

css

html{
    text-align: center;
    border: 20px solid  rgb(151, 150, 150);
    background-color:  rgb(173, 173, 173);
}
#intro{
    font-size: xx-large;
    color:  rgb(59, 52, 52);
}
/*Table of Contents background*/
#toc{
    list-style-type: none;
    text-align: center;
    background-color:  rgb(165, 165, 165);
    border-radius: 30px;
    width: 120px;
    margin-left:40%;
    transition: background-color 1s, scale 3s;
}
/*Table of Contents background transition*/
#toc:hover{
    background-color:  rgb(134, 134, 134);
    scale: 1.1;
}

BROWSER

Console