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


:root {
    --theme-font-family: "Lato", sans-serif;
    --theme-font-size: 14px;
        --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --theme-rounding: 0;
    --theme-button-bg: #774f9e;
    --theme-button-txt: #ffffff;
    --theme-nav-bg: #;
    --theme-menu-item-bg: #;
    --theme-menu-item-txt: #;

    --theme-menu-item-hover-bg: #;
    --theme-menu-item-hover-txt: #;

    --theme-mobile-menu-bg: #;
    --theme-mobile-menu-txt: #;

    --theme-footer-bg: ##ed193d;
    --theme-footer-txt: ##ffffff;

    --theme-highlight-colour: #0072BC;
    --theme-breakout-bg: #E2E2E9;

    --theme-section-padding-x: ;
    --theme-section-padding-y: ;

    }

    
    html {
    font-size: var(--theme-font-size);
    font-family: var(--theme-font-family);
    }

    section {
    position: relative;
    }

    .heading-container {
        display: flex;
        flex-direction: column;
    }


    
    .button {
    background-color: var(--theme-button-bg);
    border: 1px solid transparent;

    border-radius: var(--theme-rounding);
    color: var(--theme-button-txt);
    padding: 0.5rem 1rem;
    }

    .button:hover {
    background-color: transparent;
    border: 1px solid var(--theme-button-bg);
    color: var(--theme-button-bg);
    }

    
    .colour-text-highlight {
        color: var(--theme-highlight-colour);
    }

    .colour-bg-highlight {
        background-color: var(--theme-highlight-colour);
    }

    .colour-bg-quote {
        background-color: var(--theme-breakout-bg);
    }

    
    #navBar {
        background: var(--theme-nav-bg);
        transition: 0.4s;
    }

    
    footer,
    #footer {
        background: var(--theme-footer-bg);
        color: var(--theme-footer-txt);
    }

    .menu-item {
        align-items: center;
        display: inline-flex;
        position: relative;
                        padding: 0.5rem 1rem;
    }

    .menu-item,
    .hoverable .dropdown-menu,.nav-toggler {
        color: var(--theme-menu-item-txt);
    }

    .nav-toggler {
                background-color: var(--theme-nav-bg);
    }

    .menu-item:hover,
    .hoverable:hover > a,
    .hoverable:hover .dropdown-menu a:hover
    {
        color: var(--theme-menu-item-hover-txt);
    }

    .dropdown-menu {
        background-color: #ffffff;
        border-radius: var(--theme-rounding);
        box-shadow: var(--theme-shadow);
    }

    .mobile-menu {
        background-color: var(--theme-mobile-menu-bg);
        color: var(--theme-mobile-menu-txt);
    }

.theme-rounding {
    border-radius: var(--theme-rounding);
}

.theme-shadow {
    box-shadow: var(--theme-shadow);
}