body, html {
    width: 100%; 
    height: 100%;
    background-size: cover; 
    font-family: Helvetica, sans-serif;
    background-color: black;
}


.box{
    margin-top: 6%;
    height: 350px;
    width: 600px;
    border: 1px solid #2f4f4f;
    background-color: #080808;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%); /*ggf löschen */
    box-sizing: border-box;
}

.logo {
    width: 400px;
    position: absolute;
    top: -115px;
    left: calc(50% - 200px);
}



.form
{
    margin-top: 17%;
}


input, select, textarea {

    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 

    width: 80%; /* Full width */
    padding: 12px; /* Some padding */  
    background-color: #080808;
    border: 0px;
    border-bottom: 1px solid #dddddd;
    margin: 10% ; 
    outline: none;  
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 0%; /* Add a top margin */
    font-size: x-large;
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }

  #tasteSenden {
    width: 80%;
    height: 60px;
    background: #303030;
    color: #e0e0e0;
    border: none;
    font-size: x-large;
    margin-left: 10% ; 
    

}

input:valid{
    outline: none;
    color: #ffffff; 
    border-color: #ffffff;
    /*background-size: 100% 100%;*/
}

input:invalid{
    outline: none;
    color: #c40000; 
    border-color: #c40000;
   /* background-size: 100% 100%;*/ 
}

#footer {
    position : absolute;
    bottom : 0;
    height : 40px;
    width: 500px;
    left: calc(50% - 100px);
}

@media screen and (max-height: 700px) and (orientation:landscape) {
    

    
    .box{
        margin-top: 0%;
        height: 250px;
        width: 600px;
        border: 1px solid #2f4f4f;
        background-color: #080808;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%); /*ggf löschen */
        box-sizing: border-box;
    }


  }