body {
            padding: 5px;
            background-color: #f9f6e0;
            background-size: cover;
            font-family: Arial, Helvetica, sans-serif;
        
        }
        .head {
            padding: 3px;
            margin-left: 10%;
            margin-right: 10%;
            width: auto;
            height: auto;
            background-color: #fee8b8;
            vertical-align: top;
            border-radius: 10px;
        margin-bottom: 3px;
            
        }
        .inline {
            display:inline-block; /* Делаем блоки по горизонтали */
            display: -moz-inline-stack; /* Для FireFox 2, тот же самый, что и inline-block */
            vertical-align: center; /* Выравниваем их сверху */
            font-size:25px; /* Ставим дочкам размер шрифта, иначе примет значение родителя */
            font-family: Arial, Helvetica, sans-serif;
            zoom: 1;
            color: #321f18;
        margin-left: 3%;
        }
    .about {
    width: 80%; 
    margin-left: 10%; 
    margin-right: 10%;
    float: left;
    background-color: #d3afa9;
    height: 350px;
    
    }
    .goods {
    width: auto; 
    background-color: #fee8b8; 
    float: left; 
    margin-left: 10%; 
    margin-right: 10%;
    }
    .contact {
    width: auto; 
    float: left; 
    background-color: #7d5245; 
    margin-left: 10%; 
    margin-right: 10%;
    }
        .str1 {
            padding: 3px;
            margin: 1%;
            width: 46%;
            height: 40px;
            background-color: #d3afa9;
            vertical-align: top;
            float: left;
            border-radius: 10px; 
            font-size: 24px;
        }
        .str2 {
            padding: 3px;
            margin: 1%;
            width: 46%;
            height: 40px;
            background-color: #d3afa9;
            vertical-align: top;
            float: right;
            border-radius: 10px; 
            font-size: 24px;
        }
        .str3 {
            padding: 3px;
            margin: 1%;
            width: 46%;
            height: 40px;
            background-color: #d3afa9;
            vertical-align: top;
            float: left;
            border-radius: 10px; 
            font-size: 24px;
        }
        .str4 {
            padding: 3px;
            margin: 1%;
            width: 46%;
            height: 40px;
            background-color: #d3afa9;
            vertical-align: top;
            float: right;
            border-radius: 10px; 
            font-size: 24px;
        }
        p {
            color: #321f18;
            font-size: large;
            font-family: Arial, Helvetica, sans-serif;
            
        }
        a {
            text-decoration: none;
            color: darkblue;
            
        }
        a:hover {
            text-decoration: none;
            color: red;
        }
    .img_main {
    margin: 3%; 
    float: left; 
    width: 42%; 
    max-width: 500px;
    }
    @media only screen and (max-device-width: 580px) {

    .img_main {
    width: 95%;
    }
    .str1 {
    font-size: larger;
    }
    .str2 {
    font-size: larger;
    }
    .str3 {
    font-size: larger;
    }
    .str4 {
    font-size: larger;
    }
    .head {
            margin-left: 1%;
            margin-right: 1%;
    }
    .goods {
    margin-left: 1%; 
    margin-right: 1%;
    }
    .about {
    width: 98%; 
    height: auto;
    margin-left: 1%; 
    margin-right: 1%;
    
    }
    .contact {
    margin-left: 1%; 
    margin-right: 1%;
    }