@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;
        }



        .buttons {
            display: flex;
            justify-content: center;
            width: 500px;
            justify-self: center;
            height: 450px;
            flex-direction: column;
            justify-content: space-around;
        }



        .delete_comments, .zapis_na_priem, .price_list_redact {
            width: 400px;
            height: 50px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            background-color: #689CD2;
            list-style: none;
            text-decoration: none;
            transition: 0.5s;
            font-size: 35px;
            border-radius: 23px;
        }

        .delete_comments:hover, .zapis_na_priem:hover {
            background-color: #6bc4fa;
            transition: 0.5s;
        }


        .form_enter {
            display: grid;
            justify-content: center;
            width: 500px;
            margin: auto;

        }


        #Submit {
            padding: 10px;
            border: none;
            background-color: #4E69FD;
            color: #fff;
            font-weight: 600;
            border-radius: 5px;
            transition: 0.3s;
        }
        #Submit:hover {
          background-color: #0B2197;
        }







        @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;
            }
        }