:root {
    /* Colour definitions */
    --almost-white-colour: #f9f9f9;
    --darkish-gray: #575755;
    --colour-very-dark-blue: #00435D;

    /* Colour assignments */
    --default-bg-colour: var(--almost-white-colour);
    --default-fg-colour: var(--darkish-gray);

    --primary-accent-colour: var(--colour-very-dark-blue);

    --link-focus-bg: var(--bright-yellow);
    --link-focus-fg: var(--primary-accent-colour);
}

body {
    background-color: var(--default-bg-colour);
    font-family: Roboto, Helvetica, Arial, sans-serif;
}

.header {
    background-color: var(--darkish-gray);
    color: var(--default-bg-colour);
    padding: 6px;
}

.homepage-logo img {
    width: 200px;
}

.footer {
    background-color: var(--darkish-gray);
    color: var(--default-bg-colour);
}

.footer a {
    color: var(--default-bg-colour);
}

.footer p {
    text-align: center;
    margin: 0;
}

.social-media-icons {
    display: flex;
    justify-content: center;
    margin: 0;
}

.social-media-icons li {
    flex: 0 1 36px;
}

.social-media-icons a {
    font-size: 1.5rem;
    color: var(--default-bg-colour);
}

.footer-links,
.footer-address {
    text-align: center;
    padding: 0;
    margin: 0;
}

.footer-links>li {
    display: inline;
}

.footer-links>li+li:before {
    content: " | ";
}

.footer {
    background-color: var(--darkish-gray);
}

.hidden-text {
    position: absolute;
    left: -10000px;
    height: 1px;
    width: 1px;
}

/* Sticky footer */

.sticky-footer-container {
    display: grid;
    height: 100vh;
    grid-template-rows: 1fr auto;
}

.common-main-container {
    grid-row: 1 / 2;
}

.common-footer-container {
    grid-row: -2 / -1;
}

/* End sticky footer */

#skiptocontent a {
    padding: 6px;
    position: absolute;
    top: -40px;
    left: 0px;
    color: var(--default-bg-colour);
    border-right: 1px solid var(--default-bg-colour);
    border-bottom: 1px solid var(--default-bg-colour);
    border-bottom-right-radius: 8px;
    background: var(--link-focus-bg);
    -webkit-transition: top 1s ease-out;
    transition: top 1s ease-out;
    z-index: 100;
}

#skiptocontent a:focus {
    position: absolute;
    left: 0px;
    top: 0px;
    outline-color: transparent;
    -webkit-transition: top 0.1s ease-in;
    transition: top 0.1s ease-in;
    color: var(--link-focus-fg);
}

@media screen and (min-width: 801px) {
    .footer {
        padding-bottom: 1.25rem;
    }
}

select, textarea, input[type="text"], input[type="email"], input[type="password"] {
	font-size: 16px;
  }

h2 {
    font-size: 1.8rem;
}