﻿body
{
    margin: 0;
    font-family: 'Trebuchet MS';
    background-color: #eeeeee;
}

form
{
    width: 70%;
    margin: auto;
    position: relative;
}

#weiss
{
    
    background-color: #fff;
    padding: 1em;
    box-shadow: 0px 0px 2px #808080;
    border-radius: 7px;
    margin-top: 1em;
}

#right
{
    position: absolute;
    right: 1em;
    top: 1em;
}

#name
{
    position: relative;
}

#andere-t
{
    position: relative;
    left: 1.5em;
}

input[type=text]
{ 
    border:2px solid #ccc;
    border-radius: 5px;
}

textarea
{
    height: 10em;
    width: 20em;
    padding:5px; 
    border:2px solid #ccc;
    border-radius: 5px;
    color: #808080;
    resize: none;
}

#senden
{
    width: 100%;
    height: 4em;
    background-color: #0f71ba;
    background: -moz-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3fa4f0), color-stop(100%, #0f71ba));
    background: -webkit-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
    background: -o-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
    background: -ms-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
    background: linear-gradient(to bottom, #3fa4f0 0%, #0f71ba 100%);
    margin-top: 2em;
    box-shadow: 0 0 20px #808080;
    border-radius: 7px;
}

#submit
{
    border: none;
    color: #fff;
    background: rgba(0, 0, 0, 0.00);
    height: inherit;
    width: inherit;
    padding: 0;
    cursor: pointer;
    font-size: 3em;
}

/*media query*/
@media screen and (max-device-width: 880px) 
{
    section h1
    {
        font-size: 3em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    
    #right
    {
        position: relative;
        top: 0;
        left: 0.12em;
    }

    #email-t
    {
        font-size: 2em;
    }
    
    #andere-t
    {
        font-size: 0.65em;
    }
    
    #name-t
    {
        font-size: 2em;
    }
    
    input[type=checkbox]
    {
        height: 3em;
        width: 3em;
    }

    .check
    {
        font-size: 3em;
    }

    #nachricht-a
    {
        font-size: 1.7em;
        width: 28em;
    }

    #submit
    {
        font-size: 2.5em;
    }
}

@media screen and (max-width: 770px)
{
    #right
    {
        position: relative;
        top: 0;
        left: 0.12em;
    }
}