<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <style>
        :root {
            --blue-1: #2978E0;
            --blue-2: #1F5BA8;
        
            --bg-color: #313338;
            --grey-1: #1A1B1E;
            --grey-2: #2B2D31;
            --grey-25: #27282b;
            --grey-3: #43444B;
        
            --light-grey: #B5BAC1;
        
            --white-1: #fefefe;
            --white-2: #cecece;
        
            --success: #14A44D;
            --success-2: #1c6e3d;
            --warning: #E4A11B;
            --warning-2: #a1761f;
            --danger: #DC4C64;
            --danger-2: #9e3c4d;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 0;
            margin: 0;
            background-color: var(--grey-1);

            color: var(--white-1);
            font-size: 17px;
            font-weight: 600;

            font-family: 'Poppins', sans-serif;
        }

        a {
            color: var(--blue-1);
        }

        .top {
            --padding: 15px;
            padding: var(--padding);
            width: calc(90% - var(--padding) * 2);
            background-color: rgba(255,255,255, 5%);

            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        .top img {
            height: 100px;
        }

        .bottom {
            --padding: 30px;
            padding: 15px var(--padding);
            width: calc(90% - var(--padding) * 2);
            background-color: rgba(255,255,255, 7%);

            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }
    </style>
</head>
<body>
    <div class="top">
        <img src="https://file.strassburger.org/argus-banner.png" height="150px">
    </div>
    <div class="bottom">
        <p>Hello <%= mail.split("@")[0] %>,</p>

        Your Bot <%= botMember.user.username%>#<%=botMember.user.discriminator%> (<%=botMember.user.id%>) is now <%= status %> on <%=newPresence.guild.name%> (<%=newPresence.guild.id%>)

        <p>Greetings<br>Your Argus Team</p>
    </div>
</body>
</html>