/* https://codepen.io/Stockin/pen/mzydLz */
#contact-list {
    display: flex;
    justify-content: flex-end;
    gap: 8rem 2rem;
    flex-wrap: wrap;
    width: fit-content;
    padding: 0;
    margin: 10rem auto 0 auto;
    list-style: none;

    a {
        --theme-dark: color-mix(in srgb, var(--theme) 70%, #000);
        --theme-light: color-mix(in srgb, var(--theme) 70%, #fff);
        --color-shadow: rgba(255, 255, 255, 0.75);
        --color-base: #fff;
        --color-base-dark: color-mix(in srgb, var(--color-base) 70%, #000);
        display: block;
        position: relative;
        width: 210px;
        height: 80px;
        padding-left: 20px;
        background: var(--color-base);
        box-shadow: -20px 20px 10px var(--color-shadow);
        color: var(--color-fg);
        font-size: 1.5rem;
        font-weight: bold;
        letter-spacing: 2px;
        line-height: 80px;
        text-align: left;
        text-decoration: none;
        user-select: none;
        transform: rotate(-30deg) skew(25deg);
        transition: transform 0.5s, box-shadow 0.5s, background 0.5s, color 0.5s;

        &::before, &::after {
            content: '';
            position: absolute;
            background: var(--color-base-dark);
            transition: background 0.5s;
        }

        &::before {
            top: 10px;
            left: -20px;
            width: 20px;
            height: 100%;
            transform: rotate(0deg) skewY(-45deg);
        }

        &::after {
            bottom: -20px;
            left: -10px;
            width: 100%;
            height: 20px;
            transform: rotate(0deg) skewX(-45deg);
        }

        &:hover {
            background: var(--theme);
            color: var(--color-base);
            transform: rotate(-30deg) skew(25deg) translate(20px, -15px);
            box-shadow: -50px 50px 50px var(--color-shadow);

            &::before {
                background: var(--theme-dark);
            }

            &::after {
                background: var(--theme-light);
            }
        }
    }
}

/* allow 2 imgs next to each other horizonally */
.accordion details .img-container {
    flex-direction: row;
    justify-content: center;

    /* contains more than 2 children.   | Note: >-sign is direct decendant, not greater-than */
    &:has(> :nth-child(2)) {
        width: 100%;

        img {
            width: 48%;
            height: auto;
            margin: 0 0.25rem;
        }
    }
}

/* desktop ==> show full text */
#page404 {
    #full404, #cmd-full {
        display: revert;
    }

    .cli-input {
        display: flex;
    }
}