:root{
    --mainbg:#5e548f;
    --text:#c5b8f3; 
    --border:3px solid #afa9e6; 
    
    --accent:#b7c4fd; 
    --accent2:#97e1eb; 
    --background:#000000;
}

body {
    background: var(--background);
    font-family: ms pgothic;
    color: var(--text);
    margin: 0;
    /*background-image:url("../../images/backgrounds/colorful_stars.png");
    background-position: fixed;
    background-size: cover;*/
}

a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout container */
#layout {
    width: 900px;
    margin: 20px auto;
    background: var(--mainbg);
    border: var(--border);
    display: flex;
    flex-direction: column;
    max-width:95%;
}

/* Header */
#header {
    padding: 20px;
    border-bottom: var(--border);
    background: var(--accent);
}
#header h1 {
    margin: 0;
    font-size: 24px;
    color:var(--accent2);
}

/* Wrapper */
#content-wrapper {
    display: flex;
}

/* Sidebar */
#sidebar {
    width: 250px;
    background: var(--mainbg);
    border-left: var(--border);
    padding: 15px;
    font-size: 13px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 600px;
    max-width:20%;
}

.sidebar-widget {
    margin-bottom: 0px;
}

.sidebar-widget h3 {
    color: var(--accent2);
    font-size: 14px;
    margin-bottom: 5px;
    padding-bottom: 3px;
    border-bottom: var(--border);
}
.sidebar-widget ul {
    list-style: none;
    padding: 0;
}
.sidebar-widget li {
    margin-bottom: 4px;
}

/* Calendar compact */
.mini-calendar {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}

.mini-calendar th, .mini-calendar td {
    border: 1px solid var(--accent);
    text-align: center;
    padding: 2px 4px;
}

.mini-calendar .current-day {
    background: var(--background);
}

.mini-calendar .has-post a {
    font-weight: bold;
    text-decoration: underline;
}

/* Main */
#main {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    max-height: 600px;
}

.entry_table {
    border-bottom:var(--border);
}

.entry_title {
    font-size: 18px;
    font-weight:bold;
    color: var(--accent2);
}

.entry_state {
    font-size: 12px;
    color: var(--accent2);
    margin-bottom: 10px;
}

.entry_text {
    margin-bottom: 10px;
}

/* Footer */
#footer {
    padding: 10px;
    border-top: var(--border);
    background: var(--accent);
}

#header,#footer{
    background-image:url("../images/backgrounds/rainbow.png");
    background-size: cover;
}

img{
    max-width:95%;
}