body {
    font-family: 'Open Sans', Arial, sans-serif;
    color:#444;
    background-color:#222;
    font-size:12pt;
}

h1, h2, h3, h4, h5 {
    font-family: 'Josefin Sans', sans-serif;
    color:black;
}
body > .container:first-of-type {
    margin-top:1em;
}

.blue-circle {
    display:inline-block;
    height:0.8em;
    width:0.8em;
    border-radius:0.4em;
    background:#0CF;
    margin:0 0.5rem;
}

.cyan {
    color:#0CF;
}

.small-layout-content {
    background-color:#CCC;
    box-shadow:0 0 12px 0 black;
    border-radius:0.5em;
    padding:2em 2rem;
    width:100%;
    max-width:450px;
    margin:0 auto;
}

.small-layout-content.layout-transparent,
.large-layout-content.layout-transparent {
    background:none;
    box-shadow:none;
}

.layout-transparent {
    color:#CCC;
}

.layout-transparent h1,
.layout-transparent h2,
.layout-transparent h3,
.layout-transparent h4,
.layout-transparent h5 {
    color:white;	
}

.small-layout-container,
.large-layout-container {
    min-height:80vh;
    display:flex;
    align-items:center;
}

.large-layout-content {
    width:100%;
}