<style>
:root {
    /* Images */
    
    /*Put your entire header background image CSS here */
    --header-background: url(banner2.jpg) center no-repeat; 
    
    /*Fonts*/
    --body-font: Tahoma, sans-serif; /* Body text font */
    --header-font: Georgia, serif; /* Font for headers */
    
    /* Colors */
    /* If you want a transparent background for any element, set the value to none */
    
    --background: url(cloudynite.gif); /*Main background color*/
    --textcolor: #ffffff; /*Body text color*/
    
    --mainbg: rgba(0,0,0,.5); /*Content background color*/
    --mainlink: #607c00; /*Content link color*/
    --mainlinkhover: #5d1d5f; /*Content link hover color*/
    
    /*Header text colors*/
    --h1color: #ffffff;
    --h2color: #ffffff;
    --h3color: #ffffff;
    --h4color: #ffffff;
    
    --navbg: rgba(0,0,0,.5); /*Sidebar background color*/
    --navheader: #444; /*Sidebar header color*/
    --navborder: #607c00; /*If you don't want a border under the headers in the menu, change this to none*/
    
    --navlink: #ffffff; /*Sidebar link color*/
    --navlinkbg: none; /*Sidebar link background*/
    --navlinkhover: #FFF; /*Sidebar link hover color*/
    --navlinkbghover: #5d1d5f; /*Sidebar link hover background*/
    
    --formbg: #ebebeb; /*Form element background*/
    --formtext:#666; /*Form element text color*/



* { margin: 0; padding: 0; }

body 



{ 
    background: var(--background); 
    color: var(--textcolor);
    font: 1rem var(--body-font); 
}

#container { 
    max-width: 800px;
    padding: 10px;
    margin: 25px auto;
    display: flex;
    gap:15px;
    flex-wrap:wrap;
}

#main-header {
  border-radius: 25px;
    height: 150px; 
    flex:1 0 100%;
    background: var(--header-background);
    background-size:cover;
}

main { 
  border-radius: 25px;
    padding:15px;
    background:var(--mainbg);
    flex:1 1 calc(80% - 45px);
}

main a { 
    color: var(--mainlink); 
}

main a:hover, main a:focus { 
    color: var(--mainlinkhover); 
}

main p {
    margin:.5em 0px .5em 0px;
    line-height:1.5;
}

main h1 {
    font: 2em var(--header-font); 
    color: var(--h1color);
}

main h2 { 
    font: 1.7em var(--header-font);
    color: var(--h2color);
}

main h3 { 
    font: 1.4em var(--header-font); 
    color: var(--h3color);
}

main h4 {
    font:0.9em var(--header-font);
    font-style:italic;
}

main img { 
    margin: 5px; 
    max-width:90%;
}

main ul { 
    list-style: inside; 
}

main ul li ul {
    margin-left:15px;
}

main input, textarea, select, button { 
    background: var(--formbg); 
    color: var(--formtext); 
    border: 1px solid; 
    font: 1em var(--body-font);
    padding: 5px; 
    margin: 5px;
}

#sidebar {
    flex:1 1 20%;
}

.item {
  border-radius: 25px;
    padding:15px;
    background:var(--navbg);
    margin-bottom:15px;
}

.menu h2 { 
  
    font: 1.2rem var(--header-font); 
    border-bottom: 1px solid var(--navborder);
    color:var(--navheader);
}

.menu ul {
  border-radius: 25px;
    list-style:none;
    display:inline;
    margin:0;
}

.menu ul li {
    display:block;
}

.menu a { 
  border-radius: 25px;
    display: block; 
    text-decoration: none; 
    padding:5px;
    color: var(--navlink);
    background:var(--navlinkbg);
}

.menu a:hover, .menu a:focus { 
  border-radius: 25px;
    color: var(--navlinkhover);
    background: var(--navlinkbghover);
}

footer {
  border-radius: 25px;
    background:var(--mainbg);
    padding:15px;
    text-align:center;
    flex: 1 0 calc(100% - 30px);
}

/* Skip to content button */
#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--mainbg);
    color:var(--mainlink);
    z-index:1001;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

@media screen and (max-width:800px) {
    #sidebar {
        flex-basis: 30%;
    }
    
    main {
        flex-basis: calc(70% - 45px);
    }
}

}

.rounded-image {
  border-radius: 50%;
  width: 200px;  
  height: 200px; 
  object-fit: cover; 
}


#statuscafe {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

