{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Title -->
    <title>{% block title %}{% endblock title %}</title>

    <!-- Inline Styles -->
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap");

        hr:not([size]) {
            height: 1px
        }

        .h1,
        .h2,
        .h3,
        .h4,
        .h5,
        .h6,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-top: 0;
            margin-bottom: .5rem;
            font-weight: 500;
            line-height: 1.2
        }

        .h1,
        h1 {
            font-size: calc(1.375rem + 1.5vw)
        }

        @media(min-width:1200px) {

            .h1,
            h1 {
                font-size: 2.5rem
            }
        }

        .h2,
        h2 {
            font-size: calc(1.325rem + .9vw)
        }

        @media(min-width:1200px) {

            .h2,
            h2 {
                font-size: 2rem
            }
        }

        .h3,
        h3 {
            font-size: calc(1.3rem + .6vw)
        }

        @media(min-width:1200px) {

            .h3,
            h3 {
                font-size: 1.75rem
            }
        }

        .h4,
        h4 {
            font-size: calc(1.275rem + .3vw)
        }

        @media(min-width:1200px) {

            .h4,
            h4 {
                font-size: 1.5rem
            }
        }

        .h5,
        h5 {
            font-size: 1.25rem
        }

        .h6,
        h6 {
            font-size: 1rem
        }

        p {
            margin-top: 0;
            margin-bottom: 1rem
        }

        ol,
        ul {
            padding-left: 2rem
        }

        dl,
        ol,
        ul {
            margin-top: 0;
            margin-bottom: 1rem
        }

        ol ol,
        ol ul,
        ul ol,
        ul ul {
            margin-bottom: 0
        }

        label {
            display: inline-block
        }

        button {
            border-radius: 0
        }

        button:focus:not(:focus-visible) {
            outline: 0
        }

        button,
        input,
        optgroup,
        select,
        textarea {
            margin: 0;
            font-family: inherit;
            font-size: inherit;
            line-height: inherit
        }

        button,
        select {
            text-transform: none
        }

        [role=button] {
            cursor: pointer
        }

        [type=button],
        [type=reset],
        [type=submit],
        button {
            -webkit-appearance: button
        }

        [type=button]:not(:disabled),
        [type=reset]:not(:disabled),
        [type=submit]:not(:disabled),
        button:not(:disabled) {
            cursor: pointer
        }

        .container,
        .container-fluid,
        .container-lg,
        .container-md,
        .container-sm,
        .container-xl,
        .container-xxl {
            width: 100%;
            padding-right: var(--mdb-gutter-x, .25rem);
            padding-left: var(--mdb-gutter-x, .25rem);
            margin-right: auto;
            margin-left: auto
        }

        @media(min-width:576px) {

            .container,
            .container-sm {
                max-width: 540px
            }
        }

        @media(min-width:768px) {

            .container,
            .container-md,
            .container-sm {
                max-width: 720px
            }
        }

        @media(min-width:992px) {

            .container,
            .container-lg,
            .container-md,
            .container-sm {
                max-width: 960px
            }
        }

        @media(min-width:1200px) {

            .container,
            .container-lg,
            .container-md,
            .container-sm,
            .container-xl {
                max-width: 1140px
            }
        }

        @media(min-width:1400px) {

            .container,
            .container-lg,
            .container-md,
            .container-sm,
            .container-xl,
            .container-xxl {
                max-width: 1320px
            }
        }

        .row {
            --mdb-gutter-x: 1.5rem;
            --mdb-gutter-y: 0;
            display: flex;
            flex-wrap: wrap;
            margin-top: calc(var(--mdb-gutter-y)*-1);
            margin-right: calc(var(--mdb-gutter-x)*-0.5);
            margin-left: calc(var(--mdb-gutter-x)*-0.5)
        }

        .row>* {
            flex-shrink: 0;
            width: 100%;
            max-width: 100%;
            padding-right: calc(var(--mdb-gutter-x)*0.5);
            padding-left: calc(var(--mdb-gutter-x)*0.5);
            margin-top: var(--mdb-gutter-y)
        }

        .col {
            flex: 1 0 0%
        }


        .btn.active,
        .btn.active:focus,
        .btn.focus,
        .btn:active,
        .btn:active:focus,
        .btn:focus,
        .btn:hover {
            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 4px 20px 0 rgba(0, 0, 0, .1)
        }


        * {
            margin: 0;
            padding: 0;
            font-family: "Poppins", sans-serif;
        }

        body {
            scroll-behavior: smooth;
        }

        .text-underline {
            text-decoration: underline;
        }

        section.emails__template {
            padding: 10px 0px;
            background-color: rgb(94, 94, 94);
        }

        div.emails__card {
            max-width: 50%;
            margin: auto;
            background: #0B0B0D;
            margin-top: 0%;
            color: #ffffff;
            border: 5px solid #222121;
        }

        div.emails__card div.emails__header {
            margin-bottom: 40px;
            background: rgba(66, 66, 66, 0.918);
            padding: 0px 0px 30px 0px;
        }

        div.emails__card div.emails__header img.emails__image {
            height: 300px;
        }

        div.emails__card div.emails__header h2.emails__title {
            font-weight: 600;
        }

        div.emails__card div.emails__body {
            max-width: 80%;
            margin: auto;
            padding: 10px 0px 60px 0px;
        }

        div.emails__card div.emails__body p.h6 {
            padding-top: 20px;
            line-height: 24px;
            padding-bottom: 30px;
        }

        div.emails__card div.emails__body a.email-verification-button {
            margin-top: 30px;
            background: linear-gradient(97.36deg, rgb(32, 32, 32) 15.49%, rgba(66, 66, 66, 0.918) 109.8%);
            border-radius: 50px;
            color: #ffffff;
            padding: 15px 40px;
            text-decoration: none;
        }

        div.emails__card div.emails__footer {
            border-top: 3px solid #f3f3f3;
            padding: 40px 0px;
        }

        div.emails__card div.emails__footer p.emails__footer__title {
            line-height: 24px;
        }

        div.emails__card div.emails__footer p.emails__footer__title a {
            color: #f3f3f3;
        }

        div.emails__card div.emails__header,
        div.emails__card div.emails__body,
        div.emails__card div.emails__footer {
            text-align: center;
        }

        @media screen and (max-width: 789px) {
            div.emails__card {
                max-width: 100%;
            }

            div.emails__card div.emails__header img {
                height: 190px !important;
            }

            h2.emails__title {
                font-size: 22px;
            }

            div.emails__card div.emails__body p.h6 {
                padding-bottom: 30px;
            }
        }

        @media screen and (max-width: 489px) {
            div.emails__footer > p {
                max-width: 90%;
                margin: auto;
            }
        }
    </style>
</head>

<body>
    {% block email_content %}{% endblock email_content %}
</body>

</html>