@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: #d32f2f;
            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: #d32f2f;
            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: #fff;
            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%
            }
        }