body{
    margin:0;
    background-color: lightsteelblue;
}
p#alert{
    font-weight: bolder;
    margin:0;
    padding:20px;
    background-color:yellow;
    color: red;
    text-align: center;
/*    width: 50%;*/
/*    margin: auto;*/
}
.center{
    text-align:center;
    background:green;
    color:#fff;
}
.left{
    text-align:right;
    font-size:x-small;
    vertical-align:text-top
}
.header{
    color: white;
    background-color:black;
    /*background-image: linear-gradient(to bottom,#588c7e  60%,#f2ae72 90% );*/
    
    margin:0;
    padding: 1px 20px 20px 20px;
    margin-botom: 40px;
    text-align: center;
    text-shadow: 1px 1px 1px  gray;
}
.header p{
    font-size: 2em;
    margin-top: 10px;
}
.header p:hover{
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}
.form{
    background-color: rgb(0, 115, 170);
    padding: 10px;
}
.form input{
    padding: 4px 10px;	
    display: block;
    margin:  6px auto;
    color: white;	
    background-color: black;
    font-weight: bold;

}
.form input:focus{
	outline-style:solid;
	outline-color:yellow;
	outline-offset:-3px;
	
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}