@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,regular,500,600,700,800&display=swap);

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert
}

*,
*::before,
*::after {
    box-sizing: border-box
}

a,
button {
    cursor: revert
}

ol,
ul,
menu {
    list-style: none
}

img {
    max-inline-size: 100%;
    max-block-size: 100%
}

table {
    border-collapse: collapse
}

input,
textarea {
    -webkit-user-select: auto;
    user-select: auto
}

textarea {
    white-space: revert
}

meter {
    -webkit-appearance: revert;
    -moz-appearance: revert;
    appearance: revert
}

:where(pre) {
    all: revert
}

::-moz-placeholder {
    color: unset
}

::placeholder {
    color: unset
}

::marker {
    content: initial
}

:where([hidden]) {
    display: none
}

:where([contenteditable]:not([contenteditable=false])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
    user-select: auto
}

:where([draggable=true]) {
    -webkit-user-drag: element
}

:where(dialog:modal) {
    all: revert
}

html,
body {
    font-weight: 400;
    font-family: "Open Sans", sans-serif
}

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

p {
    line-height: 150%
}

h1 {
    font-size: 38px;
    font-weight: 600;
    text-align: center;
    margin: 25px 0
}

h2 {
    font-size: 32px;
    font-weight: 600;
    margin: 20px 0;
    text-align: center
}

h3 {
    font-size: 26px;
    font-weight: 600;
    margin: 15px 0
}

h4 {
    font-size: 22px;
    font-weight: 600;
    margin: 12px 0
}

ol {
    list-style: decimal;
    padding: 15px 25px
}

ul {
    list-style: disc;
    padding: 15px 25px
}

li {
    line-height: 150%
}

ol li::marker,
ul li::marker {
    color: #233d50
}

table {
    border-collapse: collapse;
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    display: block;
    overflow: auto
}

table tr td,
table tr th {
    border: 1px solid #333;
    padding: 15px
}

table tr th {
    background-color: #C60B1E;
    color: #fff;
    font-size: 18px;
    text-align: center
}

table tr td:hover {
    background-color: #e3e3e3
}

.header {
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    box-shadow: 0 0 10px rgb(201, 201, 201);
    padding: 20px 0;
    background-color: #fff
}

.header .container {
    display: flex;
    align-items: center
}

.header .container .logo {
    flex: 0 0 80px
}

.header .container .logo svg {
    width: 60px;
    height: 60px
}

.header .container h1 {
    flex: 1;
    font-size: 28px;
    margin: 0
}

.main {
    height: 100%;
    flex: 1 1 auto;
    padding: 50px 0
}

.main .content p {
    margin: 15px 0
}

.main .content img,
.main .content svg.hero {
    display: flex;
    margin: 0 auto;
    max-width: 500px
}

.container {
    max-width: 90vw;
    margin: 0 auto;
    padding: 0 16px
}

.footer {
    padding: 30px 0;
    background: #C60B1E;
    color: #fff
}

.footer .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px
}

.footer p {
    font-size: 14px;
    font-weight: 300
}

.footer a {
    color: #FFC400;
    text-decoration: underline
}

@media(max-width:768px) {
    h1 {
        margin: 20px 0;
        font-size: 30px
    }

    h2 {
        font-size: 24px;
        margin: 15px 0
    }

    h3 {
        font-size: 20px;
        margin: 10px 0
    }

    .container {
        max-width: 100%
    }

    .main .content img,
    .main .content svg.hero {
        max-width: 100%
    }
}