html {
    scroll-behavior: smooth;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    scroll-padding-top: 15%;
}
body {
    background-color: #333;
    color: #fff;
}
#groupName {
    color: #81ca9e;
}
h1, h2, h3, p {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    left:45%;
    right:45%;
    text-align: center;
}
a {
    color: #81ca9e;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    color: #81ca9e;
}
section {
    display:grid;
    place-items: right;
    place-content: center;
    min-height: 95vh;
    scroll-snap-align: center;
    scroll-snap-type: y proximity;
}
.Cards{
    display:flex;
    flex-wrap:wrap;
    text-align:center;
    justify-content: center;
}
.Card{
    width:100%;
    max-width:30%;
    border:1px solid #81ca9e;
    margin:5px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 10px;
}
.LinkIcons {
    display:flex;
    flex-wrap:wrap;
    text-align:center;
    justify-content: center;
}
.LinkIcons *:hover {
    background-color: #81ca9e27;
    color: #81ca9e;
}
.LinkIcons > a:hover > p {
    color: #81ca9e;
}
.LinkIcons *:active {
    box-shadow:
        inset -2px -2px 3px rgba(255, 255, 255, 0.6),
        inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
/* Media query for mobile devices */
@media (max-width: 900px) {
    .Cards{
        display:flex;
        flex-direction: column;
        text-align:center;
        justify-content: center;
        
    }
    .Card{
        width:100%;
        border:1px solid #81ca9e;
        margin:5px;
        padding-right: 8px;
        padding-left: 8px;
        border-radius: 10px;
        max-width: fit-content;
    }
}