Minha resolução | JavaScript: manipulando o DOM | Alura

Minha resolução

/* HTML */

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Manipulando o DOM - Aula 1</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

<!-- fonte  --> 
<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600&display=swap" rel="stylesheet">
<!-- fonte  -->

<section class="container">
<div class="trono"></div>
<p id="texto">O inverno está chegando</p>
</section>
</body>
</html>

/* CSS */

* {
    margin: 0;
    padding: 0;
  }

  body {
    background: var(--cor-fundo);
    color: var(--cor-fonte);
    font-family: 'Cinzel', serif;
    font-size: 38px;
    user-select: none;
    transition: 2s;
  }

  .container {
    height: 90vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .trono {
    background-image: url("https://caelum-online-public.s3.amazonaws.com/1369-alura-mais-dark-mode/trono-preto.png");
    background-size: cover;
    width: 450px;
    height: 350px;
    margin-bottom: 30px;
    position: relative;
    top: 10%;
    right: 5%;
  }

/* JS */

     <script>
        const text = "Olá Mundo!";

        document.getElementById('texto').innerText=`${text}`
    </script>