@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); /* прямой импорт шрифта с google fonts */

body { /* отключение отступов, добавление шрифта и цвета бекграунда */
    padding: 0;
    background-color:#26517C;
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
}

html, body {
    height: 100%;
    margin: 0;
}


.wrapper {
    min-height: 100%;
}


    /* main */

        main {
            display: grid;
            align-items: center;
            flex-direction: column;

            margin: 100px 0;
        }


        #name {grid-area: name;}
        #family {grid-area: family;}
        #email {grid-area: email;}
        #message {grid-area: message;}

        form {
            width: 1000px;

            font-size: 20px;
            margin: 100px auto;

            text-align: center;
        }

        .form_block {
            margin: 0 auto;
        }

        .info {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;

            margin: 20px auto;
        }

        #Message, #Name, #Family, #Telephone {
            font-size: 20px;
            font-family: 'Source Sans Pro', sans-serif;
            border-radius: 20px;
            border: 0;
            padding: 10px;
            box-shadow:3px 5px 6px 2px #0b90ae;
        }

        #Message {
            resize: vertical;
            width: 650px;
        }

        #name {

        }

        #family{
            margin: 0 40px;
        }

        #email {

        }

        #Submit {
            padding:10px;
            border:none;
            background-color:#4E69FD;
            color:#fff;
            font-weight:600;
            border-radius:5px;

            transition: 0.3s;
        }#Submit:hover {
            background-color: #0B2197;
        }#Submit:focus {
            background-color: #6F78AC;
        }


        .typing_message {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;


            width: 100%;
            height: 212px;
        }

        .comments {
            margin: 100px 0 0 0;
        }

        .message {
            text-align: justify;
            width: 1000px;

            margin-left: 150px;

            border-bottom: 1px solid #568bf0;
            border-top: 1px solid #568bf0;
        }


        @media only screen and (max-width: 1000px) {
            .info {
                width: 700px;
            }

            #email {
                margin-top: 20px;
            }

            #family {
                margin:0 0 0 50px;
            }

            #message {
                width: 700px;
            }

            .message {
                width: 700px;
            }
        }

        @media only screen and (max-width: 860px) {
            form {
                width: 700px;
                margin: 0;
            }

            .form_block {
                width: 700px;
            }

            .info {
                width: 350px;
            }

            #email {
                margin-top: 20px;
            }

            #family {
                margin:0 0 0 0;
            }

            #message { /* айдишник div в секции комментария */
                width: 700px;
            }

            #Message { /* textarea */
                width: 500px;
            }

            .message { /* оставленный комментарий */
                width: 500px;
            }

            .comments {
                margin: 100px 0 0 0;
            }

            .typing_message {
                width: 700px;
            }
        }

        @media only screen and (max-width: 700px) {
            form {
                width: 700px;
                margin: 0;
            }

            .form_block {
                width: 700px;
            }

            .info {
                width: 350px;
            }

            #email {
                margin-top: 20px;
            }

            #family {
                margin: 20px 0 0 0;
            }

            #message { /* айдишник div в секции комментария */
                width: 700px;
            }

            #Message { /* textarea */
                width: 500px;
            }

            .message { /* оставленный комментарий */
                width: 500px;
                margin: 0 0 0 100px;
            }

            .comments {
                margin: 100px 0 0 0;
            }

            .typing_message {
                width: 700px;
            }
        }

        @media only screen and (max-width: 620px) {
            form {
                width: 400px;
                margin: 0;
            }

            .form_block {
                width: 400px;
            }

            .info {
                width: 350px;
            }

            #email {
                margin-top: 20px;
            }

            #family {
                margin: 20px 0 0 0;
            }

            #message { /* айдишник div в секции комментария */
                width: 400px;
            }

            #Message { /* textarea */
                width: 300px;
            }

            .message { /* оставленный комментарий */
                width: 575px;
                margin: 0 0 0 10px;
            }

            .comments {
                margin: 100px 0 0 0;
            }

            .typing_message {
                width: 400px;
            }
        }

        @media only screen and (max-width: 500px) {
            form {
                width: 400px;
                margin: 0;
            }

            .form_block {
                width: 400px;
            }

            .info {
                width: 350px;
            }

            #email {
                margin-top: 20px;
            }

            #family {
                margin: 20px 0 0 0;
            }

            #message { /* айдишник div в секции комментария */
                width: 400px;
            }

            #Message { /* textarea */
                width: 300px;
            }

            .message { /* оставленный комментарий */
                width: 350px;
                margin: 0 0 0 10px;
            }

            .comments {
                margin: 100px 0 0 0;
            }

            .typing_message {
                width: 400px;
            }
        }

        @media only screen and (max-width: 400px) {
            form {
                width: 400px;
                margin: 0;
            }

            .form_block {
                width: 400px;
            }

            .info {
                width: 350px;
            }

            #email {
                margin-top: 20px;
            }

            #family {
                margin: 20px 0 0 0;
            }

            #message { /* айдишник div в секции комментария */
                width: 400px;
            }

            #Message { /* textarea */
                width: 300px;
            }

            .message { /* оставленный комментарий */
                width: 350px;
                margin: 0 0 0 10px;
            }

            .comments {
                margin: 100px 0 0 0;
            }

            .typing_message {
                width: 400px;
            }
        }