[Projeto] Criando um layout sem scroll Flexbox: alinhando textos e imagens

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPG-DND</title>
    <link rel = "stylesheet" href="atividade.css">
</head>
<body class="ficha">
    <header></header>
    <main class="conteudo">
        <h1><span>Lenda de Ayra, a Bruxa das Sombras</span></h1>
        <p><span>Eldoria, Ayra, a jovem bruxa das sombras, vivia em uma torre na Floresta Sombria. Um dia, um grupo de aventureiros pediu sua ajuda para libertar um dragão que aterrorizava uma aldeia, acreditando que ele estava sob um feitiço maligno.</span></p>
        <img src="bruxa.jpg" alt="bruxa">
    </main>
</body>
</html>

CSS


body{
    background-color: burlywood;
    font-family: 'Times New Roman', Times, serif;
}
h1{
    border: 10px solid black;
    padding: 10px;
}
p{
    border: 10px solid black;
    padding: 10px;
}
.ficha{
    height: 100vh;
    box-sizing: border-box;
}
.conteudo{
    display: flex;
    align-items: center;
}