

   
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>swag</title>
        
        <!-- THEME STYLE / CSS START-->
        <style>
            body {
                background-color: black; 
                margin: 8px;
                color: #eeeeee;
                font-family: arial, helvetica; 
                font-size: 11pt; 
            }
 
            .small {font-size: 9pt;}
 
            h3 {color: #d9d9ff}
 
            h2 {
                font-size: 13.5pt; 
                font-weight: bold; 
                color: #9999FF;
                margin-top: 20px
            }
 
            h1 {
                font-family: "arial narrow", arial, helvetica;
                font-size: 24pt; 
                font-weight: bold; 
                color: #9999FF;
                text-align: center;
                letter-spacing: 6px;
            }
 
            em {
                color: #d9d9ff;
            }
 
            a:link {color: #9999FF;}
            a:visited {color: #999999;}
            a:active {color: #999999;}
            a:hover {color: #cccccc; cursor: crosshair;}
 
            ul {list-style-type: circle;}
 
            blockquote {
                margin-left: 2px;
                padding-left: 15px;
                border-left: 2px solid #9999FF;
            }
 
            .container {
                width: 750px;
                margin: 30px auto 30px auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                border: 2px solid #9999FF;
            }
 
            /* Header */
            .head {
                width: 100%;
                height: 43px;
                color: #9999FF;
                background-image: url(images/top.gif);
                border-bottom: solid 0.5px #9999FF;
                text-align: left;
                font-family: "UnifrakturCook", cursive;
                font-weight: 700;
                font-style: normal;
            }
            .headarea {
                display: flex;
                height: 100%;
            }
            .headarea a {
                text-decoration: none;
                font-size: 20px;
                line-height: 40px;
                letter-spacing: 3px;
            }
            .headarea a:hover {text-shadow: 0 0 3px #eee}
 
            /* Navigation */
            .navi {
                width: 100%;
                height: 30px;
                border-bottom: solid 0.5px #9999FF;
            }
            .navi ul {
                display: flex;
                height: 100%;
                justify-content: space-between;
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
 
            .navi li {
                padding: 5px;
                display: block;
                align-content: center;
                width: 100px;
                overflow-x:hidden;
            }
 
            .navi li.dropdown {
                display: inline-block;
                background: transparent;
            }
 
            .navi li:hover, .navigation li.dropdown:hover {
                background-color: #2b2b2b;
                color: var(--bright);
                text-shadow: 0 0 3px #eee;
            }
 
            .navi a {
                display: inline-block;
                text-decoration: none;
                background: transparent;
                text-align: center;
                margin-bottom: 4px;
                padding-bottom: 2px;
                padding-top: 2px;
                line-height: 10px;
                text-transform: uppercase;
                letter-spacing: 1px;
                color: #9999FF;
                width: inherit;
            }
 
            .navi a:hover {color: white; text-decoration: underline}
 
            .dropdown-content {
                display: none;
                position: absolute;
                width: 90px;
                padding: 4px;
                border: 1px solid #9999FF;
                background-color: black;
                z-index: 1;
            }
 
            .dropdown-content a {
                padding: 4px;
                text-decoration: none;
                display: block;
                text-align: center;
                width: auto;
            }
 
            .dropdown-content a:hover {
                background-color: #9999FF;
                width: auto;
            }
 
            .dropdown:hover .dropdown-content {
                display: block;
            }
 
            /* Body */
            .body {
                padding: 10px;
            }
 
            .body img {
                max-width: 100%;
            }
 
            /* Footer */
            .foot {
                width: 100%;
                text-align: center;
                border-top: solid 0.5px #9999FF;
                font-size: 9pt;
            }
 
            /* Fonts */
            .unifrakturcook-bold {
              font-family: "UnifrakturCook", cursive;
              font-weight: 700;
              font-style: normal;
            }
        </style>
        <!-- THEME STYLE / CSS END -->
        
        
        #statuscafe {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}
        