:root {
    --copy: #333;
    --lightgrey: #888;
    --accent: 136, 58, 234;
    --accent-light: 224, 204, 250;
    --accent-dark: 49, 10, 101;
    --verylightgrey: #e0e0e0;
    --darkest: #121212;
    --lighterdark: #333;
    --accent-gradient: linear-gradient(
            45deg,
            rgb(var(--accent)),
            rgb(var(--accent-light)) 30%,
            white 60%
    );
}


body,
html {
    margin:0;
    padding:0;
    font-family: 'Ubuntu', sans-serif;
}
html {
    background: #e0d7ca;
    background-image:linear-gradient(-60deg, #e0d7ca, #ffffff);
}



body {
    min-width: 320px;
}

img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: inherit;
    transition: opacity .2s;
}
a:hover {
    opacity: .75;
}
p,li  {
    color:var(--copy);
    line-height:1.8em;

}

input,
textarea,
button {
    font-family: inherit;
}

.inner {
    max-width: 130rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-left: 3.5%;
    padding-right: 3.5%;
    box-sizing: border-box;
}


[v-show],
[v-if] {
    display: none;
}


body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


header h1 {
    display: flex;
    color: var(--lightgrey);
    align-items: center;
    font-size: 2em;
}
header {
    padding:2em 0 3em;

 }
header nav {
    font-size: 1.2em;
    border-radius:1.5em;
    box-shadow:-.3em .3em .5em rgba(0,0,0,.05), 1px 1px .2em rgba(0,0,0,.2);
    background-color: rgba(255,255,255,.5);
    font-weight: bold;
}
header a {
    text-decoration: none;
}
header nav a {
    padding:1em .5em;
    display: inline-block;
    font-size:.9em;
}
header nav a:first-child {
    padding-left:2em;
}
header nav a:last-child {
    padding-right:2em;
    border-right:0;
}

h1 img {
    width: 2em;
    height: 2em;
    margin:0 .5em;
}
h1 span,
header nav{
    color: var(--copy);
}
header .inner {
    display: flex;
    padding-top: 1em;
    padding-bottom: 1em;
    align-items: center;
}
header  nav {
    margin-left:auto;
}
.symbols {
    display: flex;
    justify-content: center;
    align-items: center;
}
.symbols img {
    width:15%;
    margin:1.5%;
    transition: transform .2s;
}
.symbols img:hover {
    transform:scale(1.2);
}
.symbols img:nth-child(1) {
    opacity: .5;
}
.symbols img:nth-child(3) {
    opacity: .75;
}
footer {
    padding:1.25em 0;
    text-align: right;
    font-size: 1.2em;
    color:var(--copy);
    background-color: rgba(255,255,255,.5);
    box-shadow:-.3em .3em .5em rgba(0,0,0,.05), 1px 1px .2em rgba(0,0,0,.2);
}
footer a {
    text-decoration: none;
    margin-left:1em;
    font-weight: bold;
    font-size: .9em;
}
footer a:last-child {
    padding-right:1em;
}
main .inner {
    width:100%;
    box-sizing: border-box;
}
main h1 {
    font-size:4em;
    max-width:11em;
}
main h1 {
    color: var(--lightgrey);
}
main h1 span {
    color: var(--copy);
}
.content-block {
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (min-width:900px) {
    .content-block .image {
        flex:0 0 30%;
    }
    .content-block .image img {
        width:100%;
    }
    .content-block .text {
        padding: 0 2%;
    }
}
.image-right .image {
    order:2;
}
.image-right .text {
    order:1;
    padding-left:0;
}


/**** START DARK MODE ****/
/*html  {
    background: var(--darkest);
    background-image:linear-gradient(-60deg,  var(--lighterdark), var(--darkest));
}
p {
    color:#ccc;
}
main h1  {
    color: #fff;
}
main h1  span  {
    color: var(--lightgrey);
}
footer,
header nav {
    background-color:rgba(255,255,255,.05);
    color:#ccc;
}
main h2,
main h3 {
    color: #fff;
}
main .image img {
    filter:invert(1);
}
header h1 {
    filter:invert(1);
}
.symbols {
    filter: invert(1);
}*/
/**** END DARK MODE ****/