{{ "/style.css" | absolute_url }}

* {
    font-family:        Cooper, Georgia, serif;
}

html {
    background-color:   #0B083E;
    max-width:          800px;
    margin-left:        auto;
    margin-right:       auto;
}

@media (prefers-color-scheme: dark) {
    html {
        color:          #ECECEC;
    }
}

header {
    height:             60px;
    vertical-align:     center;
    color:              white;
    margin:             50px 0px 40px 0px;
}

article {
    overflow:           auto;
    background-color:   silver;
    padding:            10px 25px 10px 25px;
    line-height:        1.5;
    border-radius:      8px;
}

@media (prefers-color-scheme: dark) {
    article {
        background-color:   #202050;
    }
}

a {
    color:              black;
    font-weight:        500;
    text-decoration:    none;
    font-size:          15px;
}

a:hover {
    text-decoration:    underline;
}

sup {
    line-height:        0px;
}

sup a {
    font-weight:        400;
    font-size:          12px;
}

ul.navblock {
    list-style-type:    none;
    margin:             0;
    padding:            0;
}

ul.navblock li {
    display:            inline;
    float:              right;
}

ul.navblock li a {
    display:            block;
    color:              white;
    padding:            8px 16px;
    text-decoration:    none;
}

ul.navblock li a:hover {
    background-color:   silver;
    color:              black;
    border-radius:      6px;
}

@media (prefers-color-scheme: dark) {
    ul.navblock li a:hover {
        background-color:
                        #454575;
        color:          white;
    }
}

img.logo {
    width:              250px;
    height:             50px;
    vertical-align:     center;
    float:              left;
}

@media screen and (max-device-width: 580px) {
    header {
        height:         110px;
        margin:         0px;
    }
    img.logo {
        float:          none;
    }
    ul.navblock {
        margin:         10px 0px 0px 0px;
    }
    ul.navblock li {
        width:          25%;
        text-align:     center;
    }
}

@media screen and (max-device-width: 400px) {
    header {
        height:         140px;
    }
    ul.navblock li {
        width:          50%;
    }
}

div {
    overflow:           auto;
}

div.spacer {
    height:             150px;
}

div.smallspacer {
    height:             50px;
}

div.minispacer {
    height:             20px;
}

table {
    width:              100%
    border-spacing:     0px;
}

th {
    font-weight:        600;
    padding:            12px 0px 12px 0px;
    border-bottom:      1px solid #ddd;
}

@media (prefers-color-scheme: dark) {
    th {
        border-bottom:      1px solid #454575;
    }
}

td {
    padding:            12px 0px 12px 0px;
}

.scrollable-table-container {
  overflow-x: auto;
}

.scrollable-table {
    margin:             0 auto;
    table-layout:       fixed;
    min-width:          640px;
    width:              100%;
}

.scrollable-table td:first-child,
.scrollable-table th:first-child {
    width:              240px;
    white-space:        normal;
    word-wrap:          break-word;
}

.scrollable-table td,
.scrollable-table th {
    min-width:          80px;
}

h1 {
    font-weight:        600;
    font-size:          24px;
    text-transform:     uppercase;
    letter-spacing:     3px;
}

h2 {
    font-weight:        600;
    font-size:          24px;
}

h3 {
    font-weight:        500;
    font-size:          20px;
}

h4 {
    font-weight:        500;
    font-size:          16px;
}

hr {
    margin-top:         -20px;
    margin-bottom:      30px;
}

p {
    font-weight:        400;
    font-size:          16px;
}

strong {
    font-weight:        500;
    font-size:          15px;
}

p strong a {
    font-weight:        600;
}

em {
    font-size:          15px;
}

code {
    font-family:        "SF Mono", monospace;
    font-size:          13px;
}

blockquote {
    background-color:   gainsboro;
    margin:             0px;
    padding:            10px 20px 10px 25px;
    border-radius:      8px;
}

blockquote p {
    font-style:         italic;
    font-size:          15px;
}

blockquote em {
    font-size:          16px;
    font-style:         normal;
}

@media (prefers-color-scheme: dark) {
    a, h1, h2, h3, h4, h5, h6 {
        color:          white;
    }
    hr {
        border:         1px solid #454575;
    }
    blockquote {
        color:          white;
        background-color:
                        #454575;
    }
}

@font-face {
    font-family:        Cooper;
    font-weight:        400;
    font-style:         normal;
    src:                url('Fonts/Cooper Light.ttf');
}

@font-face {
    font-family:        Cooper;
    font-weight:        400;
    font-style:         italic;
    src:                url('Fonts/Cooper Light Italic.ttf');
}

@font-face {
    font-family:        Cooper;
    font-weight:        500;
    font-style:         normal;
    src:                url('Fonts/Cooper Medium.ttf');
}

@font-face {
    font-family:        Cooper;
    font-weight:        500;
    font-style:         italic;
    src:                url('Fonts/Cooper Medium Italic.ttf');
}

@font-face {
    font-family:        Cooper;
    font-weight:        600;
    font-style:         normal;
    src:                url('Fonts/Cooper Bold.ttf');
}

@font-face {
    font-family:        Cooper;
    font-weight:        600;
    font-style:         italic;
    src:                url('Fonts/Cooper Bold Italic.ttf');
}

@font-face {
    font-family:        Cooper;
    font-weight:        700;
    font-style:         normal;
    src:                url('Fonts/Cooper Black.otf');
}

@font-face {
    font-family:        Cooper;
    font-weight:        700;
    font-style:         italic;
    src:                url('Fonts/Cooper Black Italic.ttf');
}