/* Basics */

* {
box-sizing:border-box;}

body {
margin:0px;
padding:60px 15px 60px;
background:#100d12;
color:#c9bdc7;
font:10px 'Kosugi Maru', Tahoma, Arial, sans-serif;
line-height:1.45;
letter-spacing:1px;}
    

b {
color:#e99a4e;}

i {
color:#9f7faf;}

a {
color:#c188d7;
text-decoration:none;}

a:hover {
color:#f1a052;
text-decoration:underline;}

img {
max-width:100%;}
  
  
  
/* Scrollbar */

::-webkit-scrollbar {
width:10px;}

::-webkit-scrollbar-thumb {
background:#49354a;
border:2px solid #100d12;
border-radius:2px;}

::-webkit-scrollbar-thumb:hover {
background:#795084;}


/* Wings */
 
.wing-decoration {
position:absolute;
top:160px;
width:350px;
z-index:0;
pointer-events:none;}

.wing-decoration img {
display:block;
width:100%;
opacity:0.35;}

.wing-left {
left:calc(50% - 650px);}

.wing-right {
right:calc(50% - 650px);}

.wing-right img {
transform:scaleX(-1);}


/* Layout */

.container {
position:relative;
z-index:1;
width:100%;
max-width:760px;
margin:auto;
padding:6px;
background:#171219;
border:1px solid #4f354f;
border-radius:6px;}
  
.page-wrap {
max-width:760px;
margin:auto;
filter:
drop-shadow(0 0 3px rgba(120,70,150,0.5))
drop-shadow(0 0 10px rgba(80,45,100,0.3));}
  
.layout {
display:grid;
grid-template-columns:150px minmax(0, 1fr) 165px;
gap:6px;}

.left,
.main,
.right {
min-width:0;}



/* Header + banner */

.header {
display:flex;
align-items:stretch;
min-height:70px;
padding:0px;
background:#0d0c17;
border:1px solid #6e415c;
border-radius:6px;
overflow:hidden;}

.header-text {
flex:1;
padding:10px 12px 9px;
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;}
  
.site-name {
display:flex;
align-items:center;
gap:5px;
color:#f09a43;
font-family:"UnifrakturCook", Georgia, serif;
font-size:25px;
font-style:normal;
letter-spacing:3px;
line-height:1;
text-shadow:2px 2px 0px #17111b;}

.site-name span {
color:#a86cc4;
text-shadow:2px 2px 0px #17111b;}

.site-name img {
vertical-align:middle;
opacity:0.7;
margin-right:5px;}
  
.time {
color:#e99a4e;
margin-right:4px;
font-weight:bold;}

.time-and-date {
margin-top:7px;
width:100%;
max-width:400px;
padding:3px 6px;
background:#050406;
border:1px solid #342438;
border-left:2px solid #795084;
border-radius:3px;
color:#aaa0aa;
font:8px "silkscreen", arial;
letter-spacing:1px;
box-shadow:inset 0px 0px 6px rgba(130,80,150,0.1);}

.header-banner {
position:relative;
width:50%;
min-height:70px;
overflow:hidden;
border-radius:100px 0px 0px 100px;
border-left:2px solid #4c384d;
background:#000 url("https://itinerae.shop/premium/demo/24/banner.gif") center / cover no-repeat;}

.header-banner::before {
content:"";
position:absolute;
inset:0;
background:#000;
opacity:0.35;
border:1px dashed #4c384d;
box-sizing:border-box;}


  
/* Navi */

.nav {
display:flex;
gap:4px;
margin:6px 0px;}

.nav a {
flex:1;
padding:5px 4px;
background:#151117;
border:1px solid #5d3d61;
color:#bfacbd;
font:8px 'press start 2p', arial;
text-align:center;
text-transform:uppercase;
letter-spacing:2px;}

.nav a:hover {
background:#332036;
border-color:#9c623f;
color:#f0a052;
text-decoration:none;}




/* Boxes and titles */

.box {
margin-bottom:6px;
background:#1a151c;
border:1px solid #49354a;}

.title {
display:flex;
align-items:center;
gap:5px;
min-height:22px;
padding:4px 6px;
background:#251929;
border-bottom:1px solid #69445f;
color:#e59a58;
font:bold 10px arial;
letter-spacing:2px;
text-transform:uppercase;}

.title img {
vertical-align:middle;
flex:0 0 auto;
height:12px;}

.content {
padding:7px;}

.content p {
margin:0px 0px 7px;}

.content p:last-child {
margin-bottom:0px;}


/* currently, favorites, credits */

.row {
padding:4px 0px;
border-bottom:1px dotted #463547;}

.row:last-child {
border-bottom:0px;}

.label {
color:#a376b0;
font-weight:bold;}
  
  
  
/* lists */

.mini-list {
margin:0px;
padding:0px;
list-style:none;}

.mini-list li {
padding:3px 0px;
border-bottom:1px dotted #423144;}

.mini-list img {margin-right:3px;}

.mini-list li:last-child {
border-bottom:0px;}


  
  
/* Left Sidebar */
  
.calendar {
width:100%;
font:9px "silkscreen", arial;
letter-spacing:1px;}

.calendar-head {
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:6px;
color:#e99a4e;
text-transform:uppercase;
border:1px solid #333;}

.calendar-head span {
font-family:'silkscreen', Georgia, arial;
font-size:9px;
letter-spacing:0px;}

.calendar-head button {
width:18px;
height:18px;
padding:0px;
border:1px solid #5a3b58;
background:#211722;
color:#a978c2;
font:9px "silkscreen", arial;
cursor:pointer;}

.calendar-head button:hover {
background:#2d1d2c;
color:#e99a4e;}

.calendar-weekdays,
.calendar-days {
display:grid;
grid-template-columns:repeat(7, 1fr);
text-align:center;}

.calendar-weekdays {
margin-bottom:3px;
color:#a978c2;
font-size:7px;
text-transform:uppercase;}

.calendar-days {
row-gap:3px;}

.calendar-days span {
display:flex;
align-items:center;
justify-content:center;
height:15px;
color:#b9adb9;}

.calendar-days span.empty {
color:transparent;}

.calendar-days span.today {
color:#e99a4e;
border-radius:2px;}

.calendar-days span:hover:not(.empty) {
background:#2d1d2c;
color:#e99a4e;}
  




/* Main */

.intro {
padding:8px;
background:#201822;
border:1px solid #513853;
margin-bottom:6px;}

.big-title {
margin:0px 0px 4px;
color:#d18be3;
font-family:"UnifrakturCook", Georgia, arial;
font-size:18px;
letter-spacing:2px;
font-weight:normal;}

.two {
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
margin-top:6px;}

.note {
padding:6px;
background:#151117;
border:1px dashed #4c384d;}
  
  
  
/* Moodboard or recent art */
  
.moodboard {
display:grid;
grid-template-columns:1fr 1fr;
gap:5px;}

.mood-item {
min-width:0;
text-align:center;}

.mood-item img {
display:block;
width:100%;
aspect-ratio:1 / 1;
object-fit:cover;
padding:2px;
background:#0e0b10;
border:1px solid #563e56;
opacity:0.75;}


  
/* Microblog / daily observations */

.micro {
padding:5px 0px;
border-bottom:1px dotted #49364a;}

.micro:last-child {
border-bottom:0px;}

.date {
display:inline-block;
margin-right:4px;
color:#9c6aae;
font-size:9px;}
  
  
  

/* Right sidebar - Colours */

.color-palette {
display:flex;
gap:3px;}

.color-palette span {
flex:1;
height:18px;
border:1px solid #563e56;}  
  
  

/* Updates */

.update-log {
padding:5px 6px;
background:#130f15;
border-left:2px solid #a15bb6;}

.update-log + .update-log {
margin-top:5px;}

.orange {
border-left-color:#d9772b;}


/* Read me / quote / small italic text */

.quote {
padding:7px;
border-left:2px solid #79458b;
color:#a99aa8;
font-family:Georgia, serif;
font-size:11px;
font-style:italic;}


/* Off-site */

.socials a {
display:block;
padding:3px 5px;
background:#221725;
border:1px solid #503652;
font-size:10px;
text-transform:uppercase;
margin-bottom:6px;
text-align:center;}
  
  
  
/* Bottom decorative image */

.grave-divider {
height:80px;
margin-top:8px;
background:url("https://itinerae.shop/premium/demo/24/bottom.png") center bottom / auto 103px repeat-x;}


/* Footer */

.footer {
margin-top:0px;
padding:7px;
border-top:1px dotted #50364f;
color:#766d76;
text-align:center;}


/* Responsiveness */

@media (max-width:650px) {

body {
padding:20px 10px 40px;}
  
.wing-decoration {
display:none;}

.layout {display:flex;
flex-direction:column;}

.main {order:1;}
.left {order:2;}
.right {order:3;}

/* To HIDE the LEFT sidebar on mobile:
   change:
   .left { order:2; }
       to:
   .left { display:none; }

   To HIDE the RIGHT sidebar on mobile:
   change:
   .right { order:3; }
       to:
   .right { display:none; }
*/


.header {
flex-direction:column;}

.header-text {
width:100%;
flex:none;}

.header-banner {
width:100%;
min-height:90px;
height:90px;
border-radius:0px 0px 6px 6px;
border-left:0px;
border-top:1px solid #4c384d;}
  
.nav {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:4px;}

.nav a {width:auto;}

.two {
grid-template-columns:1fr;}
  
}


@media (max-width:420px) {

.site-name {
font-size:20px;}

.header-banner {
min-height:75px;
height:75px;}
}