@import url("../assets/fonts/Barlow/font.css");
@import url("../assets/fonts/Barlow Condensed/font.css");
@import url("../assets/fonts/Roboto/font.css");
@import url("../assets/fonts/Roboto Condensed/font.css");
@import url("../assets/fonts/LitoClean/font.css");
/*
@import url("../assets/fonts/Poppins/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("../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("../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/css?family=Open+Sans:400,700|Open+Sans+Condensed:300,400,700');
@import url('https://unpkg.com/open-props');
*/

: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;
    --light               : #f8f9fa;

    --white               : #ffffff;
    --grey                : #6c757d;
    --dark                : #343a40;
    --black               : #000000;

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

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

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

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


    --site__color-dark    : #000000;
    --site__color-light   : #FFFFFF;
	--site__color-accent  : #B92024;
    --site__color-hilite  : #FFD600; /*#D72235*/
	--color5              : #282B30;
    --color6              : #999999;
    --color7              : #DD0080;

	--link-color          : #0227CE;
	--link-hover-color    : #699CFE;

	--body-color          : var(--site__color-dark);
	--background-color    : var(--site__color-dark);  /*  rgb(0 169 178 / 0.4);  */

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

    --min-width           : 280px;
    --sml-width           : 576px;
    --mid-width           : 768px;
    --lrg-width           : 992px;
    --std-width           : 1200px;
    --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-default          : 1.2rem;

    --fw-normal           : 400;
    --fw-bold             : 600;
    
    --line-height         : 1.3;
/* 
    set the base font 
*/
    --ff-regular          : var(--font-family-Barlow);
    --ff-condensed        : var(--font-family-Barlow-Cond);
    --ff-blocky           : var(--font-family-LitoClean);
    --ff-dropdown         : var(--font-family-Roboto);

    --font                : var(--fw-normal) 0.825em/var(--line-height) var(--ff-regular);

    font                  : var(--font);
	background-color      : var(--background-color);
}

@view-transition { navigation: auto; }

@layer reset, layout, header, footer;

@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; */
    }
    * { margin: 0; padding: 0; font: inherit; }
    /*                                                                                    */
    /* ********************************************************************************** */
    /*                                                                                    */
    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;height:100%;min-height:100svh;line-height:var(--lh-regular);}
    main {display:block;}
    h1,h2,h3,h4,h5,h6 {text-wrap:balance;font-family:var(--ff-regular);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,svg,video {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 {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 {
        scrollbar-gutter    : stable;
    }

    body {
	    color               : var(--site__color-dark);
	    background-color    : var(--body-color);
        font                : var(--fw-regular) 0.825em/var(--lh-regular) var(--ff-regular);

        min-height          : 100svh;
        margin              : 0 auto;
        padding             : 0;

        hanging-punctuation : first last;
        color-scheme        : dark light;

        scrollbar-gutter    : stable;
    }

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

        -webkit-user-drag   : none;
    }

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

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

        &:hover {
            color               : var(--site__color-light);
        }

        &[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;
        }

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

    .fancy-link-1 {
        text-decoration: none;
        background-image: linear-gradient(90deg, red, blue);
        background-size: 0% 3px;
        background-repeat: no-repeat;
        background-position: left 1lh;
        padding-block: 0.25em;

        transition: color 500ms, background-size 500ms;
    }

    .fancy-link-1:focus,
    .fancy-link-1:hover {
        background-size: 100% 3px;
    }

    .fancy-link-2 {
        text-decoration: none;
        background-image: linear-gradient(90deg, red, blue 50%, currentColor 50%);
        background-size: 200% 3px;
        background-repeat: no-repeat;
        background-position: right 1lh;
        padding-block: 0.25em;

        transition: color 500ms, background-position 500ms;
    }

    .fancy-link-2:focus,
    .fancy-link-2:hover {
        background-position: left 1lh;
    }

    .alert {
        display           : block;
        font-size         : 1.1em;
        font-weight       : var(--fw-bold);
        line-height       : 1.4;
        color             : red;
        background-color  : #0000004F;

        padding: 0;
    }

       /* ********************************* *
        * *        C O N T E N T          * *
        * ********************************* */

    .content {
        position          : relative;
        width             : 100%;
        padding           : 1rem 4rem;
        margin            : 0 auto;

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

        i {
            color          : black;
        }

        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;
            list-style     : none;

            li {
                margin-bottom  : 0;
            }
        }

    }

    /*
    .content       a,  
    .content label a,
    .content li    a {
        text-decoration  : none;
        font-weight      : bold;
        color            : var(--site__color-dark);
        font-size        : 1.0em;
    }

    .content       a:hover,
    .content label a:hover,
    .content li    a:hover {
        color            : var(--site__color-hilite);
    }

    .content a[title]:hover::after,
    .content label a[title]:hover::after,
    .content li a[title]:hover::after {
        content: attr(title);
        padding: 4px 8px;
        color: #333;
        position: absolute;
        left: 0; 
        top: 100%;
        white-space: nowrap; 
        z-index: 20;
        border-radius: 5px;   
        box-shadow: 0px 0px 4px #222;  
        background-image: linear-gradient(#eeeeee, #cccccc);  
    }
    */

       /* ********************************* *
        * *  H O R I Z O N A L   L I N E  * *
        * ********************************* */

    hr {
        width              : 100%;
        text-align         : center;
        border             : 1px solid var(--color5);
        margin             : 0.5em 0;
    }

    /*hr {
        width             : 100%;
        border            : none;
        border-radius     : 100vw;
        height            : 2px;
        background-color  : var(--site__color-dark);
    }*/
    
       /* ********************************* *
        * *       H E A D L I N E S       * *
        * ********************************* */

    h1, h2, h3, h4, h5, h6 {
        font-family       : var(--ff-regular);
        font-weight       : var(--fw-bold);
        line-height       : 1.2;
        text-align        : center;
        text-wrap         : balance;
        color             : var(--site__color-dark);
        text-transform    : none;
        margin            : 0.5rem auto;
    }

    h1 { font-size        : var(--fs-600); }
    h2 { font-size        : var(--fs-500); }
    h3 { font-size        : var(--fs-400); }
    h4 { font-size        : var(--fs-300); }
    h5 { font-size        : var(--fs-300); }
    h6 { font-size        : var(--fs-300); }
    
       /* ********************************* *
        * *      I M A G E   T E X T      * *
        * ********************************* */

    .image-text,
    .gradient-text {
        font-size: var(--fs-900);
        text-transform: uppercase;
        font-weight: 900;
        line-height: 1;
    }

    .image-text {
        background-image: url("");
        background-size: cover;
        background-clip: text;
        color: transparent;
    }

    .gradient-text {
        width: fit-content;
        background-image: linear-gradient(90deg, red, blue);
        background-size: cover;
        background-clip: text;
        color: transparent;
    }

}