/* ********************************* *
     * *         G L O B A L           * *
     * ********************************* */

@import url("reset.css");
@import url("../assets/fonts/Poppins/font.css");
@import url("../assets/fonts/Digital7/font.css");
/*
@import url("../assets/fonts/Lato/font.css");
@import url("../assets/fonts/Roboto Condensed/font.css");
@import url("../assets/fonts/Barlow Condensed/font.css");
@import url("../assets/fonts/Barlow/font.css");
@import url("../assets/fonts/Barlow Semi Condensed/font.css");
@import url("../assets/fonts/DIN/font.css");
@import url("../assets/fonts/Solomon Sans/font.css");
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Open+Sans+Condensed:300,400,700');
@import url('https://unpkg.com/open-props');

    --font-family-OpenSans      : 'Open Sans',          system-ui,sans-serif;
    --font-family-OpenSans-Cond : 'Open Sans Condensed',system-ui,sans-serif;
*/
:root {

    /* ********************************** *
     * *         C O L O U R S          * *
     * ********************************** */

    --blue                       : #007bff;
    --indigo                     : #6610f2;
    --purple                     : #6f42c1;
    --pink                       : #e83e8c;
    --red                        : #dc3545;
    --orange                     : #fd7e14;
    --yellow                     : #ffc107;
    --green                      : #28a745;
    --teal                       : #20c997;
    --cyan                       : #17a2b8;
    --white                      : #ffffff;
    --light                      : #f8f9fa;
    --grey                       : #6c757d;
    --dark                       : #343a40;
    --black                      : #000000;

    --primary                    : #007bff;
    --secondary                  : #6c757d;

    --success                    : #28a745;
    --info                       : #17a2b8;
    --warning                    : #ffc107;
    --danger                     : #dc3545;

    --green1                     : #00FF007F;
    --yellow1                    : #F1EF8A;
    --teal1                      : #9AD6CC;
    --pink1                      : #F9A0B6;
    --pink2                      : #CD6078;
    --pink3                      : #DF4D5B;

    --color-primary-300          : hsl(219, 76%, 55%);
    --color-primary-400          : hsl(219, 76%, 40%);
    --color-primary-500          : hsl(219, 76%, 25%);
    --color-secondary-300        : hsl(269, 75%, 55%);
    --color-secondary-400        : hsl(269, 75%, 40%);
    --color-secondary-500        : hsl(269, 75%, 25%);
    --color-accent-200           : hsl(358, 85%, 80%);
    --color-accent-300           : hsl(358, 72%, 65%);
    --color-accent-400           : hsl(358, 72%, 50%);
    --color-accent-500           : hsl(358, 72%, 35%);

    /* ********************************* *
     * *    S I T E   C O L O U R S    * *
     * ********************************* */

    --site__dark-color           : #003C57;
    --site__neutral-color        : #CCCCCC;
    --site__background-color     : #DDDDDD;
    --site__null-color           : #EEEEEE;
    --site__light-color          : #FFFFFF;
    --site__accent-color         : #F6EB0F;
    --site__hilite-color         : color-mix(in srgb, var(--site__accent-color) 50%, var(--site__light-color)); /* link hover color etc   */ /* #FAC289; #86D4DE; #EF868B; #98D1CB; */

    --site__accent2-color        : #30C5AB;

    --site__gradient-dark        : #006996;
    --site__gradient-light       : #0995CB;

    --site__gradient             : linear-gradient(90deg, var(--site__gradient-dark) 0%, var(--site__gradient-light) 45%, var(--site__gradient-light) 55%, var(--site__gradient-dark) 100%);

    /* ********************************* *
     * *      P A G E  W I D T H       * *
     * ********************************* */

    --min-width                  : 280px;
    --sml-width                  : 576px;
    --mid-width                  : 768px;
    --mid-plus-width             : 880px;
    --lrg-width                  : 992px;
    --std-width                  : 1200px;
    --wide-width                 : 1440px;
    --max-width                  : 2000px;

    /* ********************************* *
     * *         F O N T S             * *
     * ********************************* */

    --fs-300                     : clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
    --fs-400                     : clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
    --fs-500                     : clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
    --fs-600                     : clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
    --fs-700                     : clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
    --fs-800                     : clamp(2.33rem, calc(1.70rem + 3.15vw), 4.14rem);
    --fs-900                     : clamp(2.80rem, calc(1.85rem + 4.74vw), 5.52rem);

    --fs-regular                 : 1.3rem;
    --lh-regular                 : 1.3;
    --fw-regular                 : 400;
    --fw-bold                    : 700;

    --ff-regular                 : var(--font-family-Poppins);
    --ff-dropdown                : var(--font-family-Poppins);
    --ff-LED                     : var(--font-family-Digital7);
}

    /* ********************************* *
     * *        G E N E R A L          * *
     * ********************************* */

*, *::before, *::after { box-sizing: border-box; }

html {
    font                         : var(--fw-regular) 0.825em/var(--lh-regular) var(--ff-regular);
}

body {
	color                        : var(--site__dark-color);
    font-size                    : var(--fs-regular);
}

img {
    display                      : block;
    width                        : 100%;
    max-width                    : var(--max-width);
}

.nouser {
    user-select                  : none;
}
.nopointer {
    pointer-events               : none;
}
.noselect {
    user-select                  : none;
    pointer-events               : none;
}

   /* ********************************* *
    * *    M A I N   C O N T E N T    * *
    * ********************************* */

.content {

    color                        : var(--site__light-color);

    position                     : relative;
    width                        : 100%;
    max-width                    : var(--max-width);
    padding                      : 1em;
    margin                       : 0 auto;

    & .r {
        text-align               : right;
        padding-inline           : 20px;
    }

    & b {
        font-weight              : var(--fw-bold);
    }

    & ol {
        list-style               : decimal outside;
        line-height              : 1.5;
    }

    & ul {
        list-style               : disc outside;
        line-height              : 1.5;
        padding-left             : 20px;

        & li {
            margin-bottom        : 0;
        }
    }
}

   /* ********************************* *
    * *           L I N K S           * *
    * ********************************* */

main a {
    position                     : relative;
    text-decoration              : none;
    font-weight                  : var(--fw-bold);
    color                        : inherit;
    font-size                    : 1.0em;

    &:hover {
        color                    : var(--site__accent-color);
    }
}

main a[data-tooltip]::after {
    position                     : absolute;
    content                      : attr(data-tooltip);
    font-size                    : 0.8em;
    padding                      : 4px 8px;
    color                        : #333;
    left                         : 0; 
    bottom                       : 0;
    z-index                      : 20;
    border-radius                : 5px;   
    box-shadow                   : 0px 0px 4px #222;  
    background-image             : linear-gradient(#eeeeee, #cccccc);  
    white-space                  : nowrap; 
    transform                    : scale(0);
    transition                   : transform ease-out 150ms, 
                                   bottom ease-out 150ms;
}

main a[data-tooltip]:hover::after {
    transform                    : scale(1);
    bottom                       : 100%;
}

hr {
    text-align                   : center;
    border                       : 1px solid var(--site__dark-color);
    border-radius                : 9999px;
    margin                       : 2rem 0;
}

sup {
    font-size                    : 0.4em;
    vertical-align               : super;
}
    
   /* ********************************* *
    * *       H E A D L I N E S       * *
    * ********************************* */

h1, h2, h3, h4, h5, h6 {
    font-family                  : var(--ff-regular);
    line-height                  : 1.3;
	font-weight                  : var(--fw-regular);
    text-wrap                    : balance;
    color                        : var(--site__accent-color);
    text-transform               : none;
    margin                       : 0 auto;
}

h1 {
    font-weight                   : var(--fw-bold);
    font-size                     : var(--fs-700);
    margin-block                  : 1rem 0;
    text-transform                : uppercase;
}

h2 { font-size                    : var(--fs-600); }
h3 { font-size                    : var(--fs-500); }
h4 { font-size                    : var(--fs-400); }
h5 { font-size                    : var(--fs-300); }
h6 { font-size                    : var(--fs-300); }