body {
    text-align: center;
     background-image: url("img/walter.jpg");
    background-attachment: fixed;
    background-position: left; 
    margin: 0;
}
footer{
    margin: 0;
    height: 0%;
}





div.principal {
    /*background-color: darkblue;*/
    background: linear-gradient(196deg, #00d2ff 0%, #3a47d5 100%);
    width: 300px;
    margin: auto;
    border-radius: 30px;
    height: 450px;
    padding-top: 10px;
}
.animate{
    -webkit-animation: flip 1s linear 0s 1 normal ;
    animation: flip 1s linear 0s 1 normal ;
   }
   
   @-webkit-keyframes flip {
     0%{
       -webkit-transform: translateY(0);
       transform: rotateY(0deg);
     }
     50%{
       -webkit-transform: translateY(180);
       transform: rotateY(180deg);
     }
     100%{
       -webkit-transform: translateY(0);
       transform: rotateY(0deg);
     }
   }
   
   @keyframes flip {
     0%{
       transform: rotateY(0deg);
     }
     50%{
       transform: rotateY(180deg);
     }
     100%{
       transform: rotateY(0deg);
     }
   }
p {
    color: #e0dfdc;
    font-weight: bold;
}
h1{
    color: #e0dfdc;
    font-weight: bold;  
    text-align: center;
    font-size: 100pt;

}

#p_inicial {
    color: #e0dfdc;
    font-weight: bold;
    margin-left: 5%;
    margin-top: 0px;
    font-size: 25pt;
    line-height: 50px;
}

#numero_atomico {
    float: left;
    margin-left: 5%;
    margin-top: 0px;
    font-size: 25pt;
    line-height: 50px;
}

#massa_atomica {
    float: right;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 0px;
    font-size: 25pt;
    line-height: 50px;
}

#simbolo_quimico {
    text-align: center;
    letter-spacing: 0px;
    margin-top: 0px;
    padding-bottom: 0%;
    font-size: 100pt;
    line-height: 50px;
}

#nome {
    text-align: center;
    letter-spacing: 0px;
    margin-top: 0px;
    padding-bottom: 0%;
    font-size: 25pt;
    line-height: 50px;
}

#estado_natural {
    text-align: center;
    letter-spacing: 0px;
    margin-top: 0px;
    padding-bottom: 0%;
    font-size: 20pt;
    line-height: 20px;
}

#tipo {
    text-align: center;
    letter-spacing: 0px;
    margin-top: 0px;
    padding-bottom: 0%;
    font-size: 20pt;
}

#massa_atomica {
    text-align: right;
}

input {
    width: 70px;
}

#inpNatomico,
#inpMatomica,
#inpSimbolo,
#inpNome,
#inpEstado,
#inpTipo,
#btnNatomico,
#btnMatomica,
#btnSimbolo,
#btnNome,
#btnEstado,
#btnTipo {
    display: none;
}

.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
	background-color:#ffffff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
	background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
	background-color:#f6f6f6;
}
.button:active {
	position:relative;
	top:1px;
}