:root {
}

/* .sidebar-container {
   display: flex;
   position: relative;
   min-width: var(--sidebar-width);
} */

#sidebar {
   /* position: absolute; */
   position: relative;
   display: flex;
   flex-direction: column;
   flex: 1 1 var(--sidebar-width);
   min-width: var(--sidebar-width);
   top: 0;
   left: 0;
   height: 100vh;
   background-color: var(--color-theme-normal);
   padding: 6px 12px;
   box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2) inset;
   /* resize: horizontal;
   overflow-x: auto; */
}

#resize-border {
   flex: 0 0 calc(var(--pixel) * 3);
   content: '';
   position: relative;
   left: 0;
   /* height: 1000%; */
   cursor: ew-resize;
}

#side-top .flex-block {
   margin: 5px 5px 5px 5px;
}

.side-head h1 em {
   font-style: normal;
   font-weight: 600;
}

#sidebar .author {
   align-items: baseline;
}

#sidebar .author .author-description {
   display: inline-block;
}

#sidebar .author span {
   color: #333;
   opacity: 1;
}

#sidebar .author-photo {
   width: 130px;
   height: 130px;
   border-radius: 25%;
   border: 1px solid #aaa;
   display: inline-block;
}

#sidebar ul li:hover .tooltip {
   opacity: 1;
}

#sidebar.active ul li .tooltip {
   display: none;
}

#resize-tooltip {
   width: 0;
}

/* https://freefrontend.com/css-speech-bubbles/ */
/* https://codepen.io/josfabre/pen/EBMWwW */
.bubble {
   position: relative;
   display: inline-block;
   box-shadow: 0 -4px var(--color-theme-accent), 0 -8px var(--color-theme-bold), 4px 0 var(--color-theme-accent), 4px -4px var(--color-theme-bold), 8px 0 var(--color-theme-bold), 0 4px var(--color-theme-accent), 0 8px var(--color-theme-bold), -4px 0 var(--color-theme-accent), -4px 4px var(--color-theme-bold), -8px 0 var(--color-theme-bold), -4px -4px var(--color-theme-bold), 4px 4px var(--color-theme-bold);
   box-sizing: border-box;
}
.bubble::after {
   content: "";
   display: block;
   position: absolute;
   box-sizing: border-box;
}
.bubble.shadow {
   box-shadow: 0 -4px var(--color-theme-accent), 0 -8px var(--color-theme-bold), 4px 0 var(--color-theme-accent), 4px -4px var(--color-theme-bold), 8px 0 var(--color-theme-bold), 0 4px var(--color-theme-accent), 0 8px var(--color-theme-bold), -4px 0 var(--color-theme-accent), -4px 4px var(--color-theme-bold), -8px 0 var(--color-theme-bold), -4px -4px var(--color-theme-bold), 4px 4px var(--color-theme-bold), 4px 12px rgba(0, 0, 0, 0.1), 12px 4px rgba(0, 0, 0, 0.1), 8px 8px rgba(0, 0, 0, 0.1);
}

.bubble.left::after {
   height: 4px;
   width: 4px;
   top: 20px;
   left: -8px;
   background: var(--color-theme-normal);
   box-shadow: -4px -4px var(--color-theme-accent), -4px 0 var(--color-theme-accent), -8px 0 var(--color-theme-accent), 0 -8px var(--color-theme-accent), -4px 4px var(--color-theme-bold), -8px 4px var(--color-theme-bold), -12px 4px var(--color-theme-bold), -16px 4px var(--color-theme-bold), -12px 0 var(--color-theme-bold), -8px -4px var(--color-theme-bold), -4px -8px var(--color-theme-bold), 0 -4px var(--color-theme-accent);
}

/* .bubble.bottom::after {
   height: 4px;
   width: 4px;
   bottom: -8px;
   left: 32px;
   box-shadow: 0 4px var(--color-theme-bold), 0 8px var(--color-theme-bold), 0 12px var(--color-theme-bold), 0 16px var(--color-theme-bold), -4px 12px var(--color-theme-bold), -8px 8px var(--color-theme-bold), -12px 4px var(--color-theme-bold), -4px 4px var(--color-theme-bold), -8px 4px var(--color-theme-accent), -4px 8px var(--color-theme-accent), -4px 0 var(--color-theme-accent), -8px 0 var(--color-theme-accent), -12px 0 var(--color-theme-accent);
} */

.resize-tooltip {
   background-color: var(--color-theme-normal);
   top: 20%;
   padding: 12px;
   text-align: center;
   width: initial;
   min-width: 200px;
   margin-left: 2em;
}