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

@import url("../assets/fonts/Poppins/font.css");
@import url("../assets/fonts/Roboto/font.css");
@import url("../assets/fonts/Roboto Condensed/font.css");
@import url("../assets/fonts/Barlow/font.css");
@import url("../assets/fonts/Barlow Condensed/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("../assets/fonts/Lato/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/css2?family=Oswald:wght@200;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Glory:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
*/

:root {

    /* ********************************* **
    ** *  General Colours              * **
    ** ********************************* */

    --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;
    --grey-dark              : #343a40;
    --dark                   : #343a40;
    --black                  : #000000;

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

    --yellow1                : #F1EF8A;
    --green1                 : #00FF007F;
    --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    * **
    ** ********************************* */

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

    --site__color-light      : #FFFFFF;
    --site__color-neutral    : #B1A29F;
    --site__color-dark       : #080B1E;
    --site__color-accent     : #0A5443;
    --site__color-hilite     : #FDBC2E;
    --site__color-alert      : #EB3438;
    --site__color-page       : #FFFFFF;
    --site__color-accent2    : #226546;
    --site__color-back       : hsl(from var(--site__color-accent2) h s calc(l * 0.9));
    --site__color-back       : var(--site__color-accent);

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

    --min-width             : 280px;
    --sml-width             : 576px;
    --mid-width             : 768px;
    --lrg-width             : 880px;
    --xlr-width             : 992px;
    --std-width             : 1200px;
    --wid-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.2rem;
    --lh-regular            : 1.3;
    --fw-regular            : 400;
    --fw-semi-bold          : 500;
    --fw-bold               : 600;

    --ff-regular            : var(--font-family-Barlow);
    --ff-condensed          : var(--font-family-Barlow-Cond);
    --ff-option             : var(--font-family-Roboto);

    --ff-heading            : var(--font-family-Barlow);
    --lh-heading            : 1.2;

    --ff-base               : system-ui;
    --lh-base               : 1.8;

    --ff-code               : monospace;
    --text-max-width        : 200ch;
}

@view-transition { navigation: auto; }

@layer reset, layout;

@layer reset {

    /* ********************************************************************************** */
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css -- minified */
    /* ********************************************************************************** */
    /*                                                                                    */
    *,*.before,*.after {
        box-sizing:border-box;
        /* DEBUGGING BITS */
        /* outline: 2px solid #32cd32;  */
        /* background-color: #32cd321f; */
    }

    html {line-height:1.15;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;
          font-family:var(--ff-base);color-scheme:light dark;interpolate-size:allow-keywords;}
    body {margin:0;width:100%;height:100%;min-height:100svh;line-height:var(--lh-base);}
    main {display:block;}
    h1,h2,h3,h4,h5,h6 {text-wrap:balance;font-family:var(--ff-heading);line-height:var(--lh-heading);margin-block-end:0;}
    p,figure,blockquote,dl,dd {margin-block-end:0;}
    hr {box-sizing:content-box;height:0;overflow:visible;}
    pre {font-family:monospace,monospace;font-size:1em;}
    a {background-color:transparent;}
    abbr[title] {border-bottom:none;text-decoration:underline;}
    b,strong {font-weight:bolder;}
    code,kbd,samp {font-family:var(--ff-code);}
    small {font-size:80%;}
    sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
    sub {bottom:-0.25em;}
    sup {top:-0.5em;}
    img,picture {border-style:none;display:block;width:100%;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;}
    button,input,label {line-height:var(--lh-heading);}
    button,input,optgroup,select,textarea {font-family:inherit;font-size:inherit;line-height:1.15;margin:0;}
    button,input {overflow:visible;}
    button,select {text-transform:none;}
    button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance:button;}
    button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style:none;padding:0;}
    button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline:1px dotted ButtonText;}
    fieldset {padding:0.35em 0.75em 0.625em;}
    legend {box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}
    progress {vertical-align:baseline;}
    textarea {overflow:auto;}
    textarea:not([rows]) {min-height:10em;}
    [type="checkbox"],[type="radio"] {box-sizing:border-box;padding:0;}
    [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height:auto;}
    [type="search"] {-webkit-appearance:textfield;outline-offset:-2px;}
    [type="search"]::-webkit-search-decoration {-webkit-appearance:none;}
    ::-webkit-file-upload-button {-webkit-appearance:button;font:inherit;}
    details {display:block;}
    summary {display:list-item;}
    template {display:none;}
    [hidden] {display:none;}
    /*                                                                                    */
    /* ********************************************************************************** */
    /* some additions (thanks Kevin Powell et al)                                         */
    /* ********************************************************************************** */
    /*                                                                                    */
    :is(ul, ol)[class] {list-style:"";margin:0;padding:0;}
    p,li,figcaption {max-width:var(--text-max-width);text-wrap:pretty;}
    :first-child {margin-block-start:0;}
    td,math,time[datetime*=":"] {font-variant-numeric: tabular-nums lining-nums;}
    table {border-collapse:collapse;}
    :target {scroll-margin-block:32px;scroll-margin-block:5rlh;}
    @media(prefers-reduced-motion:no-preference) {html{scroll-behavior:smooth;}}
    /*                                                                                    */
    /* * {overscroll-behavior: contain;}                                                  */
    /* ********************************************************************************** */
}

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

@layer layout {    

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

    body {
        color                   : var(--site__color-accent);
	    background-color        : var(--site__color-back);
        font-size               : var(--fs-regular);
        height                  : 100%;
    }

    /* force vertical scroll bars for cross-fade betterment :) but only on wider screens */
    @media screen and (width > 768px) {
        body { overflow-y       : scroll; }
    }

    img {
        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 {
        position                : relative;
        width                   : 100%;
        max-width               : var(--std-width);
        padding                 : 4em;
        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;
            }

            &::marker {
                color           : var(--site__color-light);
                font-size       : 1.5em;
            }
        }

              a,
        label a,
        li    a {
            text-decoration     : none;
            font-weight         : var(--fw-bold);
            color               : inherit;
            font-size           : 1.0em;

            &:hover {
                color           : var(--site__color-accent);
                position        : relative;
            }
        }
    }

   /* ********************************* **
   ** *           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__color-accent);
        }
    }

    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 {
        width                   : 100%;
        text-align              : center;
        border                  : none;
        border                  : 1px solid var(--site__color-dark);
        margin                  : 2rem 0 0.5rem 0;
        border-radius           : 9999px;
    }

    sup {
        font-size               : 0.5em;
        vertical-align          : super;
    }

   /* ********************************* **
   ** *       H E A D L I N E S       * **
   ** ********************************* */

    h1, h2, h3, h4, h5, h6 {
	    font-weight             : var(--fw-regular);
        color                   : var(--site__color-accent);
        text-transform          : none;
        margin                  : 0.5rem auto;
        text-align              : center;
    }

    h1 {
        font-weight             : var(--fw-bold);
        font-size               : var(--fs-700);
    }

    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); }

}