body {
    margin: 0;
    padding: 0;
    background: #f5f5f5;
}


div.feedback-cover {
    display: inline-block;
    align-self: center;
    background: #fefefe;
    width: 100%;
    max-width: 720px;
}


header {
    text-align: center;
    padding: 20px 3% 5px;
    color: #3f3f3f;
}
header h1 {
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 1px 1px #abe7ff;
}
header p {
    color: #3f3f3f;
}


/* brief */
div.brief h3 {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
div.brief p {
    margin: 10px 0 25px;
    color: #4f4f4f;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}
/* feedback */
main form {
    margin: 20px auto;
    padding: 10px 0 20px;
    max-width: 580px;
}
main form h3 {
    margin: 20px 3%;
}
main form * {
    box-sizing: border-box;
}
main div {
    margin: 20px 3%;
}
select {
    display: block;
    width: 100%;
    height: 35px;
    border-radius: 4px;
    margin: 4px 0;
}
main input {
    display: block;
    border-radius: 5px;
    padding: 5px;
    width: 100%;
    height: 35px;
    margin: 4px 0;
}
.b-colour {
    border-color: lightblue;
}
main textarea {
    display: block;
    padding: 5px;
    width: 100%;
    height: 60px;
    border-radius: 5px;
    min-height: 30px;
    resize: vertical;
    margin: 4px 0;
}
main button {
    background: #fff;
    border-radius: 8px;
    padding: 5px 10px;
    margin: 5px 3%;
}
main button:hover {
    background: #002550;
    color: #fff;
}
main button:active {
    color: #abe7ff;
}

/* effect */
main input:focus {
    background: rgb(246, 245, 255);
}





@media screen and (min-width: 680px) {

    div.feedback-cover {
        width: auto;
        min-height: 680px;
        margin: 40px 5% 80px;
        padding: 40px 50px;
        box-shadow: 4px 4px #a5a5a5;
    }

    header {
        border-bottom: 1px solid #004381;
        padding-bottom: 20px;
    }

    div.brief p {
        font-size: 17px;
    }

    main input {
        padding: 10px;
    }

    main textarea {
        height: 90px;
    }

}





/* remove it when the page ready */
div.feedback-cover {
    position: relative;
}
div.dev {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
    background: rgba(161, 161, 161, 0.3);
    padding: 50px 35px;
    width: 90%;
    text-align: center;
}