@import './utils/variables';
@import './utils/breakpoints';

#elementum_elementum-welcome {
    @import '../../../../plugins/elementum/assets/scss/utils/variables';
    margin: 2rem 1rem;
    margin-left: 0;
    border-radius: 10px;
    padding: 2rem;

    background: radial-gradient(circle at 20% 25%, rgba($elementum-secondary, 0.20) 0%, transparent 55%),
        radial-gradient(circle at 80% 30%, rgba($elementum-tertiary, 0.25) 0%, transparent 60%),
        radial-gradient(circle at 25% 85%, rgba($elementum-tertiary, 0.18) 0%, transparent 60%),
        radial-gradient(circle at 90% 75%, rgba($elementum-secondary, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, rgba($elementum-primary, 0.9) 0%, transparent 70%);
    background-color: darken($elementum-primary, 20%);

    color: $elementum-text-primary;

    .elementum-logo {
        margin: 0;
        font-family: $elementum-font;
    }

    @import '../../../../plugins/elementum/assets/scss/components/link';
    @import '../../../../plugins/elementum/assets/scss/components/button';

    @import 'components/code';

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        h1,
        h2 {
            margin: 0;
            color: $elementum-text-primary;
        }
    }

    header+p {
        text-align: center;
        font-size: clamp(1rem, 5vw, 2rem);
        color: $elementum-tertiary;
        margin: 4rem auto;
    }

    .current-plugin ul {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 30px;
    }

    .documentation {
        background: rgba(255, 255, 255, 0.06);
        border-radius: 5px;
        padding: 1rem;

        h2 {
            color: #EFEFEF;
        }

        ul {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
    }

    .tagline {
        text-align: right;
        font-style: italic;
    }
}