*,
        *:before,
        *:after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            position: relative;
            font-weight: 400;
            outline: none;
            border: none
        }

        body {
            color: #313131;
            line-height: 1.5;
            font-size: 16px;
            font-weight: 400;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 500
        }

        h2 {
            font-size: 1.4rem
        }

        main {
            margin: 8rem auto;
            padding: 0 1.5rem;
            width: 100%;
            max-width: 60rem
        }

        .content {
            height: 100px;
            margin: 2rem 0
        }

        p {
            line-height: 1.75;
            font-size: 1.1rem
        }

        .challenge {
            border: 1px solid #e0e0e0;
            background-color: #fafafa;
            border-radius: 3px;
            height: 65px;
            max-width: 300px;
            width: 100%;
            -webkit-user-select: none;
            user-select: none
        }

        .challenge-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 18px
        }

        .challenge-branding {
            width: 30px;
            height: 30px
        }

        .challenge-branding svg {
            width: 30px;
            height: 30px
        }

        .challenge-item {
            display: flex;
            align-items: center
        }

        .challenge-label {
            margin-left: 10px;
            font-size: 15px
        }

        .ctp-checkbox-label {
            cursor: pointer;
            height: 28px;
            display: flex;
            align-items: center
        }

        .ctp-checkbox-label input {
            position: absolute;
            opacity: 0;
            z-index: 9999;
            cursor: pointer;
            width: 28px;
            height: 28px
        }

        input:focus~.mark,
        input:checked~.mark,
        input:disabled~.mark {
            border-color: #038127
        }

        .p1 {
            fill: none;
            stroke: #fff
        }

        .success-icon {
            display: flex;
            margin-right: 8px;
            border-radius: 50%;
            box-shadow: inset 0 0 #038127;
            width: 30px;
            height: 30px;
            animation: scale-up-center .5s cubic-bezier(.55, .085, .68, .53) both;
            stroke-width: 6px;
            stroke: #f8f8f8;
            stroke-miterlimit: 10
        }

        .success-icon .p1 {
            stroke-dasharray: 242;
            stroke-dashoffset: 242;
            box-shadow: inset 0 0 #038127;
            animation: stroke .4s cubic-bezier(.65, 0, .45, 1) forwards;
            animation-delay: .4s
        }

        .success-circle {
            stroke-dashoffset: 0;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke: #038127;
            fill: #038127
        }

        @keyframes stroke {
            to {
                stroke-dashoffset: 0
            }
        }

        @keyframes scale {

            0%,
            to {
                transform: none
            }

            50% {
                transform: scaleZ(1)
            }
        }

        .ctp-checkbox-label .mark {
            transition: border-color .1s ease-in, border-radius .1s ease-in;
            z-index: 9998;
            border: 2px solid #6d6d6d;
            border-radius: 3px;
            background: #fff;
            width: 28px;
            height: 28px
        }

        .challenge-verifying svg {
            display: flex;
            margin-right: 8px;
            width: 30px;
            height: 30px;
            animation: rotate 5s linear infinite
        }

        .circle {
            stroke-width: 3px;
            stroke-linecap: round;
            stroke: #038127;
            stroke-dasharray: 0, 100, 0;
            stroke-dashoffset: 200;
            stroke-miterlimit: 1;
            stroke-linejoin: round
        }

        @keyframes rotate {
            to {
                transform: rotate(360deg)
            }
        }

        @keyframes unspin {
            40% {
                stroke-width: 1px;
                stroke-linecap: square;
                stroke-dashoffset: 192
            }

            to {
                stroke-width: 0
            }
        }

        @keyframes scale-up-center {
            0% {
                transform: scale(.01)
            }

            to {
                transform: scale(1)
            }
        }

        @media (max-width: 750px) {
            h1 {
                font-size: 2.25rem
            }

            h2 {
                font-size: 1.25rem
            }
        }

        @media (max-width: 450px) {
            main {
                margin: 5rem auto
            }

            h1 {
                font-size: 2rem
            }

            h2 {
                font-size: 1.1rem
            }

            p {
                font-size: 1rem
            }
        }

        @media (max-width: 350px) {
            .challenge-branding {
                display: none
            }
        }