.skewed {
    overflow: auto;
}

    .skewed ul {
        list-style-type: none;
        display: flex;
        padding-right: 15px;
    }

    .skewed li {
        list-style: none;
        margin-right: -2px;
    }

        .skewed li:first-child a {
            border-radius: 0 8px 8px 0;
        }

        .skewed li:last-child a {
            border-radius: 8px 0 0 8px;
        }

    .skewed a {
        background-color: #fff;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-size: 1.25rem;
        font-weight: 600;
        border: 2px solid #d1d5db;
        height: 3em;
        padding-left: 1.5em;
        padding-right: 1.5em;
        border-radius: 0;
        transform: skew(-30deg);
        position: relative;
        transition: color 0.15s ease, border-color 0.15s ease;
        text-wrap: nowrap;
    }

        .skewed a:hover, .skewed a:focus, .skewed a.active {
            outline: 0;
            /*color: #6366f1;
        border-color: #6366f1;*/
            z-index: 1;
        }

        .skewed a > * {
            transform: skew(30deg);
        }

        .skewed a span {
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .skewed a span i {
                margin-left: 0.375em;
            }

            .skewed a span svg {
                margin-left: 0.375em;
                width: 1.5em;
                height: 1.5em;
            }

    .skewed details {
        margin-top: 2rem;
        color: #6b7280;
        width: 90%;
        max-width: 400px;
        position: relative;
    }

        .skewed details div {
            background-color: #FFF;
            border: 2px solid #d1d5db;
            padding: 1.25rem;
            border-radius: 8px;
            margin-top: 1rem;
            position: absolute;
            width: 100%;
        }

            .skewed details div:after {
                content: "";
                display: block;
                width: 16px;
                height: 16px;
                background-color: #FFF;
                transform: rotate(45deg) translatex(-50%);
                border-right: 2px solid #d1d5db;
                border-top: 2px solid #d1d5db;
                position: absolute;
                top: -4px;
                right: 50%;
            }

            .skewed details div > * + * {
                margin-top: 0.75em;
            }

            .skewed details div code {
                font-size: 1rem;
                font-family: monospace;
                font-weight: 600;
                background-color: #eee;
            }

            .skewed details div strong {
                font-weight: 600;
            }


    .skewed summary {
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;
        text-align: center;
        cursor: pointer;
    }

        .skewed summary::-webkit-details-marker {
            display: none;
        }

        .skewed summary:hover, .skewed summary:focus {
            color: #6366f1;
        }

        .skewed summary svg {
            margin-left: 0.25em;
            width: 1.5em;
            height: 1.5em;
        }