@media screen and (min-width:300px) {
    :root {
        --blue: #374e77;
        --blue-medium-dark: #132546;
        --dark-blue: #374e77;
        --light-blue: #E6F7FF;
        --chatbox-bg-color: #E6E6E6;
    
        --mustard: #EAAB76;
        --dark-green: #42B09D;

        --navbar: #FFFFFF;
    
        /* Backgrounds */
        --bg-blue: #5f82a9;
        --bg-grey: #cdd7e3;
        --bg-light-grey: #ebf4ff;
        --bg-dark-grey: #c9c9c9;
        --bg-white: #FFFFFF;
    
        /* Text */
        --text-light-grey: #02040F;
        --text-grey: #02040F;
        --text-black: #02040F;
        --text-white: #FFFFFF;
    
        --text-black-color: #282828;
        --text-secondary-black-color: #02040F;
    
        /* Notification Colours */
        --success: #2ecc71;
        --warning: hsl(37, 80%, 55%);
        --error: #eb695a;
    
        /* Font Size */
        --small-font: .6rem;
        --regular-font: .825rem;
        --medium-font: .9rem;
        --heading-font: 1.1rem;
        --tabs-font: .65rem;
        --card-font: .65rem;
    
        --large-number-font: 1.5rem;
    
        /* line height */
        --heading-line-height: 1.8rem;
        --medium-line-height: 1.5rem;
        --tab-line-height: 1.1rem;
        --card-line-height: 1.1rem;
        --regular-line-height: 1.1rem;
    
        /* Font Color */
        --regular-fonts: #666666;
    }
}

@media screen and (min-width:1200px)  {
    :root {
        --blue: #374e77;
        --blue-medium-dark: #132546;
        --dark-blue: #374e77;
        --light-blue: #E6F7FF;
        --chatbox-bg-color: #E6E6E6;
    
        --mustard: #EAAB76;
        --dark-green: #42B09D;

        --navbar: #FFFFFF;
    
        /* Backgrounds */
        --bg-blue: #5f82a9;
        --bg-grey: #cdd7e3;
        --bg-light-grey: #ebf4ff;
        --bg-dark-grey: #c9c9c9;
        --bg-white: #FFFFFF;
    
        /* Text */
        --text-light-grey: #02040F;
        --text-grey: #02040F;
        --text-black: #02040F;
        --text-white: #FFFFFF;
    
        --text-black-color: #282828;
        --text-secondary-black-color: #02040F;
    
        /* Notification Colours */
        --success: #2ecc71;
        --warning: hsl(37, 80%, 55%);
        --error: #eb695a;
    
        /* Font Size */
        --small-font: .68rem;
        --regular-font: .9rem;
        --medium-font: 1.2vw;
        --heading-font: 1.3vw;
        --tabs-font: 1vw;
        --card-font: 1vw;
    
        --large-number-font: 1.5rem;
    
        /* line height */
        --heading-line-height: 2.2vw;
        --medium-line-height: 1.8vw;
        --tab-line-height: 1.35vw;
        --card-line-height: 1.35vw;
        --regular-line-height: 1.1rem;
    
        /* Font Color */
        --regular-fonts: #666666;
    }
}