body {
    --colour-1: hsl(16, 100%, 61%);
    --colour-2: hsl(182, 42%, 39%);
    --colour-3: hsl(271, 100%, 61%);
    --colour-4: hsl(45, 100%, 61%);

	background-image: linear-gradient(in oklch 127deg, var(--colour-1), var(--colour-2), var(--colour-3), var(--colour-4));
    background-repeat: no-repeat;
    font-size: 1.2rem;
}

    .title-hdr {
        position:relative;
        min-width:var(--min-width);
        text-align: center;
        z-index:2;
        }

    .title-hdr::first-letter {
        text-transform: lowercase;
    }
            
    #titleHdr:after {
        content:"dashWoorkZ Sovereign Society";
        width:60%;
        min-height:5rem;
        font-size: clamp(2rem, 2ch + .5rem, 2rem);
        font-weight:800;
        line-height:1.5;
        letter-spacing:0.3vw;
        -webkit-text-fill-color: var(--bc-blue);
        -webkit-text-stroke: 0.03rem solid var(--bc-gold);
        text-shadow:var(--titleShadow);
        transition: all 500ms ease-in-out;
    }
        
    #titleHdr:hover:after {
        -webkit-text-fill-color: var(--bc-red);
        -webkit-text-stroke: 0.03rem solid var(--bc-blue-accent-light);
        text-shadow:var(--titleShadowHover);
    }

/* /// End Header \\\ */

/* /// Start Main \\\ */
    main {
        grid-area: main;
        display: grid;
        position: relative;
        padding: 1rem 1rem;
        grid-template-columns: auto-fit minmax(30rem, repeat(3, 1fr));
        grid-template-rows: auto;
        grid-template-areas:
        'promos promos promos'
        'deys deys deys'
        'ttk ttk ttk '
        'itw itw itw';
        place-content: center;
        gap: 2rem;
    }

    main #distractions {
        border: 0.4rem inset var(--bc-blue);
        outline: 0.2rem ridge var(--bc-gold);
        width: 100%;
        grid-area: deys;
        margin-block-start: 1rem;

        & #deysDist {
            display: inline flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            width: 100%;
             padding-inline: 1rem;
            padding-block: 0.5rem;
            border: 0.4rem inset var(--bc-gold);
            outline: 0.2rem ridge var(--bc-rebeccapurple);
            background-color: var(--bc-beige);

            & #deysLogo {
                max-width: 10rem;
                max-height: 10rem;
            }

            & #title {
                flex: 1;
                text-align: center;
                color: var(--bc-green);
                text-shadow: 0.02675rem 0.02675rem 0.02675rem var(--bc-orange), -0.02675rem -0.02675rem -0.02675rem var(--bc-rebeccapurple-light);
                font-size: clamp(6rem 6.2ch, 6.5rem);
                letter-spacing: 0.05rem;
                font-weight: 700;
                width: 100%;
                text-transform: capitalize;
            }
            
            & #openDist {
                text-align: center;
                padding-inline: 0.5rem;
                padding-block: 0.5rem;
                border: 0.1rem solid var(--bc-rebeccapurple);
                outline: 0.2rem ridge var(--bc-gold);
                background-color: var(--bc-orange-accent-dark);
                color: var(--bc-blue);
                text-shadow: 0 0.1rem 0.1rem var(--bc-gold);
                font-size: clamp(1.1rem, 1.1ch, 1.4rem);
                font-weight: 700;
                letter-spacing: 0.05rem;
                border-radius: 0.5rem;
                transition: all 500ms ease-in-out;
                
                &:hover {
                    color: var(--bc-green);
                    text-shadow: 0 -0.2675rem -0.2675rem var(--bc-blue);
                    border: 0.1rem solid var(--bc-rebeccapurple);
                    outline: 0.2rem ridge var(--bc-orange);
                    background-color: var(--bc-orange-accent-light);
                }
            }
        }
    }

    #distPlayground {
        display: inline grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
        ' . play . ';
        width: 100%;
       
    }

    #distPlayground #playground {
        grid-area: play;
        display: none;
        max-height:50rem;
        max-width: 50rem;
    }

    main #distractions #distProjs {
        display:inline flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        gap: 1rem;
        padding-block: 1rem;
        box-shadow: 0.02675ren 0.055rem 0.1.1rem var(--bc-rebeccapurple-light);
        margin-inline: auto;
        width: 100%;
        }
        
        main #distractions #distProjs .project {
         display: inline flex;
         justify-content: center;
         align-items: center;
         max-width: 50rem;
         max-height: 50rem;
         padding-inline: 0.05rem;
         position: relative;
         z-index: 1;
         }
    main #distractions #distProjs .project .originalVideo {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: clamp(0.8rem, 1ch, 1.2rem);
        z-index: 3;
        color: transparent !important;
        text-shadow: 0.02675rem 0.02675rem 0.02675rem transparent !important;
        transition: all 500ms ease-in-out;
        }
        
        main #distractions #distProjs .project .originalVideo:hover {
            color: var(--bc-dodgerblue);
            text-shadow: 0.02675rem 0.02675rem 0.02675rem var(--bc-rebeccapurple);
        }

    main #distractions #distProjs .project .distraction {
        width: 13rem;
        height: 11.5rem;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
        'title title'
        'hdr hdr'
        'ack ack';
        grid-template-rows: auto;
        padding-inline: 0.5rem;
        padding-block: 0.5rem;
        border: 0.2rem groove var(--bc-green);
        outline: 0.2rem ridge var(--bc-orange);
        background-color: var(--projects-bg);
        border-radius: 1rem 2.5rem 1.75rem 2.5rem;
        z-index: 1;
    }
            
            
    main #distractions #distProjs .project .distraction .header {
        display: inline flex;
        justify-content: space-between;
        align-items: center;
        grid-area: hdr;
        width: 100%;
    }
                
    main #distractions #distProjs .project .distraction .header img {
    margin-inline: auto;
    max-width: 4rem;
    
}
        
    main #distractions #distProjs .project .distraction h2 {
    color: var(--bc-green);
    text-shadow: 0 0.05rem 0.1rem var(--bc-dodgerblue);
    font-weight: 700;
    letter-spacing: 0.1rem;
    line-height: 1.2;
    font-size: clamp(1rem, 1.2ch, 1.5rem);
    text-align: center;
    vertical-align: middle;
    grid-area: title;
}


    main #distractions #distProjs .project .distraction .launchPad {
        border: 0.1rem solid var(--bc-rebeccapurple);
        outline: 0.1rem ridge var(--bc-blue);
        background-color: var(--launcpad-bg);
        color: var(--bc-dodgerblue);
        text-shadow: 0.02675rem 0.02675rem 0.02675rem var(--bc-rebeccapurple);
        font-size: clamp(1rem, 1.2ch, 1.5rem);
        font-weight: 700;
        letter-spacing: 0.05rem;
        text-align: center;
        padding-inline: 0.5rem;
        padding-block: 0.5rem;
        border-radius: 1rem;
        vertical-align: middle;
        transition: all 500ms ease-in-out;
        
        &:hover {
        border: 0.1rem solid var(--bc-blue);
        outline: 0.2rem ridge var(--bc-purple);
        outline-offset: 0.05rem;
        background-color: var(--bc-dodgerblue);
        color: var(--primary-gold);
        text-shadow: 0.02675rem 0.02675rem 0.02675rem var(--bc-blue);
        }
    }
 
    main .banner__items {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-inline: auto;
        flex-basis: 50rem;
    }

    main .merchPromo {
        justify-content: space-between;
        display: inline flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
        padding-inline: 1rem;
        padding-block: 1rem;
        width: 100%;
        border: 0.4rem inset var(--bc-blue);
        outline: 0.4rem ridge var(--bc-gold);
        outline-offset: 0.1rem;
        grid-area: promos;
    }

    main .merchPromo .mug {
        order: 1;
    }
    main .merchPromo .hoodie {
        order: 3;
    }
    main .merchPromo .everDash {
        order: 2;
    }

    main .merchPromo  .promo__title h1{
        color: var(--bc-gold);
        text-shadow: 0 0.05rem 0.1rem var(--bc-dodgerblue);
        font-weight: 700;
        letter-spacing: 0.1rem;
        line-height: 1.2;
        font-size: clamp(2rem, 2ch, 2.5rem);
        text-align: center;
        max-width: 100%;
    }

    main .merchPromo  .promo__title h2{
        color: var(--bc-gold);
        text-shadow: 0 0.05rem 0.1rem var(--bc-rebeccapurple);
        font-weight: 700;
        letter-spacing: 0.1rem;
        line-height: 1.2;
        font-size: clamp(2rem, 2ch, 2.5rem);
        text-align: center;
    }

    main .merchPromo .promo__title p a{
        font-size: clamp(1.25rem, 1.27ch, 1.5rem);
        text-transform: lowercase;
    }

    main .banner__items > .item {
        flex-basis: 12.5rem;
    }

    main .banner__items > .item .listing {
        color: var(--bc-blue-accent-light);
        text-shadow: 0 0.05rem 0.1rem var(--bc-gold);
        font-weight: 700;
        letter-spacing: 0.1rem;
        line-height: 1.2;
        font-size: clamp(1rem, 1vsw + 0.5rem, 1.5rem);
        text-align: center;
    }

    main .banner__items > .item .product {
        color: var(--bc-gold);
        text-shadow: 0 0.05rem 0.1rem var(--bc-blue-accent-light);
        font-weight: 700;
        letter-spacing: 0.1rem;
        line-height: 1.2;
        font-size: clamp(1rem, 1vsw + 0.5rem, 1.5rem);
        text-align: center;
    }
    main .merchPromo #promoTitle p {
        width: 100%;
        color: var(--bc-rebeccapurple);
        text-shadow: 0.05rem 0.1rem 0.1rem var(--bc-gold);
        font-weight: 700;
        letter-spacing: 0.1rem;
        line-height: 1.2;
        font-size: clamp(2rem, 2ch + 0.5rem, 2.5rem);
        text-align: center;
        padding-block: 1rem;
        text-transform: uppercase;
    }

/* ///=== Temcon TTK Start ===\\\ */
     main .temcon-ttk {
         grid-area:ttk;
        display: grid;
        grid-template-columns: minmax(auto-fit, repeat(3, 1fr));
        grid-template-rows: auto;
        gap: 2rem;
        border: 0.4rem inset var(--bc-blue);
        outline: 0.4rem ridge var(--bc-gold);
        outline-offset: 0.2rem;
        padding-inline: 1rem;
        padding-block: 1.5rem;
        align-self: left;
        border-radius: 0.5rem 0.5rem 0 0;
        max-width: 100%;
     }

     main .temcon-ttk .ttk-info {

        & h1 {
            font-weight: 700;
            letter-spacing: 0.1rem;
            line-height: 1.2;
            font-size: clamp(2rem, 2ch, 2.5rem);
            color: var(--bc-blue-accent-light);
            text-shadow: 0 0.05rem 1rem var(--bc-rebeccapurple);
            }
        & h2 {
            font-weight: 700;
            letter-spacing: 0.1rem;
            line-height: 1.2;
            font-size: clamp(1.5rem, 1.5ch, 2rem);
            color: var(--bc-rebeccapurple);
            text-shadow: 0 0.05rem 1rem var(--bc-blue-accent-light);   
            }

          &  p {
                text-align: center;
                font-weight: 700;
                letter-spacing: 0.1rem;
                line-height: 1.2;
                font-size: clamp(1rem, 1ch, 1.5rem);
                color: var(--bc-blue-accent-light);
                text-shadow: 0 0.05rem 05rem var(--bc-blue);
                max-width: 80rem;
                margin-inline: auto;

                & a {
                  font-size: clamp(1.5rem, 1.5ch, 2rem);
                  letter-spacing: 0.1rem;
                } 
            }
        }

    main .temcon-ttk .ttk-imgs {
        display: grid;
        grid-template-columns: auto-fit minmax(30rem, repeat(2, 1fr));
        grid-template-areas: 
        'info info'
        'links links';
        align-content: center;
        position: relative;
        gap: 1rem;

        & div {
          transition: all 1000ms ease-in-out;
        }

     }
     

    main .temcon-ttk .ttk-imgs p {
                text-align: center;
                font-weight: 700;
                letter-spacing: 0.1rem;
                line-height: 1.2;
                font-size: clamp(1rem, 1ch, 1.5rem);
                color: var(--bc-beige);
                text-shadow: 0 0.05rem 05rem var(--bc-blue-accent-light);
                max-width: 100%;
                margin-inline: auto;
                transition: all 300ms ease-in-out;
                grid-area: info;
                
                & strong {
                    font-size: 2rem;
                    color: var(--bc-gold);
                    text-shadow: 0 0.05rem 05rem var(--bc-accent-purple);
                }

                & a {
                  font-size: clamp(1.5rem, 1.5ch, 2rem);
                  letter-spacing: 0.1rem;
                } 
            }

    main .temcon-ttk .ttk-imgs .inst-set__links {
        display: inline flex;
        justify-content: space-evenly;
        align-items: center;
        transition: all 300ms ease-in-out;
        grid-area: links;
        
            & button {
                border: 0.2rem solid var(--bc-blue);
                outline: 0.3rem ridge var(--bc-gold);
                outline-offset: 0.1rem;
                background-color: var(--bc-blue-accent-light);
                color: var(--bc-blue);
                text-shadow: 0 0.1rem 0.1rem var(--bc-gold);
                letter-spacing: 0.1rem;
                line-height: 1.2;
                font-family: "Times New Roman";
                font-size: clamp(1rem, 1.5ch, 2rem);
                padding-inline: 0.75rem;
                padding-block: 1rem;
                font-weight: 700;
                border-radius: 0.5rem;
                transition: all 500ms ease-in-out;
                min-width: 15rem;
                
                &:hover {
                    border: 0.2rem solid var(--bc-gold);
                    outline: 0.3rem ridge var(--bc-blue);
                    outline-offset: 0.1rem;
                    background-color: var(--bc-beige);
                    color: var(--bc-gold);
                    text-shadow: 0 0.1rem 0.1rem var(--bc-blue);
                }
            }

            & .tcImg__1 {
                display: flex;
                align-content: center;
                grid-area: tc1;
                max-width: 15rem;
                }
        }
/* \\\=== End TemCon TTK ===/// */

    /* ///=== In The Works ===\\\ */

    main .in-the-wrx {
        grid-area: itw;
        display: grid;
        grid-template-columns: auto-fit minmax(30rem,repeat(3, 1fr));
        grid-template-areas:
        'title title title' 
        'itwp itwp itwp'
        'info info info';
        align-content: center;
        gap: 1rem;
        place-content: center;
        border: 0.4rem inset var(--bc-blue);
        outline: 0.4rem ridge var(--bc-gold);
        outline-offset: 0.2rem;
        padding-inline: 1rem;
        padding-block: 1.5rem;
        border-radius: 0.5rem 0.5rem 0 0;

        & h1 {
            font-size: clamp(3rem, 3ch, 3.5rem);
            letter-spacing: 0.2rem;
            color: var(--bc-gold);
            text-shadow: 0 0.1rem 0.2rem var(--bc-rebeccapurple);
            padding-left: 1rem;
            grid-area: title;
        }

        & p {
            background-color: var(--bc-purple-light);
            font-size: clamp(1.25em, 1.25ch, 1.5rem);
            letter-spacing: 0.2rem;
            color: var(--bc-gold);
            text-shadow: 0 0.1rem 0.2rem var(--bc-rebeccapurple);
            padding-inline: 1rem;
            text-align: center;
            max-width: 75ch;
            padding-block: 0.5rem;
            grid-area: info;
            margin-inline: auto;
        }

        & .itw_projects  {
            display: inline flex;
            align-items: center;
            justify-content: center;
            flex-wrap: nowrap;
            gap: 3rem;
            width: 90dvw;
            margin-inline: auto;
            grid-area: itwp;
        }
    }
    @media (width < 60rem) {
        main .in-the-wrx .itw_projects{
            flex-wrap: wrap;
        }
        
        main #distractions #distProjs{
            justify-content: center;

            & .project {
                flex-basis: 100%;
            }
        }

        main #distractions #deysDist {
           

            & #deysLogo,
            & #title,
            & .openDist {
                flex-basis: 100%;
            }
        }

        main .in-the-wrx p {
            font-size: clamp(0.8em, 0.8ch, 1em);
            padding-inline: 0.5rem;
            max-width: 90%;
        }

        main .in-the-wrx h1 {
            font-size: clamp(2em, 2ch, 2.5em);
        }

        main .merchPromo .merch {
            margin-inline: auto;
        }

        main .merchPromo .mug {
            order: 3;
        }
        main .merchPromo .hoodie {
            order: 2;
        }
        main .merchPromo .everDash {
            order: 1;
            flex-basis: 100%;
        }
        }

main .in-the-wrx .itw_projects .itw_project {
        max-width: 25rem;
        min-height: 32.5rem;
        border: 0.4rem inset var(--bc-gold);
        outline: 0.4rem ridge var(--bc-blue);
        outline-offset: 0.2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        vertical-align: middle;
        padding-inline: 0.5rem;
        padding-block-end: 1rem;
        padding-block-start: 0.5rem;

        &  p {
            text-align: center;
            font-weight: 700;
            letter-spacing: 0.1rem;
            line-height: 1.2;
            font-size: clamp(1rem, 1ch, 1.5rem);
            color: var(--bc-rebeccapurple);
            text-shadow: 0 0.05rem 05rem var(--bc-gold);
            max-width: 90svw;
            margin-inline: auto;
            background-color: rgba(204, 204, 243, 0.5);
        }

        & .project {
            width: 100%;
        }

        & .project .prodImg {
            position: relative;
            display: flex;
            flex-direction: column;
            background-color: hsl(60, 56%, 91%, 0.5);
        }

        & h1 {
            font-size: clamp(2rem, 2ch, 2.5rem);
            letter-spacing: 0.1rem;
            line-height: 1.2;
            font-weight: 700;
            color: var(--bc-gold);
            text-shadow: 0 0.05rem 0.1rem var(--bc-rebeccapurple);
            transition: all 500ms ease-in-out;

            &:hover {
                text-shadow: 0 0.01rem 0.5rem var(--bc-dodgerblue), 0 -0.01rem 0.5rem var(--bc-dodgerblue);
            }
        }

        & .project__title {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-block: 0.5rem;

            & img {
                max-width: 5rem;
            }
        }

    }
  
    main .in-the-wrx .itw_projects #r3c {
        grid-area: r3c;
        
         & .project .prodImg {
            position: relative;
            display: flex;
            flex-direction: column;
            background-color: hsl(60, 56%, 91%, 0.3);
            
            & .download {
                z-index: 2;
                text-align: center;
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
        }

        & h2,
        & a {
            margin-inline: auto;
        }

        & a {
            color: rebeccapurple;
            text-shadow: 0 0.01rem 0.01rem var(--bc-gold);
            font-size: clamp(1.2rem, 1.2ch, 1.5rem);
            cursor:grabbing;
        }
    }

   main .in-the-wrx .itw_projects #coins {
        grid-area: coin;
       
    }

    main .in-the-wrx .itw_projects #crafts {
        grid-area: crafts;
        
        & .project .prodImg {
            max-width: 21.875rem;
            margin-inline: auto;
        }
       
    }

    main .in-the-wrx .itw_projects #r3c div .prodImg .alert {
        font-size: clamp(1.5rem, 1.5ch, 2rem);
        color: var(--bc-yellow);
        text-shadow: 0 0.05rem 1.25rem var(--bc-blue);
        letter-spacing: 0.125rem;
        line-height: 1.5;
        font-weight: 700;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        text-align: center;
        padding-block-start: 1rem;
    }

    main .in-the-wrx .itw_projects #r3c div .prodImg .alert a {
        font-size: clamp(1.5rem, 1.5ch, 2rem);
        color: var(--bc-dodgerblue);
        text-shadow: 0 0.05rem 1.25rem var(--bc-yellow);
    }

    /* ///=== End In The Works ===\\\ */

 /* ///=== Merch Animated Promos ===\\\ */
    main .merchPromo {
        padding-block-start: 2rem;
    }

    main .merchPromo .merch {
        position: relative;
        --bg-image: url("../imgs/tspring/painters_pallet_thumb.png");
        --bg-image-opacity: 0.25;
        
        width: 100%;
        max-inline-size: 40rem;
        max-height: 20rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;       
        z-index: 2;
        background-color: var(--bc-beige);
        isolation: isolate;
        box-shadow: 0 -0.2rem 0.5rem 0.5rem var(--bc-gold), 0 0.2rem 0.5rem 0.5rem var(--bc-gold);
        margin-bottom: 2.5rem;
        padding-block-start: 2rem;

        & a,
        & img {
            margin-inline: auto;
        }
    }
    
    main  .merchPromo .merch::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        opacity: var(--bg-image-opacity);

        background-image: var(--bg-image);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        } 

    main  .merchPromo .merch .tee {
        max-width: 9.375rem;
        max-height:4.734375rem;
        z-index:4;
        filter: drop-shadow(-0.2rem -0.3rem var(--bc-merch-shadow));
        
        }
    
    main .merchPromo .merch .bag {
        max-width: 9.375rem;
        max-height:4.734375rem;
        filter: drop-shadow(0.3rem -0.4rem var(--bc-merch-shadow));
        }
    
    main .merchPromo .merch .anim {
        max-width: 12.5rem;
        max-height: 6.3125rem;
        animation: clr 8000ms ease-in-out infinite;
        animation-delay: 5000ms;
        filter: drop-shadow(-0.2rem -0.3rem var(--bc-merch-shadow));
    }

    @keyframes clr {
        0% {
            color: var(--bc-blue);
            text-shadow: 0 0.05rem 0.1rem var(--bc-primary-orange);
            filter: drop-shadow(-0.2rem -0.3rem var(--bc-merch-shadow));
        }
        25% {
            animation-play-state: paused;
            color: var(--bc-gold);
            text-shadow: 0 0.05rem 0.1rem var(--bc-rebeccapurple);
            filter: drop-shadow(0.2rem -0.3rem var(--bc-beige));
        }
        50% {
            animation-play-state: running;
            color: var(--bc-green);
            text-shadow: 0 0.05rem 0.1rem var(--bc-primary-orange);
            filter: drop-shadow(0.2rem 0.3rem var(--bc-rebeccapurple));
        }
        75% {
            animation-play-state: paused;
            color: var(--bc-dodgerblue);
            text-shadow: 0 -0.05rem 0.1rem var(--bc-primary-red);
            filter: drop-shadow(-0.2rem 0.3rem var(--bc-primary-orange));
        }
        95%{
            animation-play-state: running;
            color: var(--bc-rebeccapurple);
            text-shadow: -0 0.05rem -0.1rem var(--bc-yellow);
            filter: drop-shadow(-0.2rem -0.3rem var(--bc-dodgerblue));
        }
        100% {
            color: var(--bc-blue);
            text-shadow: 0 0.05rem 0.1rem var(--bc-primary-orange);
            filter: drop-shadow(-0.2rem -0.3rem var(--bc-merch-shadow));
        }
    }

    main .merchPromo .promoPic {
        display: inline flex;
        justify-content: center;
        align-items: center;
        max-width: 12.5rem;
        max-height: 12.5rem;
        padding-inline: 2rem;

        
        & img {
            width: 100%;
            max-width: 12.5rem;
            border-radius: 0.5rem;
            border: 0.2rem ridge var(--bc-rebeccapurple);
        }
    }
/* ///=== End Animated Merch Advert ===\\\ */

/* ///=== Footer Styling ===\\\ */
/* ///=== Site Menu CSS3 ===\\\ */

.site__menu{
  
    & #siteMenu {
       
        & .site__links {
            
            & .home__link {
                border-radius: 2.5rem 1rem 1rem 2.5rem;
                margin-inline-start: 1.5rem;
                padding-inline-start: 0.5rem;
                position: relative;
                    
                & a {
                    display: flex;
                    justify-content: flex-start;
                    
                    &:hover::after {
                        content:"Sovereign Living";
                        position: absolute;
                        left: -2rem;
                        top: -2rem;
                        color: var(--bc-blue);
                        text-shadow: 0 0 0.01675rem var(--bc-gold);
                        font-size: clamp(0.8rem, 1ch, 1rem);
                        letter-spacing: 0.05rem;
                        font-weight: 700;
                    }

                    @media (max-width: 40rem) {
                        &:hover::after {
                            left: 0;
                            top: -2rem;
                        }
                    }
                }
            }                       
        }
    }
}

/* \\\=== End Site Menu CSS3 ===/// */        
/* \\\=== End Footer ===/// */

/* /// start TemCon TTK Modal \\\ */

#landing #ttkPromoModal::backdrop {
        background: var(--bc-dodgerblue);
        opacity: 0.2;
    }
#ttkPromoModal {
    --bc-bg: var(--bc-skyblue);
    
    position:fixed;
    inset: 0;
    width: 100svw;
    height: 100svh;
    display: none;
    grid-template-columns: minmax(auto-fit, min(50rem, 1fr));
    place-content: center;
    background-color: var(--bc-bg);
    z-index: 10;
}

#ttkPromoModal .promo__ttk {

    --bc-txt-primary: var(--bc-blue);
    --bc-txt-secondary: var(--bc-gold);
    --bc-bg:var(--bc-beige);

    display: grid;
    grid-template-columns: minmax(auto-fit, min(30rem, 1fr));
    grid-template-areas:
    'ttkImg'
    'instr';
    gap:1rem;
    border: 0.5rem groove var(--bc-txt-primary);
    outline: 0.75rem ridge var(--bc-txt-secondary);
    padding-inline: 1rem;
    padding-block: 1.5rem;
    align-self: center;
    background-color: var(--bc-bg);
    max-width: 35rem;
    max-height: 60rem;
    margin-inline: auto;
    align-content: center;
    z-index: 10;
 }

 #ttkPromoModal .promo__ttk .ttk__imgs {
    display: grid;
    grid-template-columns: minmax(auto-fit, min(30rem, 1fr));
    grid-template-areas:
    'title'
    'subTitle'
    'promoImg'
    'info';
    gap:1rem;
    text-align: center;
    width: 100%;
    grid-area: ttkImg;
 }

 #ttkPromoModal .promo__ttk .ttk__imgs .promoImgs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    grid-area: promoImg;
    padding-inline: 0.5rem;
    gap: 1rem;
    width: 100%;
 }

#ttkPromoModal .promo__ttk .ttk__imgs .ttk__info p,
#ttkPromoModal .promo__ttk .ttk__instr p{

    --bc-txt-primary: var(--bc-blue);
    --bc-txt-secondary: var(--bc-gold);

    font-size: clamp(1rem, 1ch, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.05rem;
    color: var(--bc-txt-primary);
    text-shadow: 0 0.02675rem 0.02675rem var(--bc-txt-secondary);
    text-align: center;
 }

 #ttkPromoModal .promo__ttk .ttk__imgs .ttk__info {
    grid-area: info;
 }

 #ttkPromoModal .promo__ttk .ttk__imgs .ttk__instr {
    grid-area: instr;
 }

 #ttkPromoModal .promo__ttk .ttk__instr ul {
    display: inline flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    margin-inline: auto;

    & li {
        list-style: none;
    }
 }

 #ttkPromoModal .promo__ttk .ttk__imgs h1,
 #ttkPromoModal .promo__ttk .ttk__imgs h2,
 #ttkPromoModal .promo__ttk .ttk__instr h2 {

    --bc-txt-primary: var(--bc-dodgerblue);
    --bc-txt-secondary: var(--bc-gold);

    text-align: center;
    text-transform: capitalize;
    padding-block: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    color: var(--bc-txt-primary);
    text-shadow: 0 0.02675rem 0.02675rem var(--bc-txt-secondary);

 }


 #ttkPromoModal .promo__ttk .ttk__imgs h2 {
    font-size: clamp(1.2rem, 1.2ch, 1.5rem);
    grid-area: subTitle;
}
#ttkPromoModal .promo__ttk .ttk__imgs h1 {
    font-size: clamp(1.5rem, 1.5ch, 175rem);
    grid-area: title;
}
#ttkPromoModal .promo__ttk .ttk__imgs .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 1rem;
}

#ttkPromoModal .promo__ttk .ttk__instr code {

    --bc-txt-primary: var(--bc-gold);
    --bc-txt-secondary: var(--bc-blue);

    text-transform: none;
    color: var(--bc-txt-primary);
    text-shadow: 0 0.02675rem 0.02675rem var(--bc-txt-secondary);
    }

#ttkPromoModal .closeTTK {
    border: 0.2rem inset var(--bc-blue);
    outline: 0.2rem ridge var(--bc-rebeccapurple);
    background-color: var(--bc-beige);
    width: 10rem;
    margin-inline: auto;
}

/* /// End TemCon TTK Modal \\\ */

/* =====  start TemCon TTK3 Modal ===== */

#landing .tcTTK3::backdrop {
    background: var(--bc-dodgerblue);
    opacity: 0.2;
    display: flex;
    justify-content: center;
    align-items: center;
}

#ttk3Modal {
    --bc-bg: var(--bc-skyblue);

    position:fixed;
    inset: 0 auto 0 0;
    width: 100svw;
    max-height: 100%;
    overflow: auto;
    display: none;
    grid-template-columns: minmax(auto-fit, min(50rem, repeat(3,1fr)));
    place-content: center;
    background-color: var(--bc-bg);
    z-index: 10;
    padding-block: 60rem;
}


#ttk3Scroll {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100svw;
    min-height: 100%;
   margin-bottom: 10rem;
    margin-inline: auto;
}

.tcTTK3 {
    --bc-txt-primary: var(--bc-blue);
    --bc-txt-secondary: var(--bc-gold);
    --bc-bg:var(--bc-beige);
  
      display: inline grid;
      position: relative;
      gap: 2rem;
      border: 0.5rem groove var(--bc-txt-primary);
      outline: 0.75rem ridge var(--bc-txt-secondary);
      padding-inline: 1rem;
      align-self: center;
      border-radius: 0.75rem 0.75rem 0 0;
      max-width: 80%;
      max-height: 100%;
      margin-inline: auto;
      background-color: var(--bc-bg);
      z-index: 1;
   }
  
   #closeTTK3 {
          --bc-txt-primary: var(--bc-gold);
          --bc-txt-secondary: var(--bc-rebeccapurple); 
  
          position: fixed;
          left:15rem;
          top: 5rem;
          border: 0.3rem inset var(--bc-txt-primary);
          outline: 0.2rem ridge var(--bc-txt-secondary);
          background-color: var(--bc-bg);
          font-weight: 700;
          color: var(--bc-txt-primary);
          text-shadow: 0 0.02675rem 0.02675rem var(--bc-txt-secondary);
          max-width: 10rem;
          padding-inline: 0.5rem;
          padding-block: 0.5rem;
          font-size: clamp(1rem, 1ch, 1.2rem);
          letter-spacing: 0.05rem;
          border-radius: 0.5rem;
          z-index: 3;
          cursor: pointer;
          transition: all 500ms ease-in-out;
  
          &:hover {
            --bc-txt-primary: var(--bc-rebeccapurple);
            --bc-txt-secondary: var(--bc-gold); 
  
            color: var(--bc-txt-primary);
            text-shadow: 0 0.02675rem 0.02675rem var(--bc-txt-secondary);
            border: 0.3rem inset var(--bc-txt-primary);
            outline: 0.2rem ridge var(--bc-txt-secondary);
          }
        }
  
  .tcTTK3 .ttk3__imgs {
    --bc-txt-primary: var(--bc-blue);
    --bc-txt-secondary: var(--bc-gold);
    
      display: flex;
      align-items: center;
      justify-content: space-around;
      position: relative;
   }
  
  .tcTTK3 .ttk3__info {
    --bc-txt-accent: var(--ttk-info);
    --bc-txt-primary: var(--bc-blue);
    --bc-txt-secondary: var(--bc-rebeccapurple);
  
      padding-block-end: 1.5rem;
      border-bottom: 0.5rem ridge var(--bc-txt-primary);
  
      & h1 {
          font-weight: 700;
          letter-spacing: 0.1rem;
          line-height: 1.2;
          font-size: clamp(2rem, 2ch, 2.5rem);
          color: var(--bc-txt-accent);
          text-shadow: 0 0.02675rem 02675rem var(--bc-txt-secondary);
          }
      & h2 {
          font-weight: 700;
          letter-spacing: 0.1rem;
          line-height: 1.2;
          font-size: clamp(1.5rem, 1.5ch, 2rem);
          color: var(--bc-txt-secondary);
          text-shadow: 0 0.02675rem 02675rem var(--bc-txt-accent);   
          }
  
          p {
              text-align: center;
              font-weight: 700;
              letter-spacing: 0.1rem;
              line-height: 1.2;
              font-size: clamp(1rem, 1ch, 1.5rem);
              color: var(--bc-txt-accent);
              text-shadow: 0 0.05rem 025rem var(--bc-txt-secondary);
              max-width: 80%;
              margin-inline: auto;
  
              & a {
                font-size: clamp(1.5rem, 1.5ch, 2rem);
                letter-spacing: 0.1rem;
              }
  
          }
      }
  
  .tcTTK3 .ttk-instr {
    padding-block-start: 1.5rem;
    display: grid;
    gap: 1rem;
  
  & h1 {
        font-weight: 700;
        letter-spacing: 0.1rem;
        line-height: 1.2;
        font-size: clamp(2rem, 2ch, 2.5rem);
        color: var(--bc-blue-accent-light);
        text-shadow: 0 0.05rem 1rem var(--bc-rebeccapurple);
        }
    & h2 {
        font-weight: 700;
        letter-spacing: 0.1rem;
        line-height: 1.2;
        font-size: clamp(1.5rem, 1.5ch, 2rem);
        color: var(--bc-rebeccapurple);
        text-shadow: 0 0.05rem 1rem var(--bc-blue-accent-light);   
        }
  
      &  ul,
      &  p {
            text-align: center;
            font-weight: 700;
            letter-spacing: 0.1rem;
            line-height: 1.5;
            font-size: clamp(1rem, 1ch, 1.5rem);
            color: var(--bc-blue-accent-light);
            text-shadow: 0 0.05rem 05rem var(--bc-blue-accent-light);
            max-width: 80%;
            margin-inline: auto;
  
            & a {
              font-size: clamp(1.5rem, 1.5ch, 2rem);
              letter-spacing: 0.1rem;
            } 
        }
    }
  
  .tcTTK3 .ttk-instr #owm {
    --bc-txt-primary: var(--bc-rebeccapurple);
    --bc-txt-secondary: var(--bc-gold);
  
        padding-block-start: 1.5rem;
        border-top: 0.5rem ridge var(--bc-txt-primary);
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
        
        & h2 {
            flex-basis: 90svw;
        }
  
        & p {
          max-width: 140ch;
          flex-basis: 100%;
          background-color: var(--bc-blue-subtle);
          padding-block: 1rem;
          padding-inline: 1rem;
          color: var(--bc-txt-primary);
          text-shadow: 0 0.05rem 05rem var(--bc-txt-secondary);
        }
      }
      
   .tcTTK3 #owm #owmInstr p {
        --bc-txt-primary: var(--bc-rebeccapurple);
        --bc-txt-secondary: var(--bc-gold);
        font-weight: 700;
        letter-spacing: 0.1rem;
        line-height: 1.5;
        font-size: clamp(1rem, 1ch, 1.25rem);
        color: var(--bc-txt-primary);
        text-shadow: 0 0.05rem 05rem var(--bc-txt-secondary);
    }
  
  .tcTTK3 .ttk-instr #owm #owmInstr #owmInstrImgs {
        display: grid;
        grid-template-columns: auto-fit minmax(40ch, repeat(4,1fr));
        grid-template-columns:
        'signUp apiInput apiInput apikey';
        grid-template-rows: auto;
        max-width: 90svw;
        gap: 1rem;
        margin-inline: auto;
  
        & .signUp {
          display: flex;
          justify-content: center;
          grid-area: signUp;
          max-width: 18rem;
          min-width: 15rem;
          grid-column: 1 / 2;
          grid-row: 1 / 2;
          margin-inline: auto;
        }
  
        & .apikey-entry {
          display: flex;
          justify-content: center;
          align-items: center;
          grid-area: apiInput;
          min-width: 100%;
          grid-column: span 2;
          grid-row: 1 / 2;
        }
  
        & .create-apikey {
          display: flex;
          justify-content: center;
          align-items: center;
          grid-area: apikey;
          max-width: 18rem;
          min-width: 15rem;
          grid-column: 4 / 5;
          grid-row: 1 / 2;
        }
      }
  
  
  @media (max-width: 34rem) {
  
  .tcTTK3 .ttk-instr #owm {
          flex-wrap: wrap;
      }
    
  .tcTTK3 .ttk-instr #owm #owmInstr #owmInstrImgs {
          display: grid;
          grid-template-columns: 1fr;
          grid-template-areas:
          'signUp'
          'apikey'
          'apiInput';
          grid-template-rows: auto;
       }
  .tcTTK3 .ttk-instr #owm #owmInstr #owmInstrImgs .signUp {
            grid-column: 1 / -1;
            grid-row: 1 / 2;
            margin-inline: auto;
            max-width: 90svw;
            min-width: 15rem;
          }
  
  .tcTTK3 .ttk-instr #owm #owmInstr #owmInstrImgs .create-apikey {
            grid-column: 1 / -1;
            grid-row: 2 / 3;
            margin-inline: auto;
            max-width: 90svw;
            min-width: 15rem;
          }
  
  .tcTTK3 .ttk-instr #owm #owmInstr #owmInstrImgs .apikey-entry{
            grid-column: 1 / -1;
            grid-row: 3 / 4;
            margin-inline: auto;
            max-width: 90svw;
            min-width: 15rem;
            min-height: 10rem;
      } 

      /* ///=== Footer Styling ===\\\ */
        footer .support {
            display: inline flex;
            inline-size: 100%;
            flex-direction: column;
            gap: 1.5rem;
        }

        footer .support .support__sponsors .nvca {
            display: inline flex;
            flex-direction: column;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            padding-inline: 1rem;
            padding-block: 0.5rem;
            border: 0.25rem groove var(--bc-rebeccapurple);
            outline: 0.25rem ridge var(--primary-gold);
            outline-offset: 0.15rem;
            filter: drop-shadow(0 0.1rem 0.4rem var(--bc-gold), 0 -0.1rem 0.4rem var(--bc-gold));
            min-width: 100%;

            & .book {
                display: inline flex;
                flex-direction: column;
                gap: 1.5rem;
            }
        }
    }
  
  @media (max-width: 60rem) {
  
      .ttk3__imgs {
          flex-wrap: wrap;
          gap: 1rem;
        }
  
      .tc-image__1 {
          order: 2;
      }
      .tc-image__2 {
          order: 1;
      }
      .tc-image__3 {
          order: 3;
      }
  
  .tcTTK3 #owm #owmInstr #owmInstrImgs {
        display: grid;
        grid-template-columns: auto-fit minmax(40ch, repeat(2,1fr));
        grid-template-areas:
        'signUp apikey'
        'apiInput apiInput';
        max-width: 90svw;
  
        & .signUp {
          grid-column: 1 / 2;
          grid-row: 1 / 2;
          max-width: 18.75rem;
        }
  
        & .create-apikey {
          grid-column: 2 / -1;
          grid-row: 1 / 2;
          max-width: 18.75rem;
        }
  
        & .apikey-entry{
          grid-column: span 2;
          grid-row: 1 / -1;
        }
    }

              footer .support .support__sponsors .nvca {
            display: inline flex;
            flex-direction: column;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            padding-inline: 1rem;
            padding-block: 0.5rem;
            border: 0.25rem groove var(--bc-rebeccapurple);
            outline: 0.25rem ridge var(--primary-gold);
            outline-offset: 0.15rem;
            filter: drop-shadow(0 0.1rem 0.4rem var(--bc-gold), 0 -0.1rem 0.4rem var(--bc-gold));
            min-width: 45%;
        }
  }
/* =====  End TemCon TTK3 Modal ===== */