Minha resolução - 08 Consolidando o seu conhecimento - Aula 1 | JavaScript: manipulando o DOM

index.html

<!DOCTYPE html>
<html lang="pt-br">
  <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>Manipulando o DOM|Aula 1</title>

    <!-- CSS -->
    <link rel="stylesheet" href="css.css" />
    <!-- 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"
    />
    <!-- font -->

    <section class="container">
      <div class="trono"></div>
      <p id="texto">O Inverno está chegadno</p>
      <button id="btn">Mudar Frase</button>
    </section>

    <script>
      const textos = [
        'A guerra dos tronos começou',
        'Palavra de rei não volta atrás',
        'Você irá Proteger Muralha',
        'O Inverno está chegando'
      ]
      let p = document.querySelector('#texto')

      btn.addEventListener('click', () => {
        let random = Math.round(Math.random() * textos.length)
        let text = textos[random]
        p.innerText = `${text}`
      })
    </script>
  </body>
</html>

css.css

:root {
  --cor-fundo: #373737;
  --cor-font: #ece8e8;  
  --main-cinza: #CCCCCC;
  --main-branco: #FFFFFF;
  --main-preto: #000000;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--cor-fundo);
  color: var(--cor-font);
  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%;
}

#btn {
  position: absolute;
  bottom: 20px;
  padding: 20px;
  border-radius: 10px;
  font-size: 1.5rem;
  outline: none;
  border: none;
  transition: 1s;
}

#btn:hover {
  background: #656c6d;
  color: var(--cor-font)
}