/** Global Styles **/

/**
 * Variable Definitions
 */
:root {
    --color-pink: #eb008b;
    --color-purple: #90278e;
    --color-gold: #ffb800;
    --color-blue: #00c2ff;
    --color-black: #000000;
    --color-white-bright: #ffffff;
    --color-dove: #f7f7f7;
    --color-graphite: #767676;

    --site-width: 740px;
}

/**
 * Core Elements
 */
html {
    width:100vw;
    margin:0;
    padding:0;
}

body {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 16px;
    background-color: var(--color-white-bright);
    text-align: center;
    width: 100vw;
    margin:0;
    padding:0;
}
header, footer, section {
    margin:0;
    padding:0;
}

.mobile-hide-inline {
    display: inline;
}
.mobile-show-inline {
    display: none;
}

.full-width-container {
    text-align: center;
}
.full-width-container .content {
    width: var(--site-width);
    margin: 0 auto;
    text-align: left;
}
.site-width-container {
    width: var(--site-width);
    margin: 0 auto;
    text-align: left;
}
.site-width-container .content { }


/**
 * Bespoke additions
 */
footer {
    font-size: 1.5em;
    border-top: 1px solid #888;
    margin-top: 4em;
    padding-top: 4em;
    padding-bottom: 2em;
    text-align: center;
    color: #fff;
    background-color: #333;
}
footer p {
    font-weight: bold;
    margin: 0; 
}
footer p.copy {
    color: #fff;
    font-size: 0.6em;
    font-weight: normal;
    margin-top: 10em;
}
footer .contact {
    font-size: 0.75em;
    margin-top: 0.5em;
}
footer .contact a.contact-button {
    background-color: #fff;
}
footer .contact a.contact-button:hover {
    background-color: rgb(255,205,30);
    border: 1px solid #333;
}
footer .contact a.contact-button > svg > path {
    fill: #333;
}
footer .contact a.contact-button:hover > svg > path {
    fill: #333;
}