@use "vars";

.certificate {
    padding: 16px;

    height: 100%;

    position: relative;

    border-radius: vars.$radius;
    border: 2px solid vars.$gray;
    background-color: vars.$dark;
    color: vars.$light;

    overflow: hidden;

    > svg {
        width: 200px;
        height: 200px;

        position: absolute;
        top: -37px;
        left: -25px;

        opacity: 0.03;
        z-index: +1;
    }

    > div {
        position: relative;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;

        text-decoration: none;
        text-align: center;

        z-index: +2;

        > hr {
            margin: calc(16px - 4px) 0;

            border: 0 solid transparent;
            border-bottom: 2px solid vars.$gray;
        }

        > .pill-list {
            margin-top: 4px;

            justify-content: center;
        }

        > .button {
            margin-top: 4px;
            padding: 0 32px;
        }
    }
}