body {
    /* background: rgb(221, 147, 147); */
    background-image: url("./resources/leaf1.jpg");
    background-size: cover;
    font-family: 'Comfortaa', cursive;
}

body img {
    border-radius: 10px;
    border-image-outset: 12px;
    border: 1px double rgb(160, 233, 160);
}

img:hover {
    box-shadow: 0.5px 0.5px 5px rgb(74, 77, 74);
}

.fruits {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: 1px solid rgb(56, 231, 32);
    row-gap: 5px;
    column-gap: 5px;
    margin-top: 40px;
    background: rgb(238, 243, 238);
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgb(97, 207, 23);
}

.fruits div:nth-of-type(1) {
    width: 1800px;
    height: 70px;
}

.fruits div {
    width: 400px;
    height: 300px;
    margin: 10px 20px 0px 20px;
}

.fruits div:nth-of-type(1) {
    grid-row: 1;
    grid-column: 1/5;
}

.fruits div:nth-of-type(6),
.fruits div:nth-of-type(7),
.fruits div:nth-of-type(8),
.fruits div:nth-of-type(9),
.fruits div:nth-of-type(14),
.fruits div:nth-of-type(15),
.fruits div:nth-of-type(16),
.fruits div:nth-of-type(17) {
    width: 400px;
    height: 100px;
    margin-top: 0px;
    text-align: center;
}


/* ---------- berris -----------  */

.berries {
    margin-top: 50px;
    width: 100%;
    height: 550px;
    border: 1px solid rgb(56, 231, 32);
    background: rgb(238, 243, 238);
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgb(97, 207, 23);
}

.berries div {
    margin: 10px;
    width: 280px;
    height: 280px;
    float: left;
}

.berries div:nth-of-type(1) {
    width: 1800px;
    height: 70px;
}

.berries div:nth-of-type(8),
.berries div:nth-of-type(9),
.berries div:nth-of-type(10),
.berries div:nth-of-type(11),
.berries div:nth-of-type(12),
.berries div:nth-of-type(13) {
    width: 280px;
    height: 150px;
    margin-top: 0px;
    text-align: center;
}


/* --------------------------------------  */

.fruits div:nth-of-type(1),
.berries div:nth-of-type(1) {
    font-size: 35px;
    font-family: 'Kaushan Script', cursive;
}

input[value="Add to cart"] {
    padding: 10px 20px;
    background: rgb(214, 117, 133);
    border-radius: 10px;
    border: 1px solid rgb(255, 144, 163);
    margin: 5px;
}

input[value="Add to cart"]:hover {
    cursor: pointer;
    box-shadow: 1px 1px 5px rgb(19, 187, 19);
}

input[type="number"] {
    padding: 10px 20px;
    background: rgb(151, 231, 45);
    border-radius: 10px;
    border: 1px solid rgb(142, 255, 36);
}

input[type="number"]:hover {
    box-shadow: 1px 1px 5px rgb(19, 187, 19);
}

div>p:nth-of-type(1) {
    font-size: 20px;
    padding: 2px auto;
    margin: 5px auto;
    font-weight: 600;
    color: rgb(9, 102, 9);
}


/* --------Media Queries ------------  */

@media (max-width: 768px) {
    .fruits {
        background: none;
        border: none;
        box-shadow: none;
    }
    .berries {
        margin-top: 50px;
        width: 100%;
        border: 1px solid rgb(56, 231, 32);
        background: none;
        border-radius: 10px;
        box-shadow: 1px 1px 5px rgb(97, 207, 23);
        border: none;
        box-shadow: none;
    }
    .berries div {
        margin: 10px;
        width: 280px;
        height: 280px;
        float: left;
    }
}