/* Import parent stylesheet */
@import url(content.css);

main {
    margin-inline: 30%;
}

h2 {
    text-align: center;
    margin-block-end: 1.5em;
}

.links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1em;
}

.links a {
    display: flex;
    text-decoration: none;
    text-align: center;
    gap: 0.5em;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

.link {
    border-radius: 10px;
}

.link#youtube {
    background-color: #ee002f;
    color: #ffdad8;
}

.link#fedi {
    background-color: #ff5540;
    color: #ffdad4;
}

.link#codeberg {
    background-color: #007dbd;
    color: #cce5ff;
}

.link#keyoxide {
    background-color: #7859ff;
    color: #e6deff;
}

@media screen and (max-width:800px) {
    main {
        margin-inline: 10%;
    }

    .links {
        grid-template-columns: 1fr;
    }
}