:root {
    min-width: 100vw;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;
}

body {
    max-width: 700px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.linktree {
    width: 100%;
    border: 2px solid;
    border-radius: 5px;
    padding: 0.5rem;
}

.linktree-group {
    width: auto;
    border: 2px solid;
    border-radius: 5px;
    margin: 0.5rem;
    height: 6rem;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;

    font-size: xx-large;
    text-align: center;

    transition: all ease 100ms;
}

.linktree-item,
.linktree-subgroup {
    height: 2.5rem;
}

a.linktree-item:only-child {
    flex: max-content;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.linktree a {
    color: inherit;
    text-decoration: none;
}

.linktree a:hover {
    color: LinkText;
}

@media (hover: hover) and (not (prefers-reduced-motion: reduce)) {
    .linktree>*:hover {
        box-shadow: 0px 0px 2px 2px;
    }

    .linktree>*:not(:hover) {
        height: 4rem;
    }

    .linktree>div>:not(:first-child) {
        transition: height ease 100ms, opacity ease 150ms, transform ease 200ms;
    }

    .linktree>div:not(:hover)>:not(:first-child) {
        height: 0;
        opacity: 0%;
        transform: translateY(1rem);
    }
}

/* */