body{
	background-color: #f2ddc4;
	/*background-image: url("Einladung2.PNG");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position:50% 50%;*/
}

form {
	width: 400px;
	height: 400px;
    border: 3px solid #417c7d;
	background-color: white;
	
	position:absolute; /*it can be fixed too*/
	left:0; right:0;
	top:0; bottom:0;
	margin:auto;

	/*this to solve "the content will not be cut when the window is smaller than the content": */
	max-width:100%;
	max-height:100%;
	overflow:auto;
}

footer {
	text-align: center;
	position:absolute;
    bottom: 0;
    width: 90%;
	padding-bottom: 3px;
}

h2{
	color: #417c7d;
	text-align: center;
}

label{
	color: #417c7d;
}

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

button {
    background-color: #417c7d;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

.container {
    padding: 16px;
}


/* For Mobile */
@media screen and (max-width: 540px) {
    form {
       width: calc(100% - 20px);
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    form {
	   width: calc(100% - 20px);
    }
}