* {
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: bisque;
    font-size: 16pt;
    font-family: 'Smooch Sans', sans-serif;
}

a {
    text-decoration: none;
    color: darkturquoise;
}

a:visited {
    color: none;
}

#mainPageMain {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    width: 60%;
    height: 100%;
    padding: 2rem;
}

.jumbotronSection {
    background-color: beige;
    padding: 4rem;
    border-radius: 2rem;
}

.searchSection {
    background-color: beige;
    padding: 1rem;
    border-radius: 2rem;
}

.searchSection > form {
    display: flex;
    flex-direction: column;
}

.searchSection > form > input[type="text"] {
    width: 100%;
    height: 40px;
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px black dashed;
    margin-bottom: 2rem;
}

.categories {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.categoryCard {
    display: flex;
    flex: 1 0 40%;
    flex-direction: row;
    background-color: whitesmoke;
    gap: 1rem;
    margin: 1rem;
    text-decoration: none;
    color: black;
    align-items: center
}

.categoryCard > img {
    clip-path: circle(81% at 0% 50%);
}

.categoryCard > p {
    padding-right: 4rem;
    font-size: 28pt;
    font-weight: 700;
}

.goodsSection {
    background-color: whitesmoke;
    padding: 2rem;
    border-radius: 2rem;
}

.goods {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 2rem;
}

.goodsCard {
    display: flex;
    flex: 1 0 30%;
    flex-direction: column;
    background-color: whitesmoke;
    gap: 1rem;
    margin: 1rem;
    align-items: center;
}

.goodsCard > .description {
    height: 100%;
}

.goodsLink {
    text-decoration: none;
    color: coral;
    padding: 5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: inline-block;
    border: solid;
    border-radius: 1rem;
    border-color: coral;
    border-width: 1px;
}

.userCard {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    gap: 2rem;
}

.avatar {
    height: 5rem;
    border-radius: 50%;
}

.searchDataSection {
    background-color: whitesmoke;
    border-radius: 2rem;
    padding: 2rem;
}

.goodsSearches {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 2rem;
}