#contactform {
    width: 60%;
    margin: 40px auto 100px auto ;

    font-family: "PT Sans";
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
}

#contactform h1 {
    font-style: italic;
    font-weight: 700;
}

#contactform .caption {
    font-style: italic;
    font-weight: 700;
    font-size: 2.3rem;
    margin-bottom: 4px;
}

#contactform select {
    font-size: 2.0rem;
    border: 2px solid rgb(0, 184, 9);
    border-radius: 6px;
    padding: 4px;
    width: 50%;
}

#contactform textarea {
    height: 200px;
}

#contactform textarea,
#contactform .input-field,
#contactform #sendbutton {
    font-family: "PT Sans";
    font-size: 2.1rem;
    border: 2px solid rgb(0, 184, 9);
    border-radius: 6px;
    padding: 4px;
    width: 50%;
}

#contactform input[type=checkbox] {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    position: relative;
    top: -2px;
    margin-left: 5px;
}

#contactform p {
    font-size: 2.1rem;
}

#contactform #sendbutton {
    background-color: rgb(0, 184, 9);
    color: white;
    border: 2px solid rgb(0, 184, 9);
    cursor: pointer;
}

#contactform #sendbutton:hover {
    background-color: rgb(0, 133, 7);
    color: white;
}

#contactform .wronginput {
    border: 2px solid red;
}

#contactform .wrongcheckbox {
    outline:2px solid red;
    outline-offset: -1px;
}

#contactform #success {
    color: rgb(0, 70, 0);
}

#contactform #failed {
    color: rgb(204, 0, 0);
}

@media (min-width: 0px) and (max-width: 600px){

    #contactform{
        width: 95%;
    }

    #contactform select,
    #contactform textarea,
    #contactform .input-field,
    #contactform #sendbutton {
        width: 98%;
    }
}

@media (min-width: 601px) and (max-width: 999px){

    #contactform select,
    #contactform textarea,
    #contactform .input-field,
    #contactform #sendbutton {
        width: 80%;
    }

    #contactform select {
        font-size: 2rem;
    }
}

@media (min-width: 361px) and (max-width: 600px){

    #contactform{
        width: 80%;
    }
}