@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Kaushan+Script&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/*------------------------------------------------------*/
/*Set up custom colour and text style properties--------*/
/*------------------------------------------------------*/

/*Colours and font styles for all pages*/
:root {
    --background-light: #bdc0c9;
    --background-medium: #7b76ad;
    --background-dark: #000000;
    --section-background: rgb(248, 249, 255);
    --main-background: rgb(247, 250, 253);
    --dark-black: rgb(26, 26, 27);
    --low-opacity-black: rgba(0, 0, 0, 0.61);
    --grey-black: rgb(56, 56, 56);
    --dark-grey: rgb(73, 74, 87);
    --medium-grey: rgb(94, 94, 104);
    --light-medium-grey: rgb(102, 102, 114);
    --light-grey: rgb(214, 214, 214);
    --lighter-grey: rgb(220, 220, 220);
    --lightest-grey: rgb(240, 240, 240);
    --almost-white: rgb(248, 250, 255);
    --white: rgb(255, 255, 255);
    --dropdown-selected: rgba(0, 0, 0, .2);
    /*Font used for company logo, page headers, and section headers with sans-serif fonts*/
    --main-header: 'Josefin Sans', 'Futura', sans-serif;
    /*Font used for news article content with serif fonts*/
    --main-text: 'Lora', 'Garamond', serif;
}

/*---------------------------------------------------------------------------------------------*/
/*Set up colour scheme for lower contrast mode and grayscale mode--------------------------------*/
/*---------------------------------------------------------------------------------------------*/

/*Colour scheme for lower contrast*/
.low-contrast-mode {
    --background-light: #c0c2c7;
    --background-medium: #69677a;
    --background-dark: #242121;
    --section-background: rgb(201, 207, 223);
    --main-background: rgb(234, 239, 243);
    --dark-black: rgb(49, 49, 53);
    --low-opacity-black: rgba(0, 0, 0, 0.51);
    --medium-opacity-black: rgba(0, 0, 0, 0.45);
    --grey-black: rgb(82, 78, 78);
    --dark-grey: rgb(100, 101, 112);
    --medium-grey: rgb(123, 123, 141);
    --light-medium-grey: rgb(107, 107, 110);
    --beige: rgb(197, 179, 148);
    --light-grey: rgb(187, 182, 182);
    --lighter-grey: rgb(199, 199, 199);
    --lightest-grey: rgb(221, 221, 221);
    --almost-white: rgb(227, 229, 233);
    --white: rgb(233, 230, 230);
    --dropdown-selected: rgba(0, 0, 0, 0.3);
}

/*Colour Scheme for grayscale mode*/
.grayscale {
    --background-light: #dfdfdf;
    --background-medium: #969696;
    --background-dark: #474747;
    --section-background: rgb(231, 231, 231);
    --main-background: rgb(247, 247, 247);
    --dark-black: rgb(48, 48, 48);
    --grey-black: rgb(73, 73, 73);
    --dark-grey: rgb(100, 101, 112);
    --medium-grey: rgb(104, 104, 104);
    --light-medium-grey: rgb(105, 105, 105);
    --beige: rgb(202, 202, 202);
    --light-grey: rgb(189, 189, 189);
    --lighter-grey: rgb(218, 218, 218);
    --almost-white: rgb(241, 241, 241);
    --white: rgb(255, 255, 255);
    --dropdown-selected: rgba(0, 0, 0, 0.3);
}

/*Apply grayscale filter on all images when grayscale mode is selected*/
.gray {
    filter: grayscale(1);
}

/*Change font with font legibility option*/
.readability-mode {
    /*All fonts changed to a legible font*/
    --main-header: 'Arial', sans-serif;
    --main-text: 'Arial', sans-serif;
}

/*-------------------------------------------------------------------------------*/
/*Style images on mouse hover for emphasis---------------------------------------*/
/*-------------------------------------------------------------------------------*/

/*Prevent scaled image from overflowing from its supposed space*/
.image-main-container {
    overflow: hidden;
}

/*Smoothen effect animation*/
.image-main-container img {
    width: 100%;
    height: 100%;
    transition: all 0.4s ease-out;
}

/*Scale image on hover to give emphasis*/
.image-main-container img:hover {
    transform: scale(1.03);
}

/*---------------------------------------------------------------*/
/*Common CSS functions that applies to all pages-----------------*/
/*---------------------------------------------------------------*/

/*Ensure that content, padding, and border fits within a given width or height*/
* {
    /*Aids in managing the size of all HTML elements*/
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*Set standardized background colour on every page*/
body {
    background-color: var(--main-background);
}

/*Prevent main content from having collisions on devices with small screen*/
main {
    min-width: 26.1875em;
}

/*Style the headers to standardized font style*/
h1,
h2,
h3 {
    font-family: var(--main-header);
}



/*When an accessibility feature is selected from the dropdown menu, a selected indicator will appear*/
.changeOpacity {
    /*Background of the menu item darkens when selected*/
    /*When the feature is deselected, its color and opacity will return to normal*/
    background: var(--dropdown-selected);
}

/*--------------------------------------------------------------*/
/*Adjust the different headers to improve readability-----------*/
/*--------------------------------------------------------------*/

/*make some spacing below main page header*/
h1 {
    margin-bottom: .2em;
}

/*Uniform spacing for main headers and subheaders*/
h1,
h2,
h3,
h4 {
    /*This spacing is crucial on mobile devices for readability*/
    line-height: 1.8em;
}

/*Style smaller headers used for article meta-data and copyright information*/
h4 {
    font-family: var(--main-header);
    font-weight: 400;
    font-size: 0.73em;
    text-align: left;
    align-self: left;
}

/*Lighter weight for paragraph text to emphasize the headers*/
p {
    font-weight: 200;
    line-height: 2em;
    font-family: var(--main-text);
}

/*---------------------------------------------------------------*/
/*Footer with four column sections-------------------------------*/
/*---------------------------------------------------------------*/

/*Space out footer from element above and create a uniform color scheme*/
footer {
    background-color: var(--dark-black);
    padding-top: 5em;
    /*Prevent element collision for small screens*/
    min-width: 26.188em;
}

/*Centralize footer and accommodate large devices*/
.footer-body {
    display: flex;
    flex-wrap: wrap;
    /*Footer will not stretch out horizontally on devices with large dimensions*/
    max-width: 73em;
    margin: auto;
}

/*Divide footer sections into equal column sections: 'Languages', 'Menu', 'Resources', and 'Connect with Us'*/
.footer-section {
    /*Allocate four columns, one for each footer section*/
    width: 25%;
    padding: 0 2.2em;
}

/*Make header style of each column section distinguishable from the footer links*/
.footer-section h3 {
    font-size: 0.9em;
    /*Provide sufficient contrast against dark background*/
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 2em;
    font-weight: 300;
    /*Decorative line below is positioned absolutely in relation to the header*/
    position: relative;
}

/*Add decorative line below header to separate section headers from the footer links*/
.footer-section h3::before {
    content: '';
    height: 0.1em;
    width: 10%;
    position: absolute;
    left: 0;
    bottom: -0.2em;
    background-color: var(--light-grey);
}

/*Make the decorative link grow and shrink when hovered to appear interactive*/
.footer-section h3:hover::before {
    width: 20%;
}

/*Remove bullet points for column menu items to tidy the interface*/
.footer-section ul {
    list-style: none;
}

/*Add space to each menu item except last item per section.
This reduces the excess space between the last item and the copyright statement*/
.footer-section ul li:not(:last-child) {
    margin-bottom: 0.8em;
}

/*Style each menu item to appear minimalistic and light*/
.footer-section ul li a {
    font-size: 0.8em;
    text-decoration: none;
    font-weight: 300;
    letter-spacing: 0.025em;
    color: var(--light-grey);
    display: block;
    transition: all 0.3s ease;
    /*Header font used so that the section appears as a 'secondary navigation' tool that is relatively important*/
    font-family: var(--main-header);
}

/*Add selected indicator for footer links on hover*/
.footer-section ul li a:hover {
    padding-left: 0.05em;
    color: var(--lighter-grey);
}

/*Determine the dimensions of each social media icon so that they do not go onto a newline when the browser is resized*/
.footer-section .social-icons li {
    display: inline-block;
    line-height: 2.3em;
    width: 2.3em;
    height: 2.3em;
    transition: all 0.4s ease;
    margin: 0 .2em .2em 0;
}

/*Make social media icons circular to distinguish it from the square elements (i.e. scroll to top button, contrast
toggle button)*/
.footer-section .social-icons li a {
    /*Offsets height and width to center icons within the circular container*/
    text-align: center;
    color: var(--grey-black);
    border-radius: 50%;
    padding-top: .2em;
    background-color: rgba(255, 255, 255, 0.87);
}

/*Add hover effect on social media icons to give an interactive impression*/
.footer-section .social-icons li a:hover {
    background-color: var(--almost-white);
    color: #2c2c2c;
}

/*Give the copyright statement a style similar to the footer links*/
.copyright-statement h4 {
    font-family: var(--main-header);
    color: var(--almost-white);
    font-size: 0.8em;
    margin-bottom: 5.5em;
    font-weight: 300;
    margin-left: 2.2em;
    margin-top: 1.5em;
}

/*---------------------------------------------------------------*/
/*Main navigation bar with six navigational links---------------*/
/*---------------------------------------------------------------*/

/*Add a faint shadow to separate the navigational area from the main content*/
.nav-bar {
    padding: 1.3em 1.5em;
    width: 100%;
    background-color: var(--main-background);
    color: var(--almost-white);
    /*Accommodate faint shadow below main navigation block for various browsers*/
    -moz-box-shadow: rgba(30, 50, 73, 0.25) 0px 10px 30px -20px, rgba(0, 0, 0, 0.23) 0px 10px 30px -30px;
    -webkit-box-shadow: rgba(30, 50, 73, 0.25) 0px 10px 30px -20px, rgba(0, 0, 0, 0.23) 0px 10px 30px -30px;
    box-shadow: rgba(30, 50, 73, 0.25) 0px 10px 30px -20px, rgba(0, 0, 0, 0.23) 0px 10px 30px -30px;
}

/*Provide a uniform and readable font for the main navigation links*/
.nav-bar,
button {
    font-family: 'Josefin Sans', sans-serif;
}

/*Allow easy access to navigation when page is scrolled down*/
.nav-bar {
    /*Navigation will remain fixed at the top of the screen*/
    position: fixed;
    top: 0;
    /*Smooth the motion when user scrolls*/
    transition: 0.5s;
    /*Nothing will obstruct the visibility of the navigation bar*/
    z-index: 99;
}

/*Emphasize the company logo, and its corresponding icon*/
.company-name-JSON {
    font-size: 2em;
    text-align: center;
    font-weight: 900;
    /*Ensure the main title does not become cluttered when it is displayed on two lines on small devices*/
    line-height: 1.4;
    padding: 0.5em 0.5em;
    margin-right: auto;
    color: var(--background-dark);
    /*Smooth the transition from normal navigation bar to fixed navigation bar when page is scrolled*/
    transition: 0.8s;
    white-space: nowrap;
}

/*Equally space the navigation links to create a cohesive appearance*/
.nav-bar-links ul {
    display: flex;
    /*Prevent collision with 'Toggle Contrast' button by restricting horizontal space occupied by the links*/
    width: 70%;
    justify-content: space-between;
    margin: auto;
    padding: 0;
}

/*Make navigation interface cleaner by removing decorative elements*/
.nav-bar-links li {
    list-style: none;
}

/*Uniformly space out the navigation links*/
.nav-bar-links li a {
    top: .4rem;
    display: block;
    font-size: 0.93em;
    font-weight: 700;
    text-decoration: none;
    color: var(--background-dark);
    padding: 1rem;
    position: relative;
    margin: 0.3em;
    /*Smooth the transition from normal navigation bar state to fixed navigation bar state*/
    transition: 0.8s;
}

/*Create a selected indicator for each navigation link. The indicator is invisible unless a user hovers over it.*/
.nav-bar-links a::after {
    content: "";
    position: absolute;
    height: 0.1875em;
    width: 100%;
    /*Line appears above each navigation link when hovered*/
    background-color: var(--light-grey);
    left: 0;
    top: 0;
    /*Initially hide the line*/
    transform: scale(0, 1);
}

/*Selected indicator appears when a user hovers over a navigation link*/
.nav-bar-links a:hover::after {
    /*Line that appears above navigation link is roughly the same width as the navigation link itself*/
    transform: scale(0.7, 1);
}

/*Indicate an interactive element by adding a subtle text color change when a navigation link is hovered*/
.nav-bar-links li a:hover {
    color: var(--dark-grey);
}

/*---------------------------------------------------------------------------------------*/
/*Sticky navigation bar for accessible navigation when page is vertically scrolled-------*/
/*---------------------------------------------------------------------------------------*/

/*Compact navigation bar to not obstruct main viewport*/
.nav-bar.sticky {
    padding: 0.5em 1.5em;
    background-color: var(--dark-black);
}

/*Brighten main title to contrast dark background and increase visibility*/
.nav-bar.sticky .company-name-JSON {
    color: var(--almost-white);
    padding: .6em .6em;
}

/*Brighten navigation link color to constrast dark background and increase visibility*/
.nav-bar.sticky ul li a {
    color: var(--almost-white);
    padding-bottom: 1.5em;
}

/*Reposition 'Toggle Constrast' button to be centered once the dimensions of the navigation bar changes from a standard state to a fixed state*/
.sticky-adjust {
    margin-bottom: -.65em;
}

/*Company logo in a white box that becomes visible when the navigation bar enters a fixed state*/
.company-logo-scroll {
    /*Invisible by default, since the logo is only visible against the dark background of the fixed navigation
    menu*/
    display: none;
    position: absolute;
    top: .4em;
    left: .4em;
    border: 3px solid var(--almost-white);
    padding: .2em;
}

/*Make the company logo visible when the fixed navigation menu is triggered by the user scrolling past a vertical scroll bar threshold*/
.company-logo-scroll-active {
    display: inline;
}

@media screen and (max-width: 1080px) {

    /*Prevent the company logo from being displayed twice on mobile and tablet devices*/
    .company-logo-scroll-active {
        display: none;
    }
}

/*---------------------------------------------------------------------------*/
/*Smooth scrolling back to top button that reduces vertical scrolling -------*/
/*---------------------------------------------------------------------------*/

/*Position the back to top button as to not obstruct visibility of main content within the viewport*/
.back-to-top-button {
    /*Button is fixed to the bottom-right corner of the viewport*/
    position: fixed;
    right: 1em;
    bottom: 1em;
    /*Visible over all other elements*/
    z-index: 99;
    font-size: 1.2em;
    color: var(--dark-grey);
    background-color: var(--almost-white);
    border: 0.11em solid var(--light-grey);
    /*Button is not visible on page load
    Button becomes visible once the page has reached a vertical scroll threshold*/
    display: none;
}

/*Indicate the button as an interactive element by providing a hover effect*/
.back-to-top-button:hover {
    background-color: var(--white);
    border: 0.11em solid var(--light-grey);
}

/*------------------------------------------------------------------------------------------------------------*/
/*'Toggle Contrast' button to switch between higher and lower contrast, which is high on default--------------*/
/*------------------------------------------------------------------------------------------------------------*/

/*Set button style for every web page*/
button {
    color: var(--almost-white);
    padding: 1.4em 1.4em;
    border-radius: 0.3em;
    background-color: var(--dark-grey);
    border: 0;
    text-align: center;
}

/*Align 'Toggle Contrast' button on the right side of navigation links*/
.low-contrast-toggle {
    bottom: 1.92em;
    position: absolute;
    right: 1.2em;
}

/*Change the colour of "Toggle Contrast" button on hover to indicate it as interactive element*/
button:hover {
    background-color: var(--medium-grey);
}

/*--------------------------------------------------------------------------------------------------------------*/
/*Fix the position of "wheelchair" button accessibility menu----------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------*/

/*Fix the position of drop down menu to the left side of the screen to prevent it from blocking main content*/
.accessibility-menu {
    position: fixed;
    /*Align with the bottom of the sticky navigation bar for fluidity*/
    top: 4.9em;
    left: -.03em;
    /*Make menu visible and accessible at all times*/
    z-index: 99;
    /*Unfortunately transparent background would collide with elements with lower z-index*/
    background: var(--dark-grey);
}

/*Change the colour of "Wheelchair" button on hover to indicate it as interactive element*/
.accessibility-menu .dropdown-menu .accessibility-toggle:hover {
    background-color: var(--medium-grey);
}

/*Standardize accessibility options with same background colour*/
.accessibility-menu .dropdown-menu .sub-menu a:hover {
    background: var(--medium-grey);
}

/*Set the position the tooltip display*/
.accessibility-tooltip {
    position: relative;
}

/*Make the tool tip legible with without cursor arrow*/
.accessibility-tooltip::before {
    position: absolute;
    display: none;
    border-radius: .16em;
    /*Let accesiblity tooltip display content based on it's label*/
    content: attr(title);
    color: var(--white);
    padding: 1em;
    width: 8.3em;
    background-color: var(--dark-black);
    /*Prevent tooltip from colliding with other elements*/
    z-index: 99;
    font-size: 0.81em;
}

/*Small arrow on accessibility tool tip pointing accessibility icon*/
.accessibility-tooltip::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    display: none;
    color: var(--dark-black);
    /*make sure that the arrow is visible*/
    z-index: 99;
    border: .41em solid transparent;
}

/*Make the tool tip visible*/
.accessibility-tooltip:hover::before,
.accessibility-tooltip:hover::after {
    display: block;
}

/*Position the tooltips on the right side of each the accessibility icon*/
.accessibility-tooltip.tooltip-right:before {
    transform: translateY(-50%);
    top: 50%;
    left: calc(100% + 5px);
}

/*Set the position of the arrow described above*/
.accessibility-tooltip.tooltip-right:after {
    transform: translateY(-50%);
    top: 50%;
    left: 100%;
    border-left-width: 0;
    border-right-color: var(--dark-black);
}

/*Increase visibility of the drop down menu icons with contrasting dark background*/
.accessibility-menu i {
    color: var(--almost-white);
}

/*Hide bullet points on menu items*/
.accessibility-menu .dropdown-menu {
    list-style: none;
}

/*Drop down menu appears on click*/
.accessibility-menu .dropdown-menu {
    cursor: pointer;
    /*Set drop down menu items position in relation to the menu*/
    position: relative;
}

/*Make space for each dropd own menu items*/
.accessibility-menu .dropdown-menu a {
    display: block;
    text-decoration: none;
}

/*Make drop down menu icons slightly smaller than the main wheel chair icon*/
.accessibility-menu .dropdown-menu .sub-menu a i {
    font-size: 1em;
    padding: 1em 0 1em .85em;
}

/*Place 'Underline Link' icon to the centre as it is positioned to the right by default and misaligned*/
.accessibility-menu .dropdown-menu .sub-menu div:nth-child(2) {
    margin-left: -.2em;
}

/*Pad the wheel chair icon to prevent clutter*/
.accessibility-menu .dropdown-menu .accessibility-toggle i {
    font-size: 1.6em;
    padding: .4em .2em;
}

/*Hide the drop down menu when not clicked*/
.accessibility-menu .dropdown-menu .sub-menu {
    background: var(--dark-grey);
    display: none;
}

/*create some space around the drop down menu to prevent clutter*/
.accessibility-menu .dropdown-menu i {
    margin: .3em .41em;
}

/*Adjust the position of the drop down menu for tablet and mobile devices*/
@media screen and (max-width: 1080px) {
    .accessibility-menu {
        top: 6.2em !important;
    }
}

/*-----------------------------------------------------------------------------------------------*/
/*Hamburger menu that creates a clean navigational interface on tablet and mobile devices--------*/
/*-----------------------------------------------------------------------------------------------*/

/*Align hamburger menu in the top right corner with the company header and logo*/
.toggle-button {
    display: none;
    flex-direction: column;
    /*The hamburger menu is composed of three horizontal lines
    Evenly space the horizontal lines from one another*/
    justify-content: space-between;
    position: absolute;
    top: 2.94em;
    right: 1rem;
    width: 1.6875em;
    height: 1.375em;
}

/*Create each horizontal bar in the hamburger menu for mobile and tablet devices*/
.toggle-button .bar {
    height: .2em;
    width: 100%;
    background-color: var(--dark-black);
    border-radius: .1em;
}

/*-----------------------------------------------------------------*/
/*Mobile features common to all pages------------------------------*/
/*-----------------------------------------------------------------*/

@media screen and (max-width: 700px) {

    /*---------------------------------------------------------------*/
    /*Sticky accessibility button tablet layout----------------------*/
    /*---------------------------------------------------------------*/

    /*Position accessibility button directly below sticky navigation bar*/
    .accessibility-menu {
        top: 5.65em;
    }

    /*---------------------------------------------------------------*/
    /*Footer layout for mobile devices-------------------------------*/
    /*---------------------------------------------------------------*/

    /*Each footer section column occupies full width of the viewport*/
    .footer-section {
        width: 100%;
        margin-bottom: 2em;
    }

    /*-----------------------------------------------------------------*/
    /*Navigation bar mobile layout-------------------------------------*/
    /*-----------------------------------------------------------------*/

    /*Hide 'Toggle Contrast' button to create a clean interface*/
    .low-contrast-toggle {
        display: none;
    }

    /*Display hamburger menu in top right corner*/
    .toggle-button {
        display: flex;
    }

    /*Hide navigation dropdown menu by default before being toggled by the hamburger menu*/
    .nav-bar-links {
        width: 100%;
        display: none;
    }

    /*Navigation links can become visible through user interaction with the hamburger menu*/
    .nav-bar-links.active {
        display: flex;
    }

    /*Make the navigation links vertically stacked on top of one another*/
    .nav-bar-links ul {
        width: 100%;
        flex-direction: column;
    }

    /*Center each navigational link within the dropdown menu*/
    .nav-bar-links ul li {
        text-align: center;
    }

    /*Make each navigation link distinct by spacing them out from one another*/
    .nav-bar-links ul li a {
        padding: .5rem 1rem;
    }

    /*Remove line animation above navigation links to yield a cleaner interface*/
    .nav-bar-links a:hover::after {
        transform: scale(0, 0);
    }

    /*----------------------------------------------------------------------------------------------------*/
    /*Hamburger button adjustments for when standard navigation bar becomes fixed on mobile layouts-------*/
    /*----------------------------------------------------------------------------------------------------*/

    /*Increase visibility of the hamburger button by making it bright to contrast the fixed navigation bar dark
    background colour*/
    .nav-bar.sticky .toggle-button .bar {
        background-color: var(--almost-white);
    }

    /*Vertically align hamburger icon relative to company logo position for the fixed navigation bar*/
    .nav-bar.sticky .toggle-button {
        top: 2.4em;
    }
    /*change the image used for company logo to dark background version on sticky navigation bar*/
    .nav-bar.sticky .company-name-JSON img{
        content: url("../images/logo_1.png");
    }
}

/*---------------------------------------------------------------*/
/*Tablet features common to all pages----------------------------*/
/*---------------------------------------------------------------*/

@media screen and (min-width: 700px) and (max-width: 1080px) {

    /*---------------------------------------------------------------*/
    /*Sticky accessibility button tablet layout----------------------*/
    /*---------------------------------------------------------------*/

    /*Position accessibility button directly below sticky navigation bar*/
    .accessibility-menu {
        top: 5.65em;
    }

    /*---------------------------------------------------------------*/
    /*Footer layout for tablet devices-------------------------------*/
    /*---------------------------------------------------------------*/

    /*Two footer section columns occupy the full width of the viewport*/
    .footer-section {
        width: 50%;
        margin-bottom: 2em;
    }

    /*-----------------------------------------------------------------*/
    /*Navigation bar tablet layout-------------------------------------*/
    /*-----------------------------------------------------------------*/

    /*Hide 'Toggle Contrast' button to create a clean interface*/
    .low-contrast-toggle {
        display: none;
    }

    /*Display hamburger menu in top right corner*/
    .toggle-button {
        display: flex;
    }

    /*Hide navigation dropdown menu by default before being toggled by the hamburger menu*/
    .nav-bar-links {
        width: 100%;
        display: none;
    }

    /*Navigation links can become visible through user interaction with the hamburger menu*/
    .nav-bar-links.active {
        display: flex;
    }

    /*Make the navigation links vertically stacked on top of one another*/
    .nav-bar-links ul {
        width: 100%;
        flex-direction: column;
    }

    /*Center each navigational link within the dropdown menu*/
    .nav-bar-links ul li {
        text-align: center;
    }

    /*Make each navigation link distinct by spacing them out from one another*/
    .nav-bar-links ul li a {
        padding: .5rem 1rem;
    }

    /*Remove line animation above navigation links to yield a cleaner interface*/
    .nav-bar-links a:hover::after {
        transform: scale(0, 0);
    }

    /*----------------------------------------------------------------------------------------------------*/
    /*Hamburger button adjustments for when standard navigation bar becomes fixed on tablet layouts-------*/
    /*----------------------------------------------------------------------------------------------------*/

    /*Increase visibility of the hamburger button by making it bright to contrast the fixed navigation bar dark
    background colour*/
    .nav-bar.sticky .toggle-button .bar {
        background-color: var(--almost-white);
    }

    /*Vertically align hamburger icon relative to company logo position for the fixed navigation bar*/
    .nav-bar.sticky .toggle-button {
        top: 2.37em;
    }

    /*change the image used for company logo to dark background version on sticky navigation bar*/
    .nav-bar.sticky .company-name-JSON img{
        content: url("../images/logo_1.png");
    }
}

#main-page-title-center {
    font-size: 1.6em;
    padding-top: 200px;
    text-align: center;
}

/*Provide whitespace around the meta data section*/
.meta-data {
    padding: 0.5em 0;
}

/*Emphasize the article author names more than the remaining meta data (publish date, number of comments, etc.)*/
.meta-data h4 {
    text-align: left;
    font-weight: 800;
    font-size: 0.8em;
    color: var(--dark-grey);
}

/*De-emphasize the publish date and number of comments meta data compared to the author names*/
.meta-data p {
    font-family: var(--main-header);
    text-align: left;
    font-size: 0.73em;
    font-weight: 400;
    color: var(--dark-grey);
}

/*Emphasize Pokemon name more than the remaining data*/
.build-data h4 {
    text-align: left;
    font-weight: 800;
    font-size: 1.1em;
    color: var(--dark-grey);
}

.build-data h5 {
    font-family: var(--main-header);
    text-align: left;
    font-weight: 800;
    font-size: 1.05em;
    color: var(--dark-grey);
}

.build-data p {
    font-family: var(--main-header);
    text-align: left;
    font-size: 1em;
    font-weight: 400;
    color: var(--dark-grey);
}