@import url('reset.css');
@import url("../assets/fonts/Roboto/font.css");
@import url("../assets/fonts/Roboto Condensed/font.css");

/*
    @import url("../assets/fonts/Poppins/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/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;
    --light                  : #f8f9fa;
    --dark                   : #343a40;

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

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

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

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

    --x__blue                : #0a8ed3;
    --x__lt-blue             : #6dcff6;
    --x__mid-blue            : #2499d6;
    --x__dk-blue             : #182440;

    --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   S E T T I N G S   * *
     * ********************************* */
     
    --site__color-dark       : #000000;
    --site__color-neutral    : #CCCCCC;
    --site__color-light      : #FFFFFF;

/*    --site__color-null       : #FCD109;*/  /* yellow */
/*    --site__color-alt-bg     : #EB1C24;*/

    --site__color-accent     : #F36F24;
    --site__color-hilite     : color-mix(in srgb, var(--site__color-accent) 50%, var(--site__color-light));

    --site__color-heading    : #FFFFFF;
    --site__color-alert      : #F26E24;
	--site__color-link       : #41201F;

    --site__color-page       : #41201F;
    --site__color-back       : #F3E8DA;

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

    --xsl-width              : 0;
    --min-width              : 280px;
    --sml-width              : 576px;
    --mid-width              : 768px;
    --lrg-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);

    --fw-normal              : 400;
    --fw-bold                : 600;

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

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

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

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

body {
	color                    : var(--site__color-dark);
	background-color         : var(--site__color-back);
    max-width                : var(--std-width);

    font-size                : 1.2rem;
    height                   : 100%;
    min-height               : 100svh;
    margin                   : 0 auto;
    width                    : 100%;
}

img {
	max-width                : var(--std-width);

	display                  : block;
    width                    : 100%;
    -webkit-user-drag        : none;
/*    user-drag                : none;*/
}

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

a {
    color                    : inherit;
    font-weight              : var(--fw-bold);
    text-decoration          : none;
    &:hover {
        color                : var(--site__color-accent);
        text-decoration      : underline;
    }
}

/*
a[title]:hover::after,
label a[title]:hover::after,
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);  
}
*/

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

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

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

h1, h2, h3, h4, h5, h6 {
    color              : var(--site__color-heading);
	font               : var(--fw-bold) 3rem/1.3 var(--ff-regular);
    text-align         : center;
    text-wrap          : balance;
    text-transform     : uppercase;
    margin             : 0;
    padding            : 0 1rem;
}

h1 { font-size         : var(--fs-700); }
h2 { font-size         : var(--fs-600); } 
h3 { font              : var(--fw-bold) 3rem/1.3 var(--ff-condensed);
     font-size         : var(--fs-500); }
h4 { font-size         : var(--fs-400); }
h5 { font-size         : var(--fs-300); }
h6 { font-size         : var(--fs-300); }

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

hr {
    border             : none;
    border             : 1px solid var(--site__color-heading);
    border-radius      : 100vw;
    width              : 100%;
    text-align         : center;
}

   /* ********************************* *
    * *  L A B E L S  &  A L E R T S  * *
    * ********************************* */

label {
    color              : var(--site__color-dark);
    font               : var(--fw-normal) 1.1rem/1.2 var(--ff-regular);
	display            : inline;
}

.alert {
    color              : var(--site__color-alert);
    display            : block;
    font-size          : 0.9em;
    font-weight        : var(--fw-bold);
    line-height        : 1.1;
    padding            : 0.1em 0 0 0;
}

   /* ********************************* *
    * *   T E X T   V A R I A N T S   * *
    * ********************************* */

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

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

.content {
    position           : relative;
    width              : 100%;
    max-width          : var(--std-width);
    padding            : 0 2rem 1rem 2rem;
    margin             : 0 auto;
}

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

.content ol {
    list-style         : decimal inside;
}

.content ul {
    list-style         : disc outside;
    padding-left       : 20px;
}
    .content ul li {
        margin-bottom  : 0;
    }
    .content .r {
        text-align     : right;
        padding-inline : 20px;
    }

@media screen and (width > 768px) {
    .content {
        padding        : 0 4rem 2rem 4rem;
    }
    .content ol {
        list-style     : decimal outside;
    }
}