:root {
    --card-width: 400px;
    --card-spacing: 32px;
}

.main-content-homepage {
    margin: auto;
    padding: 0 32px 32px;
    /* at most two columns: */
    max-width: calc(2 * var(--card-width) + var(--card-spacing));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--card-spacing);
}


a {
    color: var(--font-color);
    text-decoration: none;
    font-weight: 600;
}

.icon a:before {
    margin-inline-end: 0.3em;
    display: inline-block;
    width: 1em;
    height: 1em;
    content: " ";
    mask-size: contain;
    background-color: var(--font-color);
    position: relative;
    top: 0.15em;
}

.icon a:hover:before {
    background-color: var(--primary);
}

a:hover {
    color: var(--primary);
}

.icon.youtube a:before {
    mask-image: url(/youtube.svg);
}

.icon.github a:before {
    mask-image: url(/github.svg);
}

.icon.external a:before {
    mask-image: url(/externallink.svg);
}

.icon.email a:before {
    mask-image: url(/email.svg);
}