@font-face {
    font-family: "BigShouldersText-Thin";
    src: url("BigShouldersText-Thin.woff2") format("woff2"),
        url("BigShouldersText-Thin.woff") format("woff"),
        url("BigShouldersText-Thin.ttf") format("truetype");
}
@font-face {
    font-family: "BigShouldersText-ExtraLight";
    src: url("BigShouldersText-ExtraLight.woff2") format("woff2"),
        url("BigShouldersText-ExtraLight.woff") format("woff"),
        url("BigShouldersText-ExtraLight.ttf") format("truetype");
}
@font-face {
    font-family: "BigShouldersText-Light";
    src: url("BigShouldersText-Light.woff2") format("woff2"),
        url("BigShouldersText-Light.woff") format("woff"),
        url("BigShouldersText-Light.ttf") format("truetype");
}
@font-face {
    font-family: "BigShouldersText-Regular";
    src: url("BigShouldersText-Regular.woff2") format("woff2"),
        url("BigShouldersText-Regular.woff") format("woff"),
        url("BigShouldersText-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "BigShouldersText-Medium";
    src: url("BigShouldersText-Medium.woff2") format("woff2"),
        url("BigShouldersText-Medium.woff") format("woff"),
        url("BigShouldersText-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "BigShouldersText-SemiBold";
    src: url("BigShouldersText-SemiBold.woff2") format("woff2"),
        url("BigShouldersText-SemiBold.woff") format("woff"),
        url("BigShouldersText-SemiBold.ttf") format("truetype");
}
@font-face {
    font-family: "BigShouldersText-Bold";
    src: url("BigShouldersText-Bold.woff2") format("woff2"),
        url("BigShouldersText-Bold.woff") format("woff"),
        url("BigShouldersText-Bold.ttf") format("truetype");
}
@font-face {
    font-family: "BigShouldersText-ExtraBold";
    src: url("BigShouldersText-ExtraBold.woff2") format("woff2"),
        url("BigShouldersText-ExtraBold.woff") format("woff"),
        url("BigShouldersText-ExtraBold.ttf") format("truetype");
}
@font-face {
    font-family: "BigShouldersText-Black";
    src: url("BigShouldersText-Black.woff2") format("woff2"),
        url("BigShouldersText-Black.woff") format("woff"),
        url("BigShouldersText-Black.ttf") format("truetype");
}

/* @import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Text:wght@100;200;300;400;500;600;700;800;900&display=swap"); */
/* font family: https://fonts.google.com/specimen/Big+Shoulders+Text */

* {
    color: #fff;
    font-family: "BigShouldersText-Regular", sans-serif;
    font-size: 16pt;
    margin: 0;
    padding: 0;
}

body {
    background-color: #003;
}

body > div {
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    width: 800px;
}

header {
    background-color: #fff;
    border: solid 1px #003;
    border-radius: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    padding-top: 30px;
    padding-bottom: 20px;
}

header img {
    display: block;
    height: 203px;
    margin-left: auto;
    margin-right: auto;
    width: 708px;
}

article {
    float: left;
    margin-right: 25px;
    width: 250px;
}

article:last-child {
    margin-right: 0;
}

article h1,
footer nav button {
    background-color: #60c;
    border: solid 1px #003;
    border-radius: 10px;
    color: #0ff;
    cursor: pointer;
    font-family: "BigShouldersText-Bold", sans-serif;
    font-size: 24pt;
    padding: 5px;
    padding-left: 15px;
}

article h1:hover,
footer nav button:hover,
.article-active {
    background-color: #0ff;
    color: #8000ff;
}

article div {
    background-color: #003;
    border: solid 1px #333;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    min-height: 444px;
    padding: 10px;
}

article h1,
.article-active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

p {
    margin-top: 16pt;
}

p:first-child {
    margin-top: 0;
}

a,
strong,
.brand {
    font-family: "BigShouldersText-Bold", sans-serif;
}

a {
    white-space: nowrap;
}

a,
a:visited {
    color: #0ff;
}

a:hover,
a:active {
    color: #8000ff;
}

strong,
.brand {
    color: #0ff;
}

footer {
    clear: both;
    margin-top: 1000px;
}

footer nav {
    margin-bottom: 20px;
}

footer nav button {
    font-size: 9pt;
    margin-right: 10px;
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
}

footer div {
    background-color: #033;
    border: solid 1px #003;
    border-radius: 10px;
    clear: both;
    line-height: 6pt;
    margin-bottom: 40px;
    padding: 10px;
    width: 780px;
}

footer div,
footer div .brand,
#copyright-current-year {
    color: #003;
    font-size: 6pt;
}

#page-svg {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
    z-index: -1;
}

.svg-circle {
    opacity: 0.66;
}
