h2 {
    text-align: center;
    margin-bottom: 20px;
}

body {
    background-color: #f5f5f5;
    color: rgb(0, 0, 0);
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px;
}

body>main>section {
    background-color:
        #c0cdc4;
    border: 2px solid #38893d;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

body>main>section {
    display: grid;
    grid-template-columns: repeat(auto-fit);
    gap: 20px;
    margin-top: 20px;
    padding-left: 3%;
    padding-right: 3%;
}

main>section>img {
    border-radius: 50%;
    padding: 20px;
    max-width: 25%;
    height: auto;
}

.tileContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.tile {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tags {
    color: #f5f5f5;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tags span {
    background-color: #145305;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
}

.tile:hover {
    background-color: #a4a4a4;
    transform: translateY(-5px);
    transition: 0.2s ease;
}

article.tile>img {
    border-radius: 50%;
    padding: 20px;
}

footer {
    width: fit-content;
    margin: 0 auto;
}

ul, li:first-child {
    font-weight: bold;
}

ul, li:last-child {
    font-weight:lighter;
}

ul>li:nth-of-type(even) {
    color: #3c5231;
}

ul>li:nth-child(odd) {
    color: #a2a230;
}


footer ul {
    display: flex;
    padding: 0;
    width: fit-content;
}

footer ul li {
    list-style-type: none;
    margin: 10px;
}

footer ul li svg {
    width: 50px;
    height: 50px;
    transition: color .2s ease;
}

footer ul li svg:hover {
    color:
        green;
}

footer ul li svg:active {
    color:
        rgb(255, 0, 0);
}