@import url('https://fonts.googleapis.com/css?family=Public+Sans');
  
    *{
        font-family: 'Public Sans', serif;
        box-sizing: border-box;
    }

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

    body {
        margin: 0;
        min-height: 100vh;
        overflow-x: hidden;
    }

/* Accessability ---------------------------- */

    .sr-only {
        width: 1px;
        height: 1px;

        position: absolute; 
        padding: 0;
        margin: -1px; 

        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

/* General ---------------------------- */

/* Coloring Hue Saturation and Lightness*/

    :root {
    --white: 0 0% 100%;
    --off-white: 0, 0%, 96%;

    --black: 0, 0%, 0%;

    --blue: 205, 100%, 32%;
    --bold-blue: 218, 100%, 42%;
    --dark-blue: 204, 100%, 18%;

    --lgt-gray: 210, 6%, 87%;

    --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem);
    --fs-800: 3.5rem;
    --fs-700: 1.7rem;
    --fs-650: 1.4rem;
    --fs-600: 1.2rem;
    --fs-500: 1.25rem;
    --fs-400: 1rem;
    --fs-300: 1rem;
    --fs-200: 0.875rem;

    --fw-400: 400;
    --fw-600: 600;
    --fw-700: 700;
    --fw-bld: bold;
    }

    @media (min-width: 450px) {
        :root {
            --fs-800: 5rem;
            --fs-700: 2.5rem;
            --fs-600: 1.5rem;
            --fs-500: 1.25rem;
            --fs-400: 1.1rem;
        }
    }
    
    @media (min-width: 950px) {
        :root {
            --fs-800: 6.25rem;
            --fs-700: 3.5rem;
            --fs-600: 2rem;
            --fs-500: 1.75rem;
            --fs-450: 1.45rem;
            --fs-400: 1.20rem;
        }
    }

    .h1_font{
        font-size: var(--fs-700);
    }
      
    .h2_font{
        font-size: var(--fs-600)
    }
      
    .textfont{
        font-size: var(--fs-400)
    }

    .Button{
        background-color: hsl( var(--dark-blue) ); 
        color: hsl( var(--white) ); 

        font-weight: var(--fw-600);

        cursor: pointer; 
        padding: .4em 1em;
        border-radius: 1.75em;
    }

    .flex{
        display: flex;
        gap: var(--gap, 1rem);
    }

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

    .padding{
        padding-left: 8%;
        padding-right:8%
    }

    .banner_top_spacing {
        padding-top: 30px;
    }
      
    .semi-bold{
        font-weight: var(--fw-400);
    }

    a{
        color: hsl( var(--black) );
        text-decoration: none;
    }
    
    a:hover{
        color: hsl( var(--bold-blue) );
        font-weight: var(--fw-bld);
    }


/* (Mobile) Banner ---------------------------- */

    .Banner {
        grid-area: Banner; 
        display: grid; 

        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        width: 100%;
        background-color: hsl( var(--white) ); 
        z-index: 7000;
    }

    .Logo{
        margin-top: .5rem;

        transform: scale(0.5, 0.5);
        -ms-transform: scale(0.5, 0.5);
        -webkit-transform: scale(0.5, 0.5);
    }
    
    .primary-navigation{
        list-style: none;
        margin: 0;

        background: hsl(0 0% 0% / 0.1);
        backdrop-filter: blur(1.5rem);
        -webkit-backdrop-filter: blur(1.5rem);

        border-color: hsl( var(--bold-blue) ); 
        border-style: solid; 
        border-width: 1px 0 1px 1px;
        border-radius: 24px 0px 0px 24px;
    
        --gap: 2em;
        z-index: 1000;
    
        position: fixed;
        inset: 0 0 0 30%;
    
        flex-direction: column;
        padding: min(30vh, 10rem) 2em;
    
        transform: translateX(100%);
        transition: transform 350ms ease-out;
    }
    
    @supports (backdrop-filter: blur(1rem)){
        .primary-navigation{
            background: hsl(0 0% 0% / 0.1);
            backdrop-filter: blur(1rem);
            -webkit-backdrop-filter: blur(1.5rem);
        }
    }
    
    .primary-navigation a{
        color:hsl( var(--bold-blue) );
        text-decoration: none;
    }
    
    .primary-navigation a > span {
        font-size: var(--fs-650);
        margin-inline-end: .75em;
    }
    
    .primary-navigation[data-visible="true"]{
        transform: translateX(5%);
    }
    
    .mobile-nav-toggle{
        display: block;
        position: absolute;
        z-index: 9999;

        background-color: transparent;
        background-image:url(../assets/svgs/icon-hamburger.svg);
        background-repeat: no-repeat;

        width: 2rem;
        border: 0;
        aspect-ratio: 1;
        top: 2rem;
        right: 2rem;
    }
    
    .mobile-nav-toggle[aria-expanded="true"]{
        background-image:url(../assets/svgs/icon-close.svg);
    }

    .mobile-nav-loginbutton{
        display: block;
        position: absolute;
        z-index: 9998;

        border: 0;
        top: 4.25rem;
        right: 2.25rem;


    }
    
    .Banner_title { grid-area: Banner_title; display: none;}
    .Banner_nav { grid-area: Banner_nav;  display: none; }
    .Banner_links { grid-area: Banner_links; display: none;}      

/* (Mobile) Footer ---------------------------- */
  
    .Footer {  
        grid-area: Footer;
        background-color: hsl( var(--off-white) );
        margin-top: 100px;
        height: 230px;
        padding-left: 20px;
    }

/* (Mobile) Footer Title ---------------------------- */


    .Footer-Title { grid-area: Footer-Title;  }

    #Return_to_top_link{
        text-decoration: underline;
        padding-top: 16px;
        display: none;
    }

    #Return_to_top_link:hover{
        cursor: pointer;
    }

    #SPA_end_title{
        padding-top: 20px;
        font-size: var(--fs-500);
    }

/* (Mobile) Footer Navs ---------------------------- */

    .Footer-Navs { 
        grid-area: Footer-Navs; 
        display: none;
    }

/* (Mobile) Footer Links ---------------------------- */

    .Links { grid-area: Links; }

    .EmailIcon{
        padding-top: 16px;
        display: inline-block;
    }

    .LinkedInIcon{
        padding-right: 4px;
        display: inline-block;
    }

    .Explore_digits_website_link{
        font-size: var(--fs-500);
        padding-top: 16px;
        padding-right: 26px;
    }

    .Telephone{
        font-size: var(--fs-300);
        padding-top: 4px;
        padding-right: 26px;
    }

    .Email{
        font-size: var(--fs-300);
        padding-top: 4px;
        padding-right: 26px;
    }
   
@media only screen and (min-device-width: 1000px) {

/* (Desktop) Banner ---------------------------- */

    .primary-navigation{display: none;}
    .Logo{display: none;}
    .mobile-nav-toggle{display: none;}
    .mobile-nav-loginbutton{display: none;}

    .Banner {
        grid-template-areas: 
        "Banner_title Banner_nav Banner_links"; 
        grid-template-columns: 403px 1fr 339px; 
        grid-template-rows: 115px; 
        position: fixed;
        top: 0px;
        transition: 0.5s;


        border-bottom: solid 2px hsl( var(--lgt-gray) );   
        gap: 0px 0px;      
    }

    .banner_top_spacing {
        padding-top: 71px;
    }

/* (Desktop) Banner Title ---------------------------- */


    .Banner_title { grid-area: Banner_title; 
        display: flex;
        float: left; 
        align-items: center;
        
        margin-left: 20px;
        padding-right: 10px;

        font-size: var(--fs-600)
    }

/* (Desktop) Banner Nav ---------------------------- */

    .Banner_nav { 
        grid-area: Banner_nav; 

        display: flex; 
        align-items: center; 

        padding-left:50px; 
        padding-right: 100px;
    }

    a[aria-current="page"]{
        color: hsl( var(--bold-blue) );
        font-weight: bold !important;

        border-bottom: 2px solid transparent;
        border-image: linear-gradient(0.25turn, hsl( var(--white)), hsl( var(--bold-blue)), hsl( var(--white)));
        border-image-slice: 1;

        border-bottom-width: 4px;
        padding-bottom: 2px;
    }

    .Banner_home{
        flex: none;
        float: left;
        flex-grow: 0;

        font-size: var(--fs-450);
        line-height: 162%;
}
    .Banner_resources{
        flex: none;
        float: left; 
        flex-grow: 0;

        font-size: var(--fs-450);        
        line-height: 162%;
        padding-left: 24px;
    }
    .Banner_faq{
        flex: none;
        float: left;
        flex-grow: 0;

        font-size: var(--fs-450);        
        line-height: 162%;
        padding-left: 24px;
    }

/* (Desktop) Banner Links ---------------------------- */

    .Banner_links { 
        display: flex;
        align-items: center;
        grid-area: Banner_links;
    }

    #loginbutton{
      
        margin-left: 20px;
    }

/* (Desktop) Footer ---------------------------- */

    .Footer {  
        grid-template-areas:
        "Footer-Title Footer-Navs Footer_Links";
        display: grid;
        grid-auto-flow: row;

        grid-template-columns: 397px 1fr 296px;
        grid-template-rows: 1fr;

        margin-top: 300px;
        height: 178px;

        gap: 0px 0px;
    }

/* (Desktop) Footer Title---------------------------- */

    .Footer-Title { grid-area: Footer-Title;  }

    #Return_to_top_link{
        padding-left: 26px;
        display: block;
    }

    #Return_to_top_link:hover{
        cursor: pointer;
    }

    #SPA_end_title{
        padding-top: 84px;
        padding-left: 26px;
        font-size: var(--fs-600);
    }

/* (Desktop) Footer Navs ---------------------------- */

    .Footer-Navs { grid-area: Footer-Navs;}

/* (Desktop) Footer Links ---------------------------- */

    .Footer_Links { grid-area: Footer_Links; }

    .EmailIcon{
        display: inline-block;

        padding-top: 16px;
    }
    .LinkedInIcon{
        display: inline-block;

        padding-top: 16px;
        padding-left: 172px;
        padding-right: 4px;
    }

    .Explore_digits_website_link{
        float: right;

        padding-top: 16px;
        padding-right: 26px;
    }

    .Telephone{
        float: right;

        padding-top: 4px;
        padding-right: 26px;
    }

    .Email{
        float: right;

        padding-top: 4px;
        padding-right: 26px;
    }
}