:root {
    --social-text-color: #683655;
    --email-text-color: #FAA0A0;
    --mastodon-text-color: #3088D4;
    --discord-text-color: #7289DA;
    --kofi-text-color: #1AC0FF;
}

.social {
    color: #683655;
    font-family: "unscii-16";
    font-size: large;
    font-weight: bold;
    display: block;
}

#email {
    color: var(--email-text-color);
}

#ko-fi {
    color: var(--kofi-text-color);
}

#mastodon {
    color: #3088D4;
}

#discord {
    color: #7289DA;
}

.u-photo {
    border-radius: 10px;
    max-width: 100%;
    min-width: 100px;
    min-height: 100px;
    max-height: 100%;
}

.h-card {
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    font-family: "unscii-16", sans-serif;
}

@media (min-width: 768px) {
    .h-card {
        width: intrinsic;
        /* Safari/WebKit uses a non-standard name */
        width: -moz-max-content;
        /* Firefox/Gecko */
        width: -webkit-max-content;
        position: relative;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        font-family: "unscii-16", sans-serif;
    }

    .h-card span {
        margin-top: 5%;
        margin-bottom: 5%;
    }
}

@media (max-width: 350px) {
    .h-card {
        width: 60%;
        margin: auto;
        font-family: "unscii-16", sans-serif;
    }

    .h-card span {
        margin-top: 5%;
        margin-bottom: 5%;
    }
}

.hidden {
    display: none;
}

.p-name {
    color: var(--text-color);
    font-family: "unscii-16", sans-serif;
}

.p-note {
    font-family: "unscii-16", sans-serif;
    color: var(--text-color);
    max-width: 10em;
    text-align: center;
}

#about {
    margin: 1%;
}

.card-section {
    white-space: inherit;
    display: inherit;
    flex-direction: inherit;
    justify-content: inherit;
    align-items: inherit;
}