Rodapé na base da página | HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

Pessoal, estou tentando fazer uma página seguindo os passos do curso de HTML5 e CSS3, mas não consigo nem fixar na base o rodapé e nem deixar o conteúdo do site acima do rodapé. Podem me ajudar? : O código HTML é esse:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Personagens - Mesa do Almeida</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="produtos.css">
</head>

<body>
    <div id="tudo">
        <header>
            <div class="caixa">
                <h1><img src="leitor.png"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Personagens</a></li>
                        <li><a href="sobre.html">Sobre o Mundo</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <main>
            <ul class="personagens">
                <li id="thorku">
                    <h2>Thorku Dunduur</h2>
                    <img src="thorku.png">
                    <p>Raça: Anão
                        <br>Classe: Clérigo</p>
                    <p></p>
                </li>
                <li id="haltar">
                    <h2>Haltar de Turi</h2>
                    <img src="haltar.png">
                    <p>Raça: Anão</p>
                    <p>Classe: Paladino</p>
                </li>
                <li id="icaro">
                    <h2>Icaro Pedyo Anar</h2>
                    <img src="icaro.png">
                    <p>Raça: Humano
                        <br>Classe: Ladino</p>
                    <p></p>
                </li>
                <li id="cleo">
                    <h2>Cleo de Hemera</h2>
                    <img src="cleo.png">
                    <p>Raça: Golias
                        <br>Classe: Paladino</p>
                    <p></p>
                </li>
            </ul>
        </main>

        <footer>
            <img src="dado.png">
            <p>&copy; Copyright Rafael Almeida</p>
        </footer>
    </div>
</body>

</html>

E o Código CSS é esse:

html body {
    position: relative;
    margin: 0;
    padding-bottom: 6rem;
    min-height: 100%;
  }
header{
    background: #ffffff;
    padding: 10px 0;
}
nav{
    position: absolute;
    top: 110px;
    right: 0;
}

.caixa{
    position: relative;
    width: 730px;
    margin: 0 auto;
}

nav li{
    display: inline;
    margin: 0 0 0 15px;
}

nav a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;

}
nav a:hover{/*rastreio de comportamento (hover=passar o mouse)*/
    color: #c78c19;
}

.personagens{
    width: 1100px;
    margin-left: 1100 auto;
    padding: 50px 50px;

}

.personagens li{
    display: inline-block;
    text-align: center;
    vertical-align: top;
    margin: 0 5px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.personagens h2{
    font-size: 20px;
    font-weight: bold;
    font-family: serif;
}

.personagens p{
    font-weight: bold;
    text-align: left;
    color: #000000;
}
.personagens li:hover{/*rastreio de comportamento (hover=passar o mouse)*/
    border-color: #c78c19;
}

.personagens li:hover h2{
    font-size: 21.2px;
}

.personagens li:active{/*Quando estiver clicado*/
    border: 0px 30px solid #c69c19;
    color: #c69c19;
}

.personagens li img:active{
    margin-top: 5px;
    box-sizing: border-box;
    border-radius: 10px;

}

#thorku img{
    padding-top: 82px;
}

#haltar img{
    padding-top: 105px;
    padding-bottom: 5px;
}

#icaro img{
    padding-top: 35px;
    padding-bottom: 9px;
}

#cleo img{
    padding-bottom: 15px;
}

main{
    margin: 0 0;
  padding-top: 20px;
  max-width: 640px;
  width: 94%;
}

footer{
    text-align: center;
    background-image: url("book.jpg");
    background-size: 33.3% 100%;
    background-image: linear-gradient(to bottom, rgba(219, 219, 219, 0.068) 1%,rgba(192, 192, 192, 0.469) 100%), url('book.jpg');
    border: 0 0 0 0 0 ;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
}

Agradeço a quem tiver disposição de ver essa bagunça.