[Projeto] Ajustando a altura da tela com CSS | Controlando o tamanho de elementos com Box Sizing

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>
        <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;
}