body {
    margin: 0;
    padding: 0;
}

h1, h2 {
    text-align: center;
}

#div-1 {
    margin-bottom: 25px;
    text-align: center;
}

#gridContainer {
    display: grid;
    width: 50%;
    margin: auto;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    grid-auto-rows: auto;
}

.article {
    border: 1px solid black;
    text-align: center;
    transition: 0.1s ease-in-out;
    grid-column: 1 / 4;
}

.article > p {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.article:hover {
    scale: 102.5%;
    cursor: pointer;
}

.icon {
    display: flex;
    flex-direction: column;
}

.icon > img:hover {
    cursor: pointer;
}

.icon > h3:hover {
    cursor: pointer;
}

.icon > img {
    width: 50px;
    height: auto;
    margin: auto;
}

.icon > h3 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

#div-2 {
    margin-top: 10px;
    text-align: center;
}

a {
    text-decoration: none;
}

.other-stuff {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.other-stuff.visible {
    opacity: 1;
}