/* poppins-100 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 100;
    src         : local(''),
    url('../../../resources/fonts/poppins-v20-latin-100.woff2') format('woff2');
}

/* poppins-200 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 200;
    src         : local(''),
    url('../../../resources/fonts/poppins-v20-latin-200.woff2') format('woff2');
}

/* poppins-300 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 300;
    src         : local(''),
    url('../../../resources/fonts/poppins-v20-latin-300.woff2') format('woff2');
}

/* poppins-regular - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 400;
    src         : local(''),
    url('../../../resources/fonts/poppins-v20-latin-regular.woff2') format('woff2');
}

/* poppins-500 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 500;
    src         : local(''),
    url('../../../resources/fonts/poppins-v20-latin-500.woff2') format('woff2');
}

/* poppins-600 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 600;
    src         : local(''),
    url('../../../resources/fonts/poppins-v20-latin-600.woff2') format('woff2');
}

/* poppins-700 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 700;
    src         : local(''),
    url('../../../resources/fonts/poppins-v20-latin-700.woff2') format('woff2');
}

/* poppins-800 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 800;
    src         : local(''),
    url('../../../resources/fonts/poppins-v20-latin-800.woff2') format('woff2');
}

/* poppins-900 - latin */
@font-face {
    font-family : 'Poppins';
    font-style  : normal;
    font-weight : 900;
    src         : local(''),
    url('../../../resources/fonts/poppins-v20-latin-900.woff2') format('woff2');
}

body {
    font-family    : Poppins, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    margin         : 0;
    display        : flex !important;
    flex-direction : column;
    line-height    : normal;

    --demo-color   : #0d47a1;
}

.header-bg {
    position         : absolute;
    top              : 0;
    left             : 0;
    right            : 0;
    height           : 146px;
    background-color : var(--demo-color);
}

.content {
    min-width : 300px;
    max-width : 750px;
    margin    : 0 auto;
    position  : relative;
}

.content > header {
    padding : 2rem;
}

header h1 {
    color   : #fff;
    padding : 1rem 0;
}

header a {
    text-decoration : none;
}

nav {
    position : absolute;
    right    : 0;
    top      : 4.7rem;

    a {
        color             : #fff;
        margin-inline-end : 1rem;
        font-weight       : bold;
        position          : relative;

        &::before {
            display          : inline-block;
            position         : absolute;
            background-color : #fff421;
            height           : 2px;
            left             : 50%;
            right            : 50%;
            bottom           : -7px;
            content          : '';
            transition       : left 0.2s, right 0.2s, color 0.2s;
        }

        &:hover,
        &:first-child {
            color : #fff421;
        }

        &:hover::before,
        &:first-child::before {
            left  : 0;
            right : 0;
        }
    }
}

.small {
    font-weight   : bold;
    color         : var(--demo-color);
    margin-bottom : 1rem;
}

.big {
    font-weight : bold;
    font-size   : 2rem;
    color       : #666;
}

article {
    padding : 2rem;
}

article.grid-container {
    display        : flex;
    flex-direction : column;
}

section {
    line-height : 170%;
}

.article-bg {
    background-color : #f3f3f3;
    padding          : 2em;
}

#compatibility-warning {
    display : none;
    color   : #550000;

    i {
        font-size         : 2.5em;
        float             : left;
        margin-inline-end : .5em;
    }
}

.b-responsive-small.b-view {
    font-size : 12px;
}

@media (max-width : 480px) {
    nav a {
        display : none;
    }

    nav::before {
        content           : '\f0c9';
        font-family       : 'Font Awesome 6 Free', serif;
        font-weight       : 900;
        margin-inline-end : 1rem;
        font-size         : 2rem;
        color             : #fff;
        cursor            : pointer;
    }

    nav:hover::before {
        color : #fff421;
    }
}


#download-trial {
    display : inline-block;
}

#trial-button {
    color : #fff;
}

@media (max-width : 800px) {
    #trial-button {
        display : none;
    }
}