:root {
    --red: #dc3232;
    --azalea: #f8d2d4;
    --text-grey: #666;
    --dark-grey: #404044;
    --white: #fff;
    --black: #000;
    --grey: #dcdcde;
    --nevada: #5e6a71;
    --dove-grey: #6c6c6c;
    --shark: #2a2a2d;
    --science-blue: #015ecc;
    --cod-gray: #1a1a1a;
    --elm: #1a8e83;
    --alizarin-crimson: #da202a;
    --olive-drab: #589f28;
    --chevin-medium: chevin-medium, arial, helvetica, 'Nimbus Sans L', sans-serif;
    --chevin-bold: chevin-bold, arial, helvetica, 'Nimbus Sans L', sans-serif;
    --pf-din-text-std-bold: 'PF DinText Std Bold', Arial, helvetica, 'Nimbus Sans L', sans-serif;
    --pf-din-text-std-reg: 'PF DinText Std Reg', Arial, helvetica, 'Nimbus Sans L', sans-serif;
    --bp-mobile-max-width: 767px;
    --bp-tablet-min-width: var(--bp-mobile-max-width + 1);
    --bp-tablet-max-width: 991px;
    --bp-desktop-min-width: var(--bp-tablet-max-width + 1);
    --bp-desktop-max-width: 1199px;
    --bp-xl-min-width: var(--bp-desktop-max-width + 1);
}

@font-face {
    font-family: 'PF DinText Std Bold';
    src: url('../fonts/pfdintextstd-bold-webfont.woff2') format('woff2'), url('../fonts/pfdintextstd-bold-webfont.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'PF DinText Std Reg';
    src: url('../fonts/pfdintextstd-reg-webfont.woff2') format('woff2'), url('../fonts/pfdintextstd-reg-webfont.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: chevin-bold;
    src: url('../fonts/chevin-bold.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: chevin-medium;
    src: url('../fonts/chevin-medium.woff') format('woff');
    font-display: swap;
}

html, body {
    margin: 0;
    background-color: var(--grey);
    font-family: var(--pf-din-text-std-bold);
    font-display: swap;
    overflow-x: hidden;
}

    body > div {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

main {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}

    main::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.2;
        background: url('../images/background.png') repeat center;
    }

    main > * {
        position: relative;
    }

#components-reconnect-modal {
    display: none;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: block;
    }