body { background: #000 url('bg.png')bottom repeat-x; color: #c9c8e9; font-family: "Cormorant", serif; font-size: 14pt; margin: 0; padding: 0; min-height:100vh; }
#container { width: 80%; margin: 0 auto; }
header { height: 125px;   font-family: "Fredoka", sans-serif; font-weight:400; font-size: 65pt; padding: 20px 0; line-height:125px;  text-align:left; color: #1c173b; text-shadow: 2px 2px 1px #c9c8e9, 2px -1px 1px #c9c8e9, -1px 1px 1px #c9c8e9, -1px -1px 1px #c9c8e9; margin-bottom: 5px; float:left;}
#sidebar { display: flex; flex-direction: column; width:30%; float:right; margin-top:20px; }
#content { display: flex; flex-direction: column; width: 68%; padding: 0 2% 0 0; float:left;  }
footer {  clear:both; text-align:center; padding: 7px 0; margin: 0; opacity: 0.85; }
a { color: #fff; }
a:hover { background-color: #c9c8e9; color: #1c173b;}
nav { margin-bottom: 20px; font-size: 17pt; }
nav a { text-decoration:none; padding: 10px;}
nav a:hover {  background-color: #1c173b; border-radius:15px; color: #c9c8e9;}
h2 { margin: 0; padding: 0; font-family: "Fredoka", sans-serif; font-weight: 400;}
h4 { margin: 1px 0; padding: 0; font-style:italic; }
ul { padding: 2px auto; margin: 2px auto; }
li { padding: 3px auto; margin: 3px auto; }
input, textarea, button {  border-radius: 15px!important; font-family: "Cormorant", serif!important; font-size: 14pt!important; background-color: #111!important; border: 1px dashed #c9c8e9!important; color: #c9c8e9!important; padding: 10px!important; }
.box { background: #1c173b; border: 0px solid #c9c8e9; padding: 10px 15px; border-radius: 15px; margin-bottom: 20px;}
.min150 { min-height: 120px; }
.thumbnail { height: 210px; width: 210px; object-fit: cover; margin: 3px 6px; border-radius: 11px; border: 2px solid transparent;}
.thumb { width: 180px; height: auto; margin: 0 12px 12px 0; border-radius:11px; float:left; }
.upd { height: 250px;  overflow-x: hidden; overflow-y: scroll;  }
.bl150 { width: 150px!important; height: auto; }
.res { display:none; }
.lrg { font-size: 1.2em; }
.current { text-decoration: none; font-style:italic; }
.highlight { display: inline-block;  padding: 10px; background: #1c173b; border-radius: 15px; }
.caption { max-width: 500px; width: 100%; height: auto; border: 1px dashed #c9c8e9; padding: 5px; }
.right { float: right; margin-left: 1em; }
.left { float: left; margin-right: 1em; }
.center { display: block; margin-right: auto; margin-left: auto; text-align: center; } 
.caption { margin-top: 0; font-size: 0.9em; font-style: italic; }
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; }
.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #eee; color: #000; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; }
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #eee transparent transparent transparent; }
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } 
#HCB_comment_box h3, .home-desc, #hcb_msg { display: none; }
#HCB_comment_box { font-family: "Cormorant", serif!important; }
#HCB_comment_box .hcb-comment-body { font-size: 14pt!important; }
#statuscafe { padding: .5em; background-color: transparent; border: 1px dashed #c9c8e9; border-radius:15px; }
#statuscafe-username { margin-bottom: .5em; }
#statuscafe-content { margin: 0 1em 0.5em 1em; }
@media screen and (max-width: 4000px)  and (min-width: 1826px) {  }
@media screen and (max-width: 1825px)  and (min-width: 1405px) {  }
@media screen and (max-width: 1404px)  and (min-width: 1000px) {  }
@media screen and (max-width: 999px) and (min-width: 1px) {
  #content, #sidebar, header { float: none; width:98%; } header { font-size: 44pt; height: 110px; } 
  .main {display:none; } 
  .res { display:block; padding: 10px 0 5px 0; } .res a:hover { background-color: #1c173b; }
  #content {  order: 1; } #sidebar {  order: 2; margin-top:0;  }
  #container { display:flex; flex-direction: column; }
  .caption { max-width: none; width: 100%; height: auto; }
  .thumb { float: none; }
} 
@media only screen and (min-width: 600px) {
  .small { max-width: 60%; height: auto; }
}