
@media screen and (min-width: 500px) {
    
        .grid_main {
            grid-area: main;
            margin: 0;
            padding: 5%;
        }
            .search_bar {
                display: flex;    
                flex-direction: row;
                align-items: center;
                width: 100%;
                height: 46px;
                max-width: 440px;
                background-color: white;
                border-radius: 20px;
                border-width: 2px;
                border-style: outset;
                margin-top: 10px;
                margin-bottom: 10px;
                padding-right: 20px;
                padding-left: 20px;
                font-size: 19px;
            }
                .text_input {
                    width: 340px;
                    height: 40px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    padding-right: 16px;
                    padding-left: 16px;
                    background-color: lightgrey;
                    border-radius: 10px;
                    font-size: 17px;
                    color: black;
                    cursor: text;
                    transition: 0.5s;
                }
                .text_input:hover {
                    box-shadow: 0 0 3px 3px darkslategrey;
                }
                .text_input:focus {
                    box-shadow: 0 0 3px 3px #480304;
                    color: #480304;
                }
                .text_input_large {
                    width: 100%;
                    max-width: 300px;
                    height: 40px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    padding-right: 16px;
                    padding-left: 16px;
                    background-color: lightgrey;
                    border-radius: 10px;
                    font-size: 17px;
                    color: black;
                    cursor: text;
                    transition: 0.5s;
                }
                .text_input_large:hover {
                    box-shadow: 0 0 3px 3px darkslategrey;
                }
                .text_input_large:focus {
                    box-shadow: 0 0 3px 3px #480304;
                    color: #480304;
                }
                .file_input {
                    width: 340px;
                    height: 40px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    padding-top: 8px;
                    padding-right: 16px;
                    padding-bottom: 7px;php
                    padding-left: 16px;
					background-color: lightgrey;
                    border-radius: 10px;
                    font-size: 17px;
                    color: black;
                    cursor: text;
                    transition: 0.5s;
                }
                .file_input:hover {
                    box-shadow: 0 0 3px 3px darkslategrey;
                }
                .file_input:focus {
                    box-shadow: 0 0 3px 3px #480304;
                    color: #480304;
                }
                
                .full_img {
                    width: auto;
                    height: auto;
                    max-width: 100%;
                    max-height: 100%;
                }
    
                .submit_input {
                    width: 120px;
                    height: 40px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    border-radius: 10px;
                    text-align: center;
                    font-size: 17px;
                    color: black;
                    cursor: pointer;
                    transition: 0.5s;
                }
                .submit_input_large {
                    width: 160px;
                    height: 40px;

                    margin-top: 10px;
                    margin-bottom: 10px;
                    border-radius: 10px;
                    text-align: center;
                    font-size: 17px;
                    color: black;
                    cursor: pointer;
                    transition: 0.5s;
                }
                .submit_input_xl {
                    width: 220px;
                    height: 40px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    border-radius: 10px;
                    text-align: center;
                    font-size: 17px;
                    color: black;
                    cursor: pointer;
                    transition: 0.5s;
                }
}

@media screen and (min-width: 500px) {
                
                .form_outline {
                    width: 94%;
                    height: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    padding-top: 25px;
                    padding-right: 12px;
                    padding-bottom: 25px;
                    padding-left: 12px; 
                    margin-top: 20px;
                    margin-bottom: 20px;
                }
                .form_error {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: center;
                    padding: 0;
                }
                .form_layout {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    padding: 0;
                }
    
                .ul_form_outline {
                    width: 94%;
                    height: auto;
                    padding: 25px;
                    margin-top: 20px;
                    margin-bottom: 20px;
                    background-color: firebrick;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
                .ul_form_error {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: center;
                    padding: 0;
                }
                .ul_form_layout {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    padding: 0;
                }
                .blog_outline {
                    width: 100%;
                    height: auto;
                    min-height: 80px;
                    padding: 25px;
                    margin-top: 20px;
                    margin-bottom: 20px;
                    background-color: firebrick;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                }
                    .blog_topdate {
                        width: 100%;
                        height: auto;
                        padding-top: 10px;
                        padding-right: 10px;
                        padding-left: 10px;
                        background-color: lightgrey;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        justify-content: center;
                    }
                    .blog_toptext {
                        width: 100%;
                        height: auto;
                        min-height: 50px;
                        padding-right: 10px;
                        padding-bottom: 10px;
                        padding-left: 10px;
                        margin-bottom: 25px;
                        background-color: lightgrey;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: center;
                    }
}


