Bom na página de contato o formulário que era suposto de aparecer ali simplesmente não aparece, nenhum input aparece, já tentei mudar algumas coisas, tirar e colocar em outras divs mas mesmo assim o problema continua. Outra dúvida que estou tendo é que as divs centrais estão passando por cima do meu menu superior, como faço para colocar ele por cima de tudo?
/* geral */
*{
margin: 0;
padding: 0;
font-family: 'Open Sans', Arial, sans-serif;
}
h1, h2, h3{
font-family: 'Roboto Slab', sans-serif;
}
div{
background-color: #e1e1e1;
}
/* menu superior nav */
.links{
width: 100%;
height: 50px;
position: fixed;
display: flex;
}
.links label{
padding: 13px 0;
flex-grow: 1;w
cursor: pointer;
transition: all .4s;
text-align: center;
font-size: 100%;
font-weight: Bold;
color: #ffffff;
background-color: rgba(46,83,35,.8);
}
.links label:hover{
background-color: rgba(115,184,98,.8);
color: #111111;
}
/* Botões */
.scroll{
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.scroll input{
display: none;
}
.bloc{
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
display: flex;
}
/* páginas */
#inicio{
background-color: #D1C1C0;
}
#historia{
background-color: #C9E4C2;
}
#galeria{
background-color: #D1C1C0;
}
#contato{
background-color: #C9E4C2;
}
#content{
position:relative;
height: 85%;
width: 85%;
margin-top: 3%;
}
/* rolamento e transição de páginas */
.sections{
transition: all .8s;
}
#rd_historia:checked ~ .sections{
margin-top: -100vh;
}
#rd_galeria:checked ~ .sections{
margin-top: -200vh;
}
#rd_contato:checked ~ .sections{
margin-top: -300vh;
}
/* pagina inicio */
#homelogo{
display: flex;
margin-left: auto;
margin-right: auto;
padding-top: 5%;
}
#uphome{
height: 50%;
width: 100%;
}
#dwhome{
text-align: justify;
height: 50%;
width: 80%;
margin-left: auto;
margin-right: auto;
}
/* pagina historia */
#uphist{
text-align: justify;
padding-top: 2%;
height:40%;
width:80%;
margin-left: auto;
margin-right: auto;
}
#esqhist{
display: inline-block;
height:50%;
width:50%;
float:left;
margin-left: 9%;
}
#dirhist{
display: inline-block;
text-align: justify;
height:40%;
width:30%;
float:right;
margin-right: 10%;
}
#imgmap{
display: flex;
margin: auto;
width: 350px;
height: ;
}
/* pagina galeria*/
#gameimg{
height: 220px;
width: 272px;
}
#upgale{
margin-top: 2%;
text-align: center;
height: 48%;
width: 96%;
margin-left: auto;
margin-right: auto;
}
#dwgale{
text-align: center;
height: 48%;
width: 96%;
margin-left: auto;
margin-right: auto;
}
/* pagina contato */
#upcont{
text-align: center;
width: 80%;
height: 60%;
margin-top: 1%;
margin-left: auto;
margin-right: auto;
}
#dwcont{
text-align: center;
width: 80%;
height: 30%;
margin-left: auto;
margin-right: auto;
}
.socicon{
height: 68px;
width: 68px;
}
/* TESTES */
#centlogo{
position: relative;
top: 40%;
transform: translateY(-50%);
}
#esqlogo{
position: relative;
top: 70%;
transform: translateY(-50%);
}
<!DOCTYPE html>
<head>
<html lang="pt-br">
<meta charset="UTF-8">
<title>Pandora</title>
<link href="css/estilo.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Slab:400,700|Roboto:400,700" rel="stylesheet">
</head>
<body>
<!-- Menu superior -->
<nav class="links">
<label for="rd_inicio">ÍNICIO</label>
<label for="rd_historia">HISTÓRIA</label>
<label for="rd_galeria">GALERIA</label>
<label for="rd_contato">CONTATO</label>
</nav>
<div class="scroll">
<!-- Botões menu superior -->
<input type="radio" name="grupo" id="rd_inicio" checked="true">
<input type="radio" name="grupo" id="rd_historia">
<input type="radio" name="grupo" id="rd_galeria">
<input type="radio" name="grupo" id="rd_contato">
<!-- Páginas -->
<section class="sections">
<!-- pagina 1 inicio -->
<section class="bloc" id="inicio">
<div id="content">
<div id="uphome">
<img src="imgs/logoext.png" id="homelogo" alt="logo do jogo: pandora e a pedra do suspiro">
</div>
<div id="dwhome">
<h2> O Projeto:</h2>
<p> A proposta deste projeto é fazer um jogo de RPG estilo fantasia onde o jogador precisará seguir a história cumprindo desafios e explorando os mapas. O foco principal será a exploração e o mapeamento. Por isso o local onde se passa a história (reino de Synph) será bastante complexo com muitas histórias, lendas, figuras e lugares para serem descobertos. O enredo tem como objetivo principal desconstruir a ideia de “herói”, tornando os personagens mais reais e com defeitos marcantes, como ambição e egoísmo por exemplo. Já os combates ficam em um segundo plano, apenas como uma diversão, já que o jogador não precisará subir de nível para zerar o jogo. E além de completar a história e descobrir lugares novos, o jogador poderá ter outros objetivos importantes como o de encontrar todos os tesouros perdidos e completar a coleção de cartas mágicas.</p>
</div>
</div>
</section>
<!-- pagina 2 sobre -->
<section class="bloc" id="historia">
<div id="content">
<div id="uphist">
<h2>O Enredo:</h2>
<p> Pandora vivia uma vida comum na Vila das Flores ao lado do seu pai Lortan, que sofria de uma terrível doença. Até que um certo dia, enquanto ela e sua amiga Chloe coletavam itens pela Floresta das Luzes, Pandora acabou acidentalmente encontrando o tesouro mais procurado pelo reino inteiro: a Pedra do Suspiro.</p>
<p> Ao revelar o que achou para seu pai ele ficou surpreso e decidiu que deveriam guardar o tesouro pois tinha um grande valor sentimental para ele. Sem conseguir compreender isso, Pandora decide agir contra a vontade de Lortan e foge de casa para vender o tesouro e com o dinheiro pagar a cura de sua doença. Porém, o que ela e Chloe não imaginavam é que essa pequena viagem até a Guilda dos Guardiões era na verdade apenas o início de uma longa aventura.</p>
</div>
<div id="esqhist">
<img src="imgs/mapa.png" id="imgmap" alt="mapa do reino de synph">
</div>
<div id="dirhist">
<h2>O Cenário:</h2>
<p>O jogo se passa em um lugar mágico chamado Reino de Synph e cuja fonte de energia é a Árvore da Vida localizada na Floresta Sagrada. De clima temperado e próximo ao Mar Azul, ele é composto por várias criaturas mágicas e lugares fantásticos prontos para serem explorados. Porém, esse lugar é mais conhecido por todo o mundo pelos seus tesouros perdidos e seus corajosos (e ambiciosos) caçadores.</p>
</div>
</div>
</section>
<!-- pagina 3 processo -->
<section class="bloc" id="galeria">
<div id="content">
<div id="upgale">
<h2>Imagens:</h2>
<br />
<img src="imgs/img01.png" id="gameimg" alt="imagem do jogo: personagem encontra morto por cogumelos">
<img src="imgs/img02.png" id="gameimg" alt="imagem do jogo: era uma vez a fada fiuly">
<img src="imgs/img03.png" id="gameimg" alt="imagem do jogo: caverna com estatua dourada">
<img src="imgs/img04.png" id="gameimg" alt="imagem do jogo: menu dentro do jogo">
</div>
<div id="dwgale">
<h2>Trilha Sonora:</h2>
<br />
<iframe width="80%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/281557932&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</section>
<!-- pagina 4 receitas -->
<section class="bloc" id="contato">
<div id="content">
<!-- formulario de contato de email -->
<div id="upcont">
<h3>Entre em contato conosco:</h3>
<form>
<div class="emailform">
<input type="text" placeholder="NOME"> <input type="email" placeholder="EMAIL"> <br />
<input type="text" placeholder="ASSUNTO"> <br />
<input type="text" placeholder="MENSAGEM"> <br />
<input type="button" name="ENVIAR">
</div>
</form>
</div>
<div id="dwcont">
<a href="http://www.facebook.com" class="socicon"><img src="imgs/facebook.png"></a>
<a href="http://www.twitter.com" class="socicon"><img src="imgs/twitter.png"></a>
<a href="http://www.youtube.com" class="socicon"><img src="imgs/youtube.png"></a>
</div>
</div>
</section>
</section>
<!-- rodapé -->
<section></section>
</div>
</body>
</html>