@import url('https://fonts.googleapis.com/css2?family=Beau+Rivage&family=Dancing+Script:wght@400..700&family=Londrina+Shadow&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* Font-Family CSS3 */

/* .beau-rivage-regular {
  font-family: "Beau Rivage", cursive;
  font-weight: 400;
  font-style: normal;
}

.dancing-script-accent {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.roboto-serif-accent {
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "GRAD" 0;
}

.roboto-accent {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.londrina-shadow-regular {
  font-family: "Londrina Shadow", sans-serif;
  font-weight: 400;
  font-style: normal;
} */

:root {
            
    /* ==// Color Scheme \\== */
    color-scheme: light dark;

    /* Colour Scheme Legend

      --bc: <Basic Colour>;
      --bc-a: <Basic Colour Accent>;
      --bc-c: <Basic Colour Contrast>
    */

    --bc-blue: hsl(240, 100%, 50%);
    --bc-rebeccapurple: hsl(270, 50%, 40%);
    --bc-gold: hsl(51, 100%, 50%);
    --bc-skyblue: hsl(197, 71%, 73%);
    --bc-beige: hsl(60, 56%, 91%);
    --bc-dodgerblue: hsl(210, 100%, 56%);
    --bc-white: hsl(0, 0%, 100%);
    --bc-green: hsl(120, 100%, 25%);
    --bc-red: hsl(0, 100%, 50%);
    --bc-orange: hsl(39, 100%, 50%);
    --bc-yellow: hsl(60, 100%, 50%);
    --bc-aqua: hsl(180, 100%, 50%);
    --transparent: transparent;

    /* ///=== Accent Cours ===\\\ */
    --bc-blue-accent: hsla(240, 100%, 50%, 0.3);
    --bc-blue-accent-fill: hsla(240, 49%, 52%, 0.5);
    --bc-blue-accent-light: hsl(192, 74%, 49%);
    --bc-rebeccapurple-light: hsl(300, 100%, 50%);
    --bc-purple-accent:hsl(303, 100%, 50%);
    --bc-purple-accent-PN-BG-hover: hsl(281, 47%, 62%);
    --bc-purple-accent-text: rgb(243, 128, 238);
    --bc-orange-accent: hsl(43, 74%, 49%);
    --bc-orange-accent-dark: hsl(33, 82%, 51%);
    --bc-orange-accent-light: hsl(44, 83%, 68%);
    --bc-purple-light: hsl(275, 71%, 85%);
    --bc-purple-mid: hsl(268, 64%, 56%);
    --bc-red-dark: hsl(0, 26%, 4%);
    --bc-skyblue-accent: hsl(187, 88%, 50%);
    --bc-sky_blue-tint:hsl(202, 96%, 50%);
    --bc-keyframes-dss: hsla(184, 83%, 21%, 0.302);
    --bc-keyframes-dss-bg: hsla(64, 93%, 73%, 0.502);
    --bc-cc-bg-lg__0:hsla(39, 12%, 33%, 0.302);
    --bc-cc-bg-lg__1:hsla(302, 22%, 28%, 0.302);
    --bc-purple-accent-PN-BG-hover: hsl(281, 47%, 62%);
    --bc-yellow-accent-BG-dark:  rgba(65, 47, 2, 0.8);
    --bc-red-accent-BG: hsl(0, 32%, 71%);
    --bc-gold-accent-BG: rgba(218, 165, 32, 0.5);
    --titleShadowHover: 0 0.2vw 0.2vw var(--bc-skyblue-accent);
    --topper-accent: hsl(189, 89%, 15%);
    --ttk-info: hsl(189, 90%, 28%);
    --bc-blue-subtle: hsla(240, 67%, 82%, 0.5);
    --projects-bg: rgb(50, 205, 205);
    --weatherCont-BS: hsla(0, 0%, 0%, 0.1);
    --weatherCont-Border:hsla(0, 0%, 100%, 0.1);
    --bc-mediaM-BG:hsl(212, 90%, 37%);
    --bc-titleHeader:hsl(212, 100%, 59%);
    --titleShadow:  0 0.2vw 0.2vw hsl(0, 100%, 50%);   
    --bc-merch-shadow: hsl(347, 77%, 76%);
    --esc: hsla(0, 0%, 100%, 0.1);
    --clr-LG-primary: linear-gradient(45deg, rgba(0, 0, 255, 0.5), rgba(218, 165, 32, 0.5),  rgba(128, 0, 128, 0.5));
    --clr-portrait-BG: hsl(300, 100%, 25%);
    --clr-BTN-BG-hover: hsl(192, 100%, 42%);
    --clr-BTN-border-hover: rgb(0, 145, 225);
    --clr-BTN-boxShadow-hover: rgb(0, 197, 193);
    --bc-purple-PN-BG: hsla(295, 85%, 46%, 0.5);

  
  /* Dark Scheme */

    ---bc-c-blue: hsl(25, 83%, 53%);
    ---bc-c-purple: hsl(49, 50%, 40%);
    ---bc-c-gold: hsl(281, 100%, 50%);
    ---bc-c-sky_blue: hsl(19, 92%, 49%);
    ---bc-c-sky_blue-tint:hsl(21, 96%, 50%);
    ---bc-c-dodgerblue: hsl(22, 100%, 56%);
    ---bc-c-purple-light: hsl(45, 50%, 40%);
    ---bc-c-beige: hsl(300, 56%, 91%);
    ---bc-c-purple-accent:hsl(63, 100%, 50%);
    ---bc-c-keyframes-dss: hsl(16, 83%, 21%);
    ---bc-c-keyframes-dss-bg: rgb(250, 112, 241);
    ---bc-c-cc-bg-lg__0:hsl(258, 12%, 33%);
    ---bc-c-cc-bg-lg__1:hsl(62, 22%, 28%);
    --bodyBackGround: linear-gradient(72deg, light-dark(rgba(255, 113, 31, 0.4), rgba(255, 113, 31, 1)), light-dark(rgba(250, 112, 241, 0.4), rgba(250, 112, 241, 1)));

    /* ///=== Measures ==\\\ */
    --maxWidth: 100svw;
    --min-width:100%;
    --pad-div: 0.5rem 1rem;
    --pad25: 0.25rem;
    --pad05: 0.5rem;
    --pad1: 1rem;
    --pad2: 2rem;
    --padding-1TB_2LR: var(--pad05) var(--pad2);
 

    interpolate-size: allow-keywords;
    transition-behavior: allow-discrete;
  }

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

@view-transition {
    navigation: auto;
}

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

body {
	
	display: grid;
  padding-block: 2rem;
	grid-template-columns: 1fr;
}

*,
*::after,
*::before {
    padding: 0;
    margin: 0;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
    outline: none;
    border: none;
}

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

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

li {
    list-style: none;
    text-align: center;
  }
  
  a {
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.2rem;
    padding: 0.5rem 0.5rem;
    font-size: clamp(1rem, 1ch, 1.25rem);
  }
  
  p {
      max-width: 75ch;
      line-height: 2;
      text-wrap: pretty
  }

button,
a,
h1,
h2,
h3,
h4,
figcaption {
    padding-block: 0.5rem;
    text-wrap: balance;
    text-align: center;
}

  /* Grid Class */
  .grid-auto-fit {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(30ch, 1fr)));
}

/* ===/// Interactive Classes ===\\\ */
  .show {
      display: block;
      visibility: visible;
      opacity: 1;
  }
  .hide {
      display: none;
      visibility: hidden;
      opacity: 0;
  }

  #landing {
    display: flex;
    opacity: 0;
    visibility: hidden;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    transition: all 300ms;
    animation: fade 2000ms ease-in forwards;
    gap: 2rem;
    min-width: 100svw;
    min-height: 100svh;
    padding: 2rem 1rem;
    position: relative;
}

@keyframes fade {
    0% {
        display: flex;
        opacity: 0;
        visibility: hidden;
    }
    100% {
        display: flex;
        opacity: 1;
        visibility: visible;
    }
}

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

    #landing 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(--bc-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;
        align-items: center;
        padding-inline: 0.5rem;
        padding-block: 0.5rem;
        gap: 1rem;
    }

    
    #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(--bc-blue-accent-light);
        border-radius: 0.5rem 0.5rem 0 0;
        border-top: 0.4rem inset var(--bc-rebeccapurple);
        border-left: 0.4rem inset var(--bc-rebeccapurple);
        border-right: 0.4rem inset var(--bc-rebeccapurple);
        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(--bc-rebeccapurple);
        text-shadow:0.03vw 0.01vw 0.02vw var(--bc-white);
        /* min-height: 3rem; */
        z-index: 2;
    }

    #lead .menu button {
      border: 0.4rem ridge var(--bc-gold);
      background-color: var(--bc-beige);
      color: var(--bc-dodgerblue);
      text-shadow: 0 0.1rem 0.2rem var(--bc-gold);
      width: 4rem;
      height: 4rem;
      font-family: "Roboto Serif", serif;
      font-optical-sizing: auto;
      font-weight: 700;
      font-style: normal;
      font-variation-settings:
        "wdth" 100,
        "GRAD" 0;
      font-size: clamp(1rem, 1ch, 1.2rem);
      border-radius:50%;
      transition: all 500ms ease-in-out;
      text-align: center;

      &:hover {
        border: 0.2rem inset var(--bc-gold);
        outline: 0.2rem ridge var(var(--bc-gold));
        background-color: var(--bc-purple-accent-text);
        color: var(--bc-gold);
        text-shadow: 0 0.1rem 0.2rem var(--bc-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:var(--bc-blue);
        text-shadow:0 0.1rem 0.1rem var(--bc-gold);
        text-align:center;
        margin-inline: auto;
        vertical-align:middle;
        max-width:75svw;
        height:auto;
    }

      #date {
        grid-area: time;
        display: flex;
        position: relative;
        justify-content:space-evenly;
        align-items:center;
        padding: var(--pad-div);
        background-color:var(--bc-blue-accent-light);
        border-radius: 0 0 0.5rem 0.5rem;
        border-bottom: 0.4rem inset var(--bc-rebeccapurple);
        border-left: 0.4rem inset var(--bc-rebeccapurple);
        border-right: 0.4rem inset var(--bc-rebeccapurple);
        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(--bc-rebeccapurple);
        text-shadow:0.03vw 0.01vw 0.02vw var(--bc-white);
        width: 100%;
        max-height: 3rem;
        z-index: 2;
    }

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

    @media (min-width: 40rem) {
        .mandatePolicy {
            grid-area: brand;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-areas:
            'dss  brand brand logo';
            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 {
    grid-area: brand;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr repeat(2,  1fr + 1rem) 1fr;
    grid-template-areas:
    'dss brand brand logo';
    place-content: center;
    padding-inline: 1rem;
    filter: drop-shadow(-0 -0.5rem -0.4rem var(--bc-skyblue-accent));
    border-left: 0.4rem inset var(--bc-rebeccapurple);
    border-right: 0.4rem inset var(--bc-rebeccapurple);
    text-align: center;

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

    > .logo {
        grid-area: logo;
        max-inline-size: 12.5rem;
        margin:0 auto;
        scale: 0.94;

        & img {
                width: 100%;
                max-inline-size: 12.5rem;
                aspect-ratio: 1 / 1;
            }
        }
    > .sitePol {
        grid-area: brand;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        grid-column: span 2;
    }
}
    
    .mandatePolicy .sitePol .ucc {
        color: var(--bc-gold);
        text-shadow:0 0.06rem 0.06rem var(--bc-blue-accent-light);
        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:var(--bc-blue);
        text-shadow:0 0.1rem 0.1rem var(--bc-gold);
        text-align: center;
        width: 100%;
    }

    .mandatePolicy .sitePol .ucc1308 #cik {
        text-align: center;
        width: 100%;
        color: var(--bc-gold);
        text-shadow: 0 0.1rem 0.2rem var(--bc-rebeccapurple);
        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;
        }
    }

    /* End Header */


/* ///=== Footer Styling ===\\\ */
    footer {
        grid-area: 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 .copy {
        display: inline flex;
        justify-content: space-around;
        align-items: center;
        inline-size: 100%;
        font-size: clamp(0.8rem, 0.8ch, 1rem);
    }

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

footer .support {
    display: inline flex;
    justify-content:space-between;
    align-items: center;
    max-inline-size: 100%;
    inline-size: 90svw;
    padding-inline: 0.5rem;
    margin-inline: auto;
}

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

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

            & a {
            font-size: clamp(1.5rem, 1.5ch, 1.75rem);
            min-width: 100%;
            padding-inline: 2rem;
            color: var(--bc-green);
            text-shadow: 0 0.05rem 0.1rem var(--bc-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(--bc-blue);
        text-shadow: 0 0.05rem 0.1rem var(--bc-rebeccapurple);
        gap: 1rem;
        

        & ul {
            margin-top: 1rem;
            max-width: 90%;
            margin-inline: auto;
        }
        
        & .foreward {
                text-align: center;
                padding-inline: 0.5rem;
                padding-block: 0.5rem;
                line-height: 1.3;
                color: var(--bc-skyblue);
                text-shadow: 0 0.05rem 0.1rem var(--bc-rebeccapurple);
                font-weight: 600;
                font-family: "Roboto Serif", serif;
            }
        
        & ul {
            font-size: clamp(0.8rem, 0.8ch, 1rem);
        }
    }
}

footer .support .support-donations {
    padding-inline: 1rem;
    padding-block: 0.5rem;
    max-inline-size: 100%;
}

footer .support .support-donations .donations__title {
    display: inline flex;
    flex-direction: column;
    margin-inline: auto;

    & h1,
    & h3 {
        display: inline block;
        font-weight: 700;
        letter-spacing: 0.1rem;
        line-height: 1.5;
        color: var(--bc-blue-accent-light);
        text-shadow: 0 0.05rem 0.2rem var(--bc-rebeccapurple);
    }

    & h1 {
        font-size: clamp(2rem, 2ch, 2.5rem);
    }

    & h3 {
        font-size: clamp(1rem, 1ch, 1.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(--bc-blue) ;
    outline: 0.2rem ridge var(--primary-gold);
    background-color: var(--bc-blue-accent-light);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 0.5rem;
    flex-wrap: nowrap;
    padding-block: 0.5rem;
    z-index: 1;
}
        
footer .support .support-donations .upma:hover::after {
    position: absolute;
    left: 1.5rem;
    bottom: -3rem;
    font-family: "Roboto Serif", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
    "wdth" 100,
    "GRAD" 0;
    content: "JOIN NOW";
    color: var(--bc-rebeccapurple);
    text-shadow: 0 0 0.2rem var(--bc-gold), 0 0 -0.2rem var(--bc-gold);
    font-size: clamp(1.5rem, 1.5ch, 2rem);
    letter-spacing: 0.05rem;
    z-index:1;
    flex-basis: 1;
}
footer .support .support-donations .upma a {
    translate: -50%, 0%;
    position: absolute;     
    margin: auto;
    cursor: pointer;

    & h2 {
        font-weight: 700;
        color: var(--bc-gold);
        text-shadow: 0 0.1rem 0.2rem var(--bc-rebeccapurple), 0 -0.1rem 0.2rem var(--bc-rebeccapurple);
        font-size: clamp(1rem, 1ch, 1.5rem);
        z-index:2;
        flex-basis: 1;
    }
}

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(--bc-gold);
    text-shadow: 0 0.05rem 0.2rem var(--bc-rebeccapurple);
    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(--bc-blue-accent-light);
        text-shadow: 0 0.05rem 0.1rem var(--bc-rebeccapurple);
        border: 0.6em groove var(--bc-blue-accent);
        outline: 0.2em ridge var(--bc-gold);
        outline-offset: 0.25rem;
        box-shadow: 0 0.1rem 0.5rem var(--bc-gold), 0 -0.1rem 0.5rem var(--bc-gold);
        background-color: var(--bc-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;
}
  
/* ///=== Site Menu CSS3 ===\\\ */

.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%;
            gap: 0.5rem;
        
            & div {
                display: flex;
                width:3rem;
                height: 3rem;
                background-color: var(--bc-aqua);
                border: 0.3rem groove var(--bc-gold);
                outline: 0.3rem ridge var(--bc-rebeccapurple);
                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 var(--bc-rebeccapurple);

                        &:hover {
                            border: 0.1rem ridge var(--bc-gold);
                        }
                    }
                }
            }

            & .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: var(--bc-blue);
                        text-shadow: 0 0 0.01675rem var(--bc-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: var(--bc-aqua);
            border: 0.3rem groove var(--bc-gold);
            outline: 0.3rem ridge var(--bc-rebeccapurple);
            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 var(--bc-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 var(--bc-blue);
                    outline: 0.2rem ridge var(--bc-gold);
                    border-radius: 100%;
                    background-color: var(--topper-accent);
                    cursor: pointer;
                    width: 5rem;
                    height: 5rem;
                    position: relative;
                    display: inline flex;
                    text-align: center;
                    color: var(--bc-skyblue);
                    text-shadow: 0 0.05rem 0.1rem var(--bc-rebeccapurple);
                    font-weight: 700;
                    font-size: clamp(2rem, 2ch, 2.5rem);
                    background-color: transparent;
                    cursor: pointer;
                    transition: all 500ms ease-in-out;
                        
                    &:hover {
                        color: var(--bc-gold);
                        text-shadow: 0 0.05rem 0.05rem var(--bc-blue);
                        outline: 0.2rem ridge var(--bc-rebeccapurple);
                        background-color: var(--topper-accent);
                        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(--bc-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(--bc-blue-accent-light);
        text-align: center;
        text-shadow: 0 0.1rem 0.1rem var(--bc-dodgerblue);

        display: flex;
        flex-direction: column;
        align-content: center;
        margin-inline: auto;
    }
    
    h2, label, p {
        color: var(--bc-white);
        text-shadow: 0 0.05rem 0.1rem var(--bc-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/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(--bc-gold), 0 0.2rem 0.5rem 0.5rem var(--bc-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 var(--bc-red-dark);
        outline: 0.1rem inset var(--bc-blue-accent-light);
        inset: 0 auto;
        text-transform: capitalize;
    }
    
    #weather-container .searchWeather .citySearch button {
        background: var(--bc-rebeccapurple);
        color: var(--bc-white);
        text-shadow: 0 0.05rem 0.1rem var(--bc-dodgerblue);
        padding-inline: 0.625rem;
        padding-block: 0.5rem;
        border: 0.1rem inset var(--bc-gold);
        outline: 0.1rem ridge var(--bc-dodgerblue);
        border-radius: 10px;
        cursor: pointer;
        width: 100px;
        font-size: 15px;
        transition: all 500ms ease-in-out;
    }
    
    #weather-container .searchWeather .citySearch button:hover {
        background: var(--bc-purple-mid);
    }

    #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(--bc-gold);
        text-shadow: 0 0.1rem 0.1rem var(--bc-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(--bc-gold);
        text-shadow: 0 0.05rem 0.1rem var(--bc-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;
        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: var(--bc-white);
        text-shadow: 0 0.05rem 0.1rem var(--bc-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: var(--bc-white);
        text-shadow: 0 0.05rem 0.1rem var(--bc-dodgerblue);
        margin-top: 10px;
    }
    
    #weather-container {
        scale: 0.8;
    }

    @media  (width < 31.25rem) {

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

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

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

#landing .pageNav {
      position:fixed;
      top: 26rem;
      left: 4rem;
      display:none;
      grid-template-columns: 1fr;
      background-color: var(--bc-purple-PN-BG);
      border: 0.3rem solid var(--bc-rebeccapurple);
      outline: 0.3rem ridge var(--bc-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(--bc-titleHeader);
      text-shadow: 0 0.1rem 0.2rem var(--bc-rebeccapurple);
      border: 0.2rem solid var(--bc-blue-accent);
      outline: 0.3rem ridge var(--bc-rebeccapurple);
      cursor:move;
      background-color: var(--bc-blue-accent-fill);
      transition: all 300ms ease-in-out;
      padding: var(--pad05);
      border-radius: 0.75rem 0.75rem 0 0;
      
          &:hover {
          color: var(--bc-rebeccapurple);
          text-shadow: 0 0.1rem 0.1rem var(--bc-white);
          cursor:move;
          background-color: var(--bc-blue-accent);
        }
    }

    #landing .pageNav nav {
      background-color: var(--bc-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(--pad1);
      overflow:scroll;
      overflow-x:hidden;
    }

    #landing .pageNav div {
        --bc: hsla(192, 85%, 52%, 0.5);
        background-color: var(--transparent);
    }
    
   
    #landing .pageNav nav button,
    #landing .pageNav div .sovLinks,
    #landing .pageNav div .mediaM { 
        position:relative;
        padding: var(--pad25);
        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(--bc-white);
        text-shadow: 0 0.05rem 0.05rem var(--bc-gold);
        background-color: var(--bc-dodgerblue);
        outline: 0.2rem ridge var(--bc-rebeccapurple);
    }

    #landing .pageNav div:last-child nav .sovLand {
        color: var(--bc-white);
        text-shadow: 0 0.05rem 0.05rem var(--bc-rebeccapurple);
        background-color: var(--bc-gold);
        outline: 0.2rem ridge var(--bc-rebeccapurple);
    }

    #landing .pageNav div:last-child nav .sovLand:hover {
        color: var(--bc-white);
        text-shadow: 0 0.05rem 0.05rem var(--bc-gold);
        background-color: var(--bc-skyblue-accent);
        outline: 0.2rem ridge var(--bc-blue-accent);
    }

    #landing .pageNav div .mediaM {
        color: var(--bc-gold);
        text-shadow: 0 0.05rem 0.05rem var(--bc-white);
        background-color: var(--bc-mediaM-BG);
        outline: 0.2rem ridge var(--bc-rebeccapurple);
    }

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

    #landing .pageNav div nav button:hover {
      outline: 0.2rem inset var(--bc-titleHeader);
      background-color: var(--bc-purple-accent-PN-BG-hover);
      color: var(--bc-orange-accent);
      text-shadow: 0 0.05rem 0.05rem var(--bc-blue);
    }
      
    #landing .pageNav .close-menu  {
        border: 0.1rem inset var(--bc-gold);
        outline: 0.1rem ridge var(var(--bc-rebeccapurple));
        outline-offset: 0.1rem;
        background-color: var(--bc-beige);
        color: var(--bc-dodgerblue);
        text-shadow: 0 0.1rem 0.2rem var(--bc-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(--bc-rebeccapurple);
            outline: 0.1rem ridge var(var(--bc-gold));
            background-color: var(--bc-purple-accent-PN-BG-hover);
            color: var(--bc-gold);
            text-shadow: 0 0.1rem 0.2rem var(--bc-dodgerblue);
        }
    }

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