@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {   
    
     interpolate-size: allow-keywords;
    
    /* ==// Color Scheme \\== */
    /* ///=== Primary And Accent Cours ===\\\ */
    --clr-primary-blue: hsl(240, 100%, 50%);
    --clr-primary-blue-accent: hsla(240, 100%, 50%, 0.3);
    --clr-primary-blue-accent-fill: hsla(240, 49%, 52%, 0.5);
    --clr-primary-blue-accent-light: hsl(192, 74%, 49%);
    --clr-accent-blue: hsl(184, 100%, 50%);
    --clr-primary-purple: hsl(300, 100%, 25%);
    --clr-primary-purple-accent: hsla(300, 100%, 25%, 0.3);
    --clr-primary-purple-accent-PN-BG-hover: hsl(281, 47%, 62%);
    --clr-primary-white: hsl(0, 0%, 100%);
    --clr-primary-red-accent-BG: hsl(305, 32%, 71%);
    --clr-accent-gold: hsl(51, 100%, 50%);
    --clr-primary-gold: hsl(51, 100%, 50%);
    --clr-primary-gold-accent-BG: hsla(40, 27%, 2%, 0.5);
    --clr-primary-gold-accent-BG-tabContent: hsla(43, 74%, 49%, 0.2);
    --bodyBackGround:linear-gradient(127deg, #ff6f3a, #3a8a8d, #a03aff, #ffce3a);
    --clr-primary-beige: hsl(60, 56%, 91%);
    --clr-primary-yellow: hsl(60, 100%, 50%);
    --clr-primary-green: hsl(120, 100%, 25%);
    --clr-primary-orange-accent: rgb(218, 165, 32);
    
    /* ///=== Named Colours ===\\\ */
    --weatherCont-BG: hsla(0, 0%, 100%, 0.3);
    --weatherCont-BS: hsla(0, 0%, 0%, 0.1);
    --weatherCont-Border:hsla(0, 0%, 100%, 0.1);
    --dodgerblue: hsl(210, 100%, 56%);
    --clr-mediaM-BG:hsl(212, 90%, 37%);
    --clr-titleHeader:hsl(212, 100%, 59%);
    --button-border: hsl(240, 83%, 14%);
    --titleShadow:  0 0.2vw 0.2vw hsl(0, 100%, 50%);
    --titleShadowHover: 0 0.2vw 0.2vw var(--clr-accent-blue);
    --clr-merch-shadow: hsl(347, 77%, 76%);
    --esc: hsla(0, 0%, 100%, 0.1);
    --transparent: transparent;

    /* ///=== Measures ==\\\ */
    --maxWidth: 100svw;
    --min-width:100%;
    --pad-div: 0.5rem 1rem;
    --pad05Rem: 0.5rem;
    --spacer: 1rem;
    --pad25Rem: 0.25rem;

    }

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
      scroll-behavior: smooth;
      scroll-padding-top: 3rem;
  }
}

html,
body {
    min-width: 100svw;
    min-height: 100svh;
    scroll-behavior: smooth;
}

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

button {
    cursor: pointer;
    text-wrap: wrap;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    display: inline block;
}

h1,
h2 {
    text-align: center;
}

li {
    list-style: none;
}

button,
a,
h1,
h2,
h3,
h4,
figcaption {
    padding-block: 0.5rem;
}

.grid-auto-fit {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(30ch, 1fr)));
    place-content: center;
}

.show {
    display: block;
    visibility: visible;
    opacity: 1;
  }

  .hide {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
  
  .header:hover::after {
        content: attr(data-tooltip);
        top: 2rem;
        left: 0;
        color: gold;
        text-shadow: 0.02675rem 0.02675rem 0.02675rem purple;
        font-size: clamp(0.8rem, 1ch, 1.2rem);
        font-weight: 700;
        z-index: 10;
        position: absolute;
        
        }


/* ///=== Lead CSS ===\\\ */


/* \\\=== End Lead CSS ===/// */
body {
	padding: 2rem 1,5rem;
	display: grid;
	grid-template-columns: 1fr;
	background-image:var(--bodyBackGround);
    background-repeat: no-repeat;
    font-size: 1.2rem;
}

#landing {  
	display: grid;
	position: relative;
	padding: 1rem 1rem;
	gap: 1.5rem;
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: auto;
	grid-template-areas:
	'header header'
	'main main'
	'footer footer';
    width: 100%;
}

/* /// Start Header \\\ */

    header {
        grid-area: header;
        display: grid;
        position: relative;
        grid-template-columns: auto-fit minmax(30rem, 3fr);
        grid-template-rows: auto;
        grid-template-areas:
        'verse verse verse'
        'brand brand brand'
        'time time time';
        place-content: center;
        outline: 0.4rem ridge var(--clr-accent-gold);
        outline-offset: 0.5rem;
        border-radius: 0.5rem;
        width: 90%;
        margin-inline: auto;
    }

    #lead,
    #date {
        display: flex;
        position: relative;
        min-height: 5rem;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-inline: 0.5rem;
        padding-block: 0.5rem;
        gap: 1rem;

        & .daily {
            order: 1;
        }

        & .menu {
            order: 2;
        }

        & #verses {
            order: 3;
        }
    }

    #lead {
        grid-area: verse;
        background-color:var(--clr-accent-blue);
        border-radius: 0.5rem 0.5rem 0 0;
        border-top: 0.4rem inset var(--clr-primary-purple);
        border-left: 0.4rem inset var(--clr-primary-purple);
        border-right: 0.4rem inset var(--clr-primary-purple);
        font-weight: 700;
        font-size:calc(1.2rem, 1.2svw, 1.5rem);
        font-family: "Righteous", sans-serif;
        font-weight: 700;
        font-style: normal;
        letter-spacing:0.1vw;
        line-height:1.2vw;
        color:var(--clr-primary-purple);
        text-shadow:0.03vw 0.01vw 0.02vw #ffffff;
        min-height: 3rem;
        z-index: 2;
    }

    #lead .menu button {
        border: 0.4rem ridge var(--clr-primary-gold);
        background-color: var(--clr-primary-beige);
        color: var(--dodgerblue);
        text-shadow: 0 0.1rem 0.2rem var(--clr-accent-gold);
        width: 4rem;
        height: 4rem;
        font-weight: 700;
        font-family: "Londrina Shadow", sans-serif;
        font-size: clamp(1rem, 1ch, 1.2rem);
        border-radius:50%;
        transition: all 500ms ease-in-out;
        text-align: center;
    }

    #lead .menu button:hover {
        border: 0.1rem inset var(--clr-primary-purple);
        outline: 0.1rem ridge var(var(--clr-primary-gold));
        background-color: var(--clr-primary-purple-accent-PN-BG-hover);
        color: var(--clr-primary-gold);
        text-shadow: 0 0.1rem 0.2rem var(--dodgerblue);
    }

    #lead .daily {
        display: flex;
        justify-content: center;
        align-items:center;
        min-width: 7rem;
        cursor: pointer;
    }

    #verses {
        position:relative;
        font-size: calc(0.8rem, 0.8svw, 1rem);
        font-weight: 700;
        font-family: righteous, sans-serif; 
        letter-spacing:0.2vw;
        line-height:1.2;
        color:blue;
        text-shadow:0 0.1rem 0.1rem var(--clr-accent-gold);
        text-align:center;
        margin-inline: auto;
        vertical-align:middle;
        max-width:90vsw;
        height:auto;
    }

    .mandatePolicy {
        grid-area: brand;
        width: 100%;
        display: inline flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding-block-start: 0.25rem;
        filter: drop-shadow(-0 -0.5rem -0.4rem var(--clr-accent-blue));
        border-left: 0.4rem inset var(--clr-primary-purple);
        border-right: 0.4rem inset var(--clr-primary-purple);
        text-align: center;


        & .dsslogo {
            grid-area: dss;
            width: 100%;
            width: 12.5rem;
            margin: 0 auto;
            
            & img {
                width: 100%;
                max-inline-size: 12.5rem;
                aspect-ratio: 1 / 1;
            }
        }

        & .dwrx {
            grid-area: dwrx;
            width: 100%;
            width: 12.5rem;
            margin:0 auto;
            
            & img {
                width: 100%;
                max-inline-size: 12.5rem;
                aspect-ratio: 1 / 1;
            }
  
        }
        & .sitePol {
            grid-area: brand;
            display: flex;
            justify-content: center;
            flex-wrap:wrap;
        }
    }
    @media (min-width: 40rem) {
        .mandatePolicy {
            grid-area: brand;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-areas:
            'dss  brand brand dwrx';
            place-content: center;
            padding-inline: 1rem;

        }

        #date,
        #lead {
            justify-content:space-evenly;
            align-items:center;
            padding: var(--pad-div);
            flex-wrap: nowrap;

            & .daily {
                order: 1;
            }
    
            & .menu {
                order: 3;
            }
    
            & #verses {
                order: 2;
            }
        }
    }
    
    .mandatePolicy .sitePol .ucc {
        color:gold;
        text-shadow:0 0.06rem 0.06rem var(--clr-accent-blue);
        font-size: 0.6rem;
    }

    .mandatePolicy .sitePol .ucc1308 p,
    .mandatePolicy .sitePol p {
        font-size: calc(0.8rem, 0.8svw, 1rem);
        font-weight: 700;
        font-family: righteous, sans-serif; 
        letter-spacing:0.1rem;
        line-height:1.2;
        color:blue;
        text-shadow:0 0.1rem 0.1rem var(--clr-accent-gold);
        text-align: center;
        width: 100%;
    }

    .mandatePolicy .sitePol .ucc1308 #cik {
        text-align: center;
        width: 100%;
        color: var(--clr-accent-gold);
        text-shadow: 0 0.1rem 0.2rem var(--clr-primary-purple);
        font-size: clamp(2rem, 2svh + .5rem, 2.5rem);
        font-weight: 700;
        letter-spacing: 0.2rem;
        line-height: 3rem;
        transition: all 500ms ease-in-out;
        animation: fadeIn 2000ms forwards;
        opacity: 0;
        visibility: hidden;
        }
        
        @keyframes fadeIn {
            0% {
            opacity: 0;
            visibility: hidden;
        }
        100% {
            opacity: 1;
            visibility: visible;
            }
        }

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

        .mandatePolicy .sitePol .ucc1308 .title-hdr::first-letter {
            text-transform: lowercase;
        }
            
    .mandatePolicy .sitePol .ucc1308 #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: blue;
        -webkit-text-stroke: 0.03rem solid var(--clr-accent-gold);
        text-shadow:var(--titleShadow);
        transition: all 500ms ease-in-out;
    }
        
    .mandatePolicy .sitePol .ucc1308 #titleHdr:hover:after {
        -webkit-text-fill-color: red;
        -webkit-text-stroke: 0.03rem solid var(--clr-accent-blue);
        text-shadow:var(--titleShadowHover);
    }

    #date {
        grid-area: time;
        display: flex;
        position: relative;
        justify-content:space-evenly;
        align-items:center;
        padding: var(--pad-div);
        background-color:var(--clr-accent-blue);
        border-radius: 0 0 0.5rem 0.5rem;
        border-bottom: 0.4rem inset var(--clr-primary-purple);
        border-left: 0.4rem inset var(--clr-primary-purple);
        border-right: 0.4rem inset var(--clr-primary-purple);
        font-weight: 700;
        font-size:calc(1.2rem, 1.2svw, 1.2rem);
        font-family: righteous, sans-serif;
        letter-spacing:0.1vw;
        line-height:1.2vw;
        color:var(--clr-primary-purple);
        text-shadow:0.03vw 0.01vw 0.02vw #ffffff;
        width: 100%;
        max-height: 3rem;
        z-index: 2;
    }

    #date > div {
        text-align:center;
        flex-basis: calc(var(--maxWidth) / 3);
    } 

/* /// 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 blue;
        outline: 0.2rem ridge 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 gold;
            outline: 0.2rem ridge purple;
            background-color: beige;

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

            & #title {
                flex: 1;
                text-align: center;
                color: green;
                text-shadow: 0.02675rem 0.02675rem 0.02675rem orange, -0.02675rem -0.02675rem -0.02675rem rgb(255, 0, 255);
                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 purple;
                outline: 0.2rem ridge gold;
                background-color: #E88B1A;
                color: blue;
                text-shadow: 0 0.1rem 0.1rem 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: green;
                    text-shadow: 0 -0.2675rem -0.2675rem blue;
                    border: 0.1rem solid rebeccapurple;
                    outline: 0.2rem ridge orange;
                    background-color: #F1CC68;
                }
            }
        }
    }

    #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 rgb(230, 67, 230);
        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(--dodgerblue);
            text-shadow: 0.02675rem 0.02675rem 0.02675rem var(--clr-primary-purple);
        }

    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 green;
        outline: 0.2rem ridge orange;
        background-color: rgb(50, 205, 205);
        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(--clr-primary-green);
    text-shadow: 0 0.05rem 0.1rem var(--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(--clr-primary-purple);
        outline: 0.1rem ridge blue;
        background-color: rgb(5, 72, 110);
        color: var(--dodgerblue);
        text-shadow: 0.02675rem 0.02675rem 0.02675rem var(--clr-primary-purple);
        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(--clr-primary-blue);
        outline: 0.2rem ridge var(--clr-primary-purple);
        outline-offset: 0.05rem;
        background-color: var(--dodgerblue);
        color: var(--primary-gold);
        text-shadow: 0.02675rem 0.02675rem 0.02675rem var(--clr-primary-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(--clr-primary-blue);
        outline: 0.4rem ridge var(--clr-accent-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(--clr-primary-gold);
        text-shadow: 0 0.05rem 0.1rem var(--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(--clr-primary-gold);
        text-shadow: 0 0.05rem 0.1rem var(--clr-primary-purple);
        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(--clr-accent-blue);
        text-shadow: 0 0.05rem 0.1rem var(--clr-accent-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(--clr-accent-gold);
        text-shadow: 0 0.05rem 0.1rem var(--clr-accent-blue);
        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(--clr-primary-purple);
        text-shadow: 0.05rem 0.1rem 0.1rem var(--clr-accent-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(--clr-primary-blue);
        outline: 0.4rem ridge var(--clr-accent-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(--clr-accent-blue);
            text-shadow: 0 0.05rem 1rem var(--clr-primary-purple);
            }
        & h2 {
            font-weight: 700;
            letter-spacing: 0.1rem;
            line-height: 1.2;
            font-size: clamp(1.5rem, 1.5ch, 2rem);
            color: var(--clr-primary-purple);
            text-shadow: 0 0.05rem 1rem var(--clr-accent-blue);   
            }

          &  p {
                text-align: center;
                font-weight: 700;
                letter-spacing: 0.1rem;
                line-height: 1.2;
                font-size: clamp(1rem, 1ch, 1.5rem);
                color: var(--clr-accent-blue);
                text-shadow: 0 0.05rem 05rem var(--clr-primary-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(--clr-primary-beige);
                text-shadow: 0 0.05rem 05rem var(--clr-accent-blue);
                max-width: 100%;
                margin-inline: auto;
                transition: all 300ms ease-in-out;
                grid-area: info;
                
                & strong {
                    font-size: 2rem;
                    color: var(--clr-primary-gold);
                    text-shadow: 0 0.05rem 05rem var(--clr-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(--clr-primary-blue);
                outline: 0.3rem ridge var(--clr-primary-gold);
                outline-offset: 0.1rem;
                background-color: var(--clr-accent-blue);
                color: var(--clr-primary-blue);
                text-shadow: 0 0.1rem 0.1rem var(--clr-primary-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(--clr-primary-gold);
                    outline: 0.3rem ridge var(--clr-primary-blue);
                    outline-offset: 0.1rem;
                    background-color: var(--clr-primary-beige);
                    color: var(--clr-primary-gold);
                    text-shadow: 0 0.1rem 0.1rem var(--clr-primary-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(--clr-primary-blue);
        outline: 0.4rem ridge var(--clr-accent-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(--clr-primary-gold);
            text-shadow: 0 0.1rem 0.2rem var(--clr-primary-purple);
            padding-left: 1rem;
            grid-area: title;
        }

        & p {
            background-color: rgb(204, 204, 243);
            font-size: clamp(1.25em, 1.25ch, 1.5rem);
            letter-spacing: 0.2rem;
            color: var(--clr-primary-gold);
            text-shadow: 0 0.1rem 0.2rem var(--clr-primary-purple);
            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 p {
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.1rem;
    line-height: 1.2;
    font-size: clamp(1rem, 1ch, 1.5rem);
    color: var(--clr-accent-blue);
    text-shadow: 0 0.05rem 05rem var(--clr-primary-blue);
    max-width: 90svw;
    margin-inline: auto;
    background-color: rgba(204, 204, 243, 0.5);
}
main .in-the-wrx .itw_projects .itw_project {
        max-width: 25rem;
        min-height: 32.5rem;
        border: 0.4rem inset var(--clr-accent-gold);
        outline: 0.4rem ridge var(--clr-primary-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;

        & .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(--clr-accent-gold);
            text-shadow: 0 0.05rem 0.1rem var(--clr-primary-purple);
            transition: all 500ms ease-in-out;

            &:hover {
                text-shadow: 0 0.01rem 0.5rem var(--dodgerblue), 0 -0.01rem 0.5rem var(--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 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(--clr-primary-yellow);
        text-shadow: 0 0.05rem 1.25rem var(--clr-primary-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(--dodgerblue);
        text-shadow: 0 0.05rem 1.25rem var(--clr-primary-yellow);
    }

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


    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(--clr-primary-beige);
        isolation: isolate;
        box-shadow: 0 -0.2rem 0.5rem 0.5rem var(--clr-primary-gold), 0 0.2rem 0.5rem 0.5rem var(--clr-primary-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(--clr-merch-shadow));
        
        }
    
    main .merchPromo .merch .bag {
        max-width: 9.375rem;
        max-height:4.734375rem;
        filter: drop-shadow(0.3rem -0.4rem var(--clr-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(--clr-merch-shadow));
    }

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

    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 rebeccapurple;
        }
    }
    
/* ///=== Footer Styling ===\\\ */
    footer{grid-area: footer;}
    footer {
        display: inline flex;
        padding: .25rem;
        text-align: center;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        max-width: 100%;
        gap: 1rem;
        position: relative;
    }

    footer p {
        display: inline flex;
        justify-content: center;
        align-items: baseline;
        max-width: 100%;
        font-size: clamp(0.8rem, 0.8ch, 1rem);
    }

/* ///=== Footer Styling ===\\\ */
    footer{grid-area: footer;}
    footer {
        display: inline flex;
        padding: .25rem;
        text-align: center;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        max-width: 100%;
        gap: 1rem;
        position: relative;
    }

    footer p {
        display: inline flex;
        justify-content: center;
        align-items: baseline;
        max-width: 100%;
        font-size: clamp(0.8rem, 0.8ch, 1rem);
    }

/*  ///=== Support Section ===\\\ */ 

    footer .support {
        display: inline flex;
        justify-content:space-evenly;
        align-items: center;
        max-width: 100%;
        padding-inline: 0.5rem;
    }

    footer .support .support__sponsors {
        display: inline grid;
        grid-template-columns: auto-fit minmax(1fr, repeat(2, 1fr));
        max-width: 45rem;
        gap: 2rem;

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

            & h1  {
                margin-block-end: 1rem;
                min-width: 100%;
                background-color: var(--clr-primary-beige);

                & a {
                font-size: clamp(1.5rem, 1.5ch, 1.75rem);
                min-width: 100%;
                padding-inline: 2rem;
                color: var(--clr-primary-green);
                text-shadow: 0 0.05rem 0.1rem var(--clr-primary-yellow);
                }
            }

            & .book {
                display: inline flex;
                justify-content: center;
                gap: 1rem;
                padding-inline-start: 0.5rem;
                padding-block: 0.5rem;
                align-items: center;
            }
        }
        
        & .nvca .book figure .book_cover {
            max-inline-size: 20rem;
            max-block-size: 35rem
        }

        & .nvca .book .book__desc{
            overflow-y: scroll;
            max-width: 25rem;
            max-height: 25rem;
            margin-right: 0.5rem;
            line-height: 1.5;
            color: var(--clr-primary-gold);
            text-shadow: 0 0.05rem 0.1rem var(--clr-primary-purple);
            gap: 1rem;
            

            & ul {
                margin-top: 1rem
                max-width: 90%;
                margin-inline: auto;
            }
            
            & .foreward {
                    text-align: center;
                    /*border: 0.25rem ridge var(--dodgerblue);*/
                    padding-inline: 0.5rem;
                    padding-block: 0.5rem
                    line-height: 1.5;
                }
            
            & ul {
                font-size: clamp(0.8rem, 0.8ch, 1rem);
            }
        }
    }

    footer .support .support-donations {
        padding-inline: 1rem;
        padding-block: 0.5rem;
    }
    
    footer .support .support-donations .bmac {
        margin-block-start: 1rem;
    }
     footer .support .support-donations .upma {
        margin-block-start: 1rem;
        inline-size: 12.5rem;
        aspect-ratio: 1 / .5;
        margin-inline: auto;
        border: 0.5rem groove var(--clr-primary-blue) ;
        outline: 0.2rem ridge var(--base-colour-gold);
        background-color: var(--clr-accent-blue);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: 0.5rem;
        flex-wrap: nowrap;
        padding-block: 1.5rem;
        /* padding-block-end: 1.5rem; */
        z-index: 1;
          }
        
        footer .support .support-donations .upma::after {
            /* position: absolute;
            left: 50%;
            top: 50%; */
            font-family: "Beau Rivage", cursive;
            content: "United Precious Metals Association";
            translate: -50%, -50%;
            font-weight: 700;
            color: var(--base-colour-green);
            text-shadow: 0 0 0.2rem var(--base-colour-gold), 0 0 -0.2rem var(--base-colour-gold);
            font-size: clamp(1.2rem, 1.2ch, 1.7rem);
            letter-spacing: 0.05rem;
            z-index:1;
            /* max-inline-size: 100%; */
            flex-basis: 1;
        }
        footer .support .support-donations .upma a {
           translate: -50%, 0%;
            position: absolute;
            
            margin: auto;
        }
         footer .support .support-donations .upma span {
             /* translate: -50%, -50%; */
            font-weight: 700;
            color: var(--base-colour-gold);
            text-shadow: 0 0.1rem 0.2rem var(--upma-bdr), 0 -0.1rem 0.2rem var(--upma-bdr);
            font-size: clamp(2.5rem, 2.5ch, 3.5rem);
            z-index:2;
            flex-basis: 1;
            /* max-inline-size: 100%; */
        }

    footer .support .support-donations h1 {
      font-size: clamp(2rem, 2.5ch, 2.5rem);
      font-weight: 700;
      letter-spacing: 0.1rem;
      line-height: 1.5;
      color: var(--clr-accent-blue);
      text-shadow: 0 0.1rem 0.2rem var(--clr-primary-gold);
    }

    
    footer .support .support-donations h2,
    footer .support .support-donations .edMini h2 {
      
      font-size: clamp(1rem, 1.2ch, 1.2rem);
      font-weight: 700;
      letter-spacing: 0.1rem;
      line-height: 1.5;
      color: var(--clr-primary-gold);
      text-shadow: 0 0.05rem 0.2rem var(--clr-primary-gold);
      text-transform: none;
    }

    footer .support .support-donations .edMini {

        gap: 1rem;

      & .mini {
          width: 100%;
          max-inline-size: 10rem;
          display: inline flex;
          font-size: clamp(0.8rem, 0.8ch, 1rem);
          gap: 1rem;
          text-align: center;
          color: var(--clr-accent-blue);
          text-shadow: 0 0.05rem 0.1rem var(--clr-primary-purple);
          border: 0.6em groove var(--clr-primary-blue-accent);
          outline: 0.2em ridge var(--clr-primary-gold);
          outline-offset: 0.25rem;
          box-shadow: 0 0.1rem 0.5rem var(--clr-primary-gold), 0 -0.1rem 0.5rem var(--clr-primary-gold);
          background-color: var(--clr-primary-beige);
          margin-inline-start: 0.5rem;
          border-radius: 1rem 0.5rem 1.5rem 0.5rem;
      }
    }

/*  \\\=== End Support Section ===/// */ 

            
    footer p {
     color:#f2931f;
     letter-spacing:0.2vw;
     text-shadow:0.05vw 0.05vw 0.05vw #d9c0ff, 0.05vw 0.05vw 0.05vw #44ebdd, 0.05vw 0.05vw 0.05vw #ffedc0; 
     font-weight:800;
    }
  
  
    /* ///=== Topper Menu ===\\\ */
        .site__menu{
            position: relative;
            width: 100%;
            max-inline-size: 18.75rem;
            /*
            Container wrapper for the "Site Menu" 
            For Positioning the "Site Menu" with "Sticky" or Absolute" 
            if other positional attributes are insufficient for its placement on  
            the page. 
            */
        
        
            /* ///=== Site Menu CSS3 ===\\\ */
            & #siteMenu {
                position: relative;
                display: flex;
                width: 18.75rem;
                min-height: 6.25rem;
                height: auto;
                align-items: center;
                    
                & > div {
                    align-items: center;
                }
        
                & .site__links {
                    display: inline flex;
                    z-index: 1;
                    width: 100%;
                    /* max-inline-size: 18.75rem; */
                    gap: 0.5rem;
                
                    & div {
                        display: flex;
                        width:3rem;
                        height: 3rem;
                        background-color: aqua;
                        border: 0.3rem groove gold;
                        outline: 0.3rem ridge purple;
                        flex-basis: 100%;
                        z-index: 1; 
                        align-items: center;
                        border-radius: 50%;
                        padding-block: 0.25rem;
                        padding-inline: 0.25rem;
                        
                        & a {
                            transition: all 300ms ease-in-out;

                            & img{
                                width: 100%;
                                max-inline-size: 2rem;
                                border-radius: 100%;
                                transition: all 300ms ease-in-out;
                                border: 0.1rem ridge rebeccapurple;

                                &:hover {
                                    border: 0.1rem ridge gold;
                                }
                            }
                        }
                    }

                    & .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: -3rem;
                                top: -2rem;
                                color: blue;
                                text-shadow: 0 0 0.01675rem gold;
                                font-size: clamp(1rem, 1.2ch, 1.2rem);
                                letter-spacing: 0.05rem;
                                font-weight: 700;
                            }

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

                    & .ed__link {
                        border-radius: 1rem 2.5rem 2.5rem 1rem;
                        margin-inline-end: 1.5rem;
                        padding-inline-end: 0.5rem;
                        position: relative;
                        justify-content: flex-end;
                        
                        & a {
                            display: flex;
                            justify-content: center;

                            &:hover::after {
                                content:"everythingDash";
                                position: absolute;
                                left: 2rem;
                                top: -2rem;
                                color: blue;
                                text-shadow: 0 0 0.01675rem gold;
                                font-size: clamp(1rem, 1.2ch, 1.2rem);
                                letter-spacing: 0.05rem;
                                font-weight: 700;
                            }

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

                }
                
                /* //=== Topper CSS# ===\\\ */        
                & .topper {
                    display: flex;
                    width:5rem;
                    height: 5rem;
                    border-radius: 50%;
                    background-color: aqua;
                    border: 0.3rem groove gold;
                    outline: 0.3rem ridge purple;
                    outline-offset: 0.125rem;
                    z-index: 5;
                    position: absolute;
                    left: 36%;
                    top:10%;
                    justify-content: center;
                    align-items: center;
                    transition: all 500ms ease-in-out;
                    
                    &:hover {
                        outline: 0.3rem ridge gold;
                    }
                        
                        
                    & .topper__img {
                        position: relative;
                        
                        & .img,
                        & .img a {
                            justify-content: center;
                            align-items: center;
                        }
                        
                        & .img {
                            position: absolute;
                            inset: 0;
                            display: inline flex;
                            z-index:10;
                        }
        
                    & .img a {
                            z-index: 2;
                            border: 0.2rem solid blue;
                            outline: 0.2rem ridge gold;
                            border-radius: 100%;
                            background-color:#136179;
                            cursor: pointer;
                            width: 5rem;
                            height: 5rem;
                            position: relative;
                            display: inline flex;
                            text-align: center;
                            color: rgb(14, 184, 236);
                            text-shadow: 0 0.05rem 0.1rem purple;
                            font-weight: 700;
                            font-size: clamp(2rem, 2ch, 2.5rem);
                            background-color: transparent;
                            cursor: pointer;
                            transition: all 500ms ease-in-out;
                                
                            &:hover {
                                color: gold;
                                text-shadow: 0 0.05rem 0.05rem blue;
                                outline: 0.2rem ridge purple;
                                background-color: rgb(4, 60, 70);
                                font-weight: 800;
                            }
                        }

                            & .img a #topImg {
                                position: absolute;
                                left:-0.2rem;
                                top:-0.2rem;
                                right:0;
                                bottom: 0;
                                max-width: 5rem;
                                max-height: 5rem;
                                z-index: 3;
                                opacity: 0.8;
                            }

                            & .img a .topText,
                            & .img a .topArrow {
                                letter-spacing: 0.1rem;
                                font-weight: 800;
                                line-height: 1.5;
                                align-items: center;
                                position: relative;
                            }
                            
        
                            & .img a .topText{
                                font-size: clamp(1.1rem, 1.1ch, 1.1rem);
                                z-index: 6;
                                display: inline flex;
                                justify-content: center;
                                align-items: center;
                            }
                                
                            & .img a .topArrow {
                                font-size: clamp(1.5rem, 1.5ch, 1.5rem);
                                z-index: 5;
                                justify-content: center;
                                align-items: center;
                            }                       
                        }
                }
                /* \\\=== End Topper ===/// */

            }
            /* \\\=== End Site Menu CSS3 ===/// */
        }
        
/* \\\=== End Footer ===/// */
    
/* ///=== Weather App ===\\\ */

    #landing #weather-container::backdrop {
        background: var(--dodgerblue);
        opacity: 0.2;
    }
 
    #weather-container {
        position:fixed;
        inset: 2rem 0 auto;
        background: var(--weatherCont-BG);
        max-width: 60rem;
        padding-block: 0.5rem;
        border-radius: 1rem;
        box-shadow: 0 8px 32px var(--weatherCont-BS);
        backdrop-filter: blur(0.625rem);
        border: 1px solid var(--weatherCont-Border);
        outline: 0.1rem inset var(--clr-accent-blue);
        text-align: center;
        text-shadow: 0 0.1rem 0.1rem var(--dodgerblue);

        display: flex;
        flex-direction: column;
        align-content: center;
        margin-inline: auto;
    }
    
    h2, label, p {
        color: #fff;
        text-shadow: 0 0.05rem 0.1rem var(--dodgerblue);
        margin: 8px 0;
        text-align: center;
    }

    #weather-container #weather-container .searchWeather {
        display: flex;
        justify-content: center;
    }

    #weather-container .searchWeather .wr__img {

        --bg-image: url("../imgs/logos/weatherReport_Logo_thumb.png");
        --bg-image-opacity: 1;

       position: relative;
        isolation: isolate;
        max-width: 12.5rem;

        height: 6.3125rem;
       inset: 0;
        display: flex;
        margin-inline: auto;
        align-items: center;
        z-index: 2;
        isolation: isolate;
        filter:drop-shadow0 -0.2rem 0.5rem 0.5rem var(--clr-primary-gold), 0 0.2rem 0.5rem 0.5rem var(--clr-primary-gold);
    }

    #weather-container .searchWeather .wr__img::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;
 
    }

    #weather-container .searchWeather .citySearch {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    
    #weather-container .searchWeather .citySearch input {
        max-width: 25rem;
        padding-inline: 0.5rem;
        padding-block: 0.5rem;
        box-sizing: border-box;
        border-radius: 10px;
        border: 1px solid hsl(0, 26%, 4%);
        outline: 0.1rem inset var(--clr-accent-blue);
        inset: 0 auto;
        text-transform: capitalize;
    }
    
    #weather-container .searchWeather .citySearch button {
        background: hsl(275, 71%, 85%);
        color: hsl(0, 0%, 100%);
        text-shadow: 0 0.05rem 0.1rem var(--dodgerblue);
        padding-inline: 0.625rem;
        padding-block: 0.5rem;
        border: 0.1rem inset var(--clr-primary-gold);
        outline: 0.1rem ridge var(--dodgerblue);
        border-radius: 10px;
        cursor: pointer;
        width: 100px;
        font-size: 15px;
        transition: all 500ms ease-in-out;
    }
    
    #weather-container .searchWeather .citySearch button:hover {
        background: hsl(268, 64%, 56%);
    }

    #weather-container .weatherReport {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #weather-container .weatherReport #report {
        display: grid;
        grid-template-columns: auto-fit minmax(30rem, repeat(2, 1fr));
        grid-template-areas:
        'current scales';
    }

    #weather-container .weatherReport #report #current  {
        grid-area: current;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-inline: 0.5rem;
    }

    #weather-container .weatherReport #report #current #conv-scales {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #weather-container .weatherReport #report #current #conv-scales .converted {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-block-start: 1.5rem;
        padding-block-end: 0.5rem;
    }

    #weather-container .weatherReport #report #current #conv-scales .converted span {
        flex-basis: 100%;
        max-width: 14rem;
        padding-inline: 0.5rem;
        padding-block: 0.5rem;
        font-size: clamp(2rem, 2.5ch, 3rem);
        color: var(--clr-primary-gold);
        text-shadow: 0 0.1rem 0.1rem var(--dodgerblue);
        font-weight: 700;
        letter-spacing: 0.1rem;
    }

    #weather-container .weatherReport #report #current .reported  {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }
        
    #weather-container .weatherReport #report #current .reported #temp-div {
        font-size: 48px;
    }
    
    #weather-container .weatherReport #report #current .reported #weather-info {
        font-size: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--clr-primary-gold);
        text-shadow: 0 0.05rem 0.1rem var(--dodgerblue);
    }

    #weather-container .weatherReport #forecast {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #weather-container .weatherReport #report #current .reported #weather-icon {
        width: 200px;
        height: 200px;
        /* margin-inline: auto;;  */
        display: none;
    }
    
    #weather-container .weatherReport #forecast #hourly-forecast {
        overflow-x: auto;
        white-space: nowrap;
        display: flex;
        justify-content: space-between;
        position: relative;
    }
    
    #weather-container .weatherReport #forecast #hourly-forecast .hourly-item {
        flex: 0 0 auto;
        width: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 10px;
        margin-bottom: 1rem;
        color: hsl(0, 0%, 100%);
        text-shadow: 0 0.05rem 0.1rem var(--dodgerblue);
        font-weight: 700;
    }
    
    #weather-container .weatherReport #forecast #hourly-forecast .hourly-item img {
        width: 30px;
        height: 30px;
        margin-bottom: 5px;
    }
    
    #weather-container .esc {
		display: inline flex;
		justify-content: flex-end;
		padding-inline: 1rem;
		align-items: center;
    }
    #weather-container .esc::after {
		content: "ESC to Exit";
		font-size: 1.5rem;
		font-weight: 700;
		font-family: Roboto, sans-serif;
		letter-spacing: 0.1rem;
		color: var(--transparent);
		text-shadow: 0 0.025rem 0 var(--esc);
    }
    
    #hourly-heading {
        color: hsl(0, 0%, 100%);
        text-shadow: 0 0.05rem 0.1rem var(--dodgerblue);
        margin-top: 10px;
    }
    
    #weather-container {
        scale: 0.8;
    }

    /* ///=== End Weather App ===\\\ */

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

#landing #ttkPromoModal::backdrop {
        background: var(--dodgerblue);
        opacity: 0.2;
    }
#ttkPromoModal {
    --clr-bg: 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(--clr-bg);
    z-index: 10;
}

#ttkPromoModal .promo__ttk {

    --clr-txt-primary: blue;
    --clr-txt-secondary: gold;
    --clr-bg:beige;

    display: grid;
    grid-template-columns: minmax(auto-fit, min(30rem, 1fr));
    grid-template-areas:
    'ttkImg'
    'instr';
    gap:1rem;
    border: 0.5rem groove var(--clr-txt-primary);
    outline: 0.75rem ridge var(--clr-txt-secondary);
    padding-inline: 1rem;
    padding-block: 1.5rem;
    align-self: center;
    background-color: var(--clr-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{

    --clr-txt-primary: blue;
    --clr-txt-secondary: gold;

    font-size: clamp(1rem, 1ch, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.05rem;
    color: var(--clr-txt-primary);
    text-shadow: 0 0.02675rem 0.02675rem var(--clr-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 {

    --clr-txt-primary: dodgerblue;
    --clr-txt-secondary: gold;

    text-align: center;
    text-transform: capitalize;
    padding-block: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    color: var(--clr-txt-primary);
    text-shadow: 0 0.02675rem 0.02675rem var(--clr-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 {

    --clr-txt-primary: gold;
    --clr-txt-secondary: blue;

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

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

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

/* =====  start TemCon TTK3 Modalu ===== */

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

#ttk3Modal {
    --clr-bg: 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(--clr-bg);
    z-index: 10;
    padding-block: 60rem;
}


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

.tcTTK3 {
    --clr-txt-primary: blue;
    --clr-txt-secondary: gold;
    --clr-bg:beige;
  
      display: inline grid;
      position: relative;
      gap: 2rem;
      border: 0.5rem groove var(--clr-txt-primary);
      outline: 0.75rem ridge var(--clr-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(--clr-bg);
      z-index: 1;
   }
  
   #closeTTK3 {
          --clr-txt-primary: gold;
          --clr-txt-secondary: rebeccapurple; 
  
          position: fixed;
          left:15rem;
          top: 5rem;
          border: 0.3rem inset var(--clr-txt-primary);
          outline: 0.2rem ridge var(--clr-txt-secondary);
          background-color: var(--clr-bg);
          font-weight: 700;
          color: var(--clr-txt-primary);
          text-shadow: 0 0.02675rem 0.02675rem var(--clr-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 {
            --clr-txt-primary: rebeccapurple;
            --clr-txt-secondary: gold; 
  
            color: var(--clr-txt-primary);
            text-shadow: 0 0.02675rem 0.02675rem var(--clr-txt-secondary);
            border: 0.3rem inset var(--clr-txt-primary);
            outline: 0.2rem ridge var(--clr-txt-secondary);
          }
        }
  
  .tcTTK3 .ttk3__imgs {
    --clr-txt-primary: blue;
    --clr-txt-secondary: gold;
    
      display: flex;
      align-items: center;
      justify-content: space-around;
      position: relative;
   }
  
  .tcTTK3 .ttk3__info {
    --clr-txt-accent: rgb(7, 115, 134);
    --clr-txt-primary: blue;
    --clr-txt-secondary: rebeccapurple;
  
      padding-block-end: 1.5rem;
      border-bottom: 0.5rem ridge var(--clr-txt-primary);
  
      & h1 {
          font-weight: 700;
          letter-spacing: 0.1rem;
          line-height: 1.2;
          font-size: clamp(2rem, 2ch, 2.5rem);
          color: var(--clr-txt-accent);
          text-shadow: 0 0.02675rem 02675rem var(--clr-txt-secondary);
          }
      & h2 {
          font-weight: 700;
          letter-spacing: 0.1rem;
          line-height: 1.2;
          font-size: clamp(1.5rem, 1.5ch, 2rem);
          color: var(--clr-txt-secondary);
          text-shadow: 0 0.02675rem 02675rem var(--clr-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(--clr-txt-accent);
              text-shadow: 0 0.05rem 025rem var(--clr-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(--clr-accent-blue);
        text-shadow: 0 0.05rem 1rem var(--clr-primary-purple);
        }
    & h2 {
        font-weight: 700;
        letter-spacing: 0.1rem;
        line-height: 1.2;
        font-size: clamp(1.5rem, 1.5ch, 2rem);
        color: var(--clr-primary-purple);
        text-shadow: 0 0.05rem 1rem var(--clr-accent-blue);   
        }
  
      &  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(--clr-accent-blue);
            text-shadow: 0 0.05rem 05rem var(--clr-accent-blue);
            max-width: 80%;
            margin-inline: auto;
  
            & a {
              font-size: clamp(1.5rem, 1.5ch, 2rem);
              letter-spacing: 0.1rem;
            } 
        }
    }
  
  .tcTTK3 .ttk-instr #owm {
    --clr-txt-primary: rebeccapurple;
    --clr-txt-secondary: gold;
  
        padding-block-start: 1.5rem;
        border-top: 0.5rem ridge var(--clr-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: rgba(179, 179, 240, 0.5);
          padding-block: 1rem;
          padding-inline: 1rem;
          color: var(--clr-txt-primary);
          text-shadow: 0 0.05rem 05rem var(--clr-txt-secondary);
        }
      }
      
   .tcTTK3 #owm #owmInstr p {
        --clr-txt-primary: rebeccapurple;
        --clr-txt-secondary: gold;
        font-weight: 700;
        letter-spacing: 0.1rem;
        line-height: 1.5;
        font-size: clamp(1rem, 1ch, 1.25rem);
        color: var(--clr-txt-primary);
        text-shadow: 0 0.05rem 05rem var(--clr-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: 30rem) {
  
  .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;
      } 
    }
      @media (max-width: 853px) {
         .tcTTK3 .ttk-instr #owm #owmInstr #owmInstrImgs {
        display: grid;
        grid-template-columns: auto-fit minmax(40ch, repeat(4,1fr));
        grid-template-columns:
        'signUp  apikey'
        'apiInput apiInput';
        grid-template-rows: auto;
        max-width: 90svw;
        gap: 1rem;
      }
    }
  
  @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;
        }
    }
  }
/* =====  End TemCon TTK3 Modalu ===== */
    
    /* =====  CSS3 for Draggable Menu ===== */

    #landing .pageNav {
      position:fixed;
      top: 26rem;
      left: 4rem;
      display:none;
      grid-template-columns: 1fr;
      background-color: var(--clr-primary-purple-PN-BG);
      border: 0.3rem solid var(--clr-primary-purple);
      outline: 0.3rem ridge var(--clr-titleHeader);
      min-height: 5rem;
      z-index:2;
      border-radius: 0.75rem 0.75rem 0 0;
    }

    #landing .pageNav h4{
      text-align: center;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.1rem;
      line-height: 1.5;
      color: var(--clr-titleHeader);
      text-shadow: 0 0.1rem 0.2rem var(--clr-primary-purple);
      border: 0.2rem solid var(--clr-primary-blue-accent);
      outline: 0.3rem ridge var(--clr-primary-purple);
      cursor:move;
      background-color: var(--clr-primary-blue-accent-fill);
      transition: all 300ms ease-in-out;
      padding: var(--pad05Rem);
      border-radius: 0.75rem 0.75rem 0 0;
      
          &:hover {
          color: var(--clr-primary-purple);
          text-shadow: 0 0.1rem 0.1rem var(--clr-primary-white);
          cursor:move;
          background-color: var(--clr-primary-blue-accent);
        }
    }

    #landing .pageNav nav {
      background-color: var(--clr-primary-blue-accent-BG-tabContent);
      display: none;
      flex-direction: column;
      align-items: normal;
      min-width: 12.5rem;
      max-height: 10rem;
      padding: 1rem 0.5rem 1rem 0.5rem;
      gap: var(--spacer);
      overflow:scroll;
      overflow-x:hidden;
    }

    #landing .pageNav div {
        --clr: hsla(192, 85%, 52%, 0.5);
        background-color: var(--clr);
    }
    
   
    #landing .pageNav nav button,
    #landing .pageNav div .sovLinks,
    #landing .pageNav div .mediaM { 
        position:relative;
        padding: var(--pad25Rem);
        flex: 1 1 12rem;
        letter-spacing: 0.1rem;
        line-height:1.5;
        width: var(--min-width);
        transition: all 500ms ease-in-out;
        font-weight: 700;
        max-height: 2rem;
    }

    #landing .pageNav div .sovLinks {
        color: var(--clr-primary-white);
        text-shadow: 0 0.05rem 0.05rem var(--clr-primary-gold);
        background-color: hsl(212, 100%, 59%);
        outline: 0.2rem ridge hsl(300, 100%, 25%);
    }

    #landing .pageNav div:last-child nav .sovLand {
        color: var(--clr-primary-white);
        text-shadow: 0 0.05rem 0.05rem var(--clr-primary-purple);
        background-color: hsl(56, 88%, 50%);
        outline: 0.2rem ridge hsl(300, 100%, 25%);
    }

    #landing .pageNav div:last-child nav .sovLand:hover {
        color: var(--clr-primary-white);
        text-shadow: 0 0.05rem 0.05rem hsl(56, 88%, 50%);
        background-color: hsl(187, 88%, 50%);
        outline: 0.2rem ridge hsl(226, 100%, 25%);
    }

    #landing .pageNav div .mediaM {
        color: var(--clr-primary-gold);
        text-shadow: 0 0.05rem 0.05rem var(--clr-primary-white);
        background-color: var(--clr-mediaM-BG);
        outline: 0.2rem ridge hsl(300, 100%, 25%);
    }

    #landing .pageNav div nav button {
        border-radius: none;
        color: var(--clr-primary-blue);
        text-shadow: 0 0.1rem 0.1rem var(--clr-primary-gold);
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.1rem;
        line-height:1.5;
        background-color: var(--clr-primary-blue-accent-light);
        outline: 0.2rem inset var(--clr-primary-blue);
        border-radius: 0.4rem;
    }

    #landing .pageNav div nav button:hover {
      outline: 0.2rem inset var(--clr-titleHeader);
      background-color: var(--clr-primary-purple-accent-PN-BG-hover);
      color: var(--clr-primary-orange-accent);
      text-shadow: 0 0.05rem 0.05rem var(--clr-primary-blue);
    }
      
    #landing .pageNav .close-menu  {
        border: 0.1rem inset var(--clr-primary-gold);
        outline: 0.1rem ridge var(var(--clr-primary-purple));
        outline-offset: 0.1rem;
        background-color: var(--clr-primary-beige);
        color: var(--dodgerblue);
        text-shadow: 0 0.1rem 0.2rem var(--clr-accent-gold);
        min-width: 7rem;
        padding-block: 0.5rem;
        padding-inline: 1rem;
        font-weight: 700;
        font-family: "Londrina Shadow", sans-serif;
        font-size: clamp(1rem, 1ch, 1.3rem);
        border-radius: 0.5rem;
        transition: all 500ms ease-in-out;
        
        &:hover {
            border: 0.1rem inset var(--clr-primary-purple);
            outline: 0.1rem ridge var(var(--clr-primary-gold));
            background-color: var(--clr-primary-purple-accent-PN-BG-hover);
            color: var(--clr-primary-gold);
            text-shadow: 0 0.1rem 0.2rem var(--dodgerblue);
        }
    }

     /* =====  End CSS3 for Draggable Menu =====  */