/*
**
** RESET
**
*/
body {
    height: 100dvh;
}

/*
**
** AVATAR
**
*/
.avatar-container,
.avatar-inner,
.avatar {
    display: grid;
    place-items: center;

    border-radius: 50%;
}

.avatar-container {
    background:
        linear-gradient(45deg, var(--cyan-blue-450), var(--green-cyan-450)) border-box;
    border: 5px solid transparent;
}

.avatar-inner {
    background-color: var(--gray-800);
    padding: 8px;
}

.avatar {
    overflow: hidden;
}

.avatar img {
    object-fit: cover;
}

/*
**
** LINKS
**
*/
a {
    background-color: var(--gray-750);
    transition: background-color 200ms ease-in-out;
}

a:hover {
    background-color: var(--cyan-blue-450);
}

a span.icon {
    flex-shrink: 0;

    display: grid;
    place-items: center;
}