@import url(https://db.onlinewebfonts.com/c/dd361acac015930c5ced8f1135068f23?family=LyonText-Regular);
@import url(https://db.onlinewebfonts.com/c/c8c3786ba00502c201b1235679960c80?family=LyonText-RegularItalic);
@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300..700&display=swap');

:root{
--body-lg:clamp(16px, 0.75rem + 1vw, 1.25rem);
--body-md:clamp(12px, 0.75rem + 1vw, 1rem);
--body-sm:clamp(8px, 0.75rem + 1vw, 0.75rem);

--sidebar-width:clamp(20%, 245px, calc((100% / 12) * 3));
--sidebar-strip-width: 1.5rem;
--sidebar-divider-width: 3px;

--font-sans: 'Arial', Helvetica, sans-serif;
--font-block: 'Arial Black', Arial, Helvetica, sans-serif;
--font-serif:  "LyonText-Regular", serif;
--font-italic: "LyonText-RegularItalic", serif;
--font-mono: "Overpass Mono", monospace;

--color-black: #1b1b1b;
--color-gray-dark: #4B4949;
--color-gray-light: #ADADAD;
--color-blue-dark: hsl(221 91% 32%);
--color-blue-light: hsl(221 91% 50%);

--color-heading: hsl(222deg 52% 7%);
--color-text: var(--color-black);
--color-link: var(--color-blue-light);
--color-link-hover: var(--color-heading);
--color-link-background: transparent;
--color-link-background-hover: #e5ff34;

--spacing-tight: -0.05em;
--spacing-loose: 0.05em;

}
::-webkit-scrollbar{
width: 0;
}
::-webkit-scrollbar-thumb{
background-color: transparent;
border:0px solid transparent;
max-height: 0px;
}

::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 0 transparent;
background-color:transparent;
}

html,body {
width: 100%;
height: 100%;
-webkit-tap-highlight-color: transparent;
margin: 0;
padding: 0;
text-align: left;
color:var(--color-text);
font-variant-numeric: lining-nums;
}

body {
background: url(../img/bg-body.jpg) repeat;
background-color: #fafafa;
background-size:100%;
font-size: var(--body-md);
font-family: var(--font-serif);
font-weight: 400;
line-height: 1.3em;
text-balance: pretty;
}

body:before{
content:'';
background: url(../img/bg-sidebar.png) repeat-y;
background-size: var(--sidebar-strip-width);
background-position: top left;
position: fixed;
width: var(--sidebar-strip-width);
height: 100%;
}

main{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
grid-template-rows: auto;
gap:var(--sidebar-strip-width);
width: calc(100% - (var(--sidebar-strip-width) * 2));
margin-left: var(--sidebar-strip-width);
}

main section {
width: calc(100% - (var(--sidebar-strip-width) * 1));
margin: 0;
padding: var(--sidebar-strip-width);
border-bottom: .5px solid var(--color-gray-light);
}

section:after{
content: '';
width: calc(var(--sidebar-strip-width) + var(--sidebar-divider-width));
height: 100%;
background: url(../img/bg-sidebar-after.jpg) repeat-y;
background-position: top left;
position: fixed;
flex: 1 auto;
margin-left: calc(var(--sidebar-strip-width) * -1);
}

@media (max-width:600px){
aside {
background: #fff;
}
aside aside-divider{
display: none;
}
}


section {
display: flex;
flex-flow: column;
gap: .75rem;
}

ul, ul li{
list-style: none;
padding: 0;
margin:0;
}

section.no-gap{
row-gap: unset;
}

section[title]:before {
content: attr(title) "";
display: block;
font-size: var(--body-lg);
font-family: var(--font-block);
font-weight: bold;
letter-spacing: var(--spacing-tight);
text-decoration: none;
text-transform: uppercase;
color: var(--color-heading);
}


a, a:visited {
font-family: var(--font-serif);
background: var(--color-link-background);
text-decoration: none;
color: var(--color-link);
transition: all .25s ease;
}

a:hover {
background: var(--color-link-background-hover);
color: var(--color-link-hover);
text-decoration: none;
cursor: crosshair;
}

img a, img a:hover, img a:visited,  a:has(img),  a:has(img):hover,  a:has(img):visited{
background: transparent;
transition: background-image .25s ease;
}

nav{
display: flex;
flex-flow:column;
}
nav a{
display: flex;
align-items: center;
gap:0.25em;
letter-spacing: var(--spacing-loose);
font-weight: 500;
max-width: fit-content;
}
nav a:after{
content:'';
display: flex;
width: 1em;
height: 1em;
background: transparent;
}
nav a:hover:after{
background:url('../img/star.png') no-repeat;
background-size: contain;
}


h1,h2,h3,h4,h5,h6{
color: var(--color-heading);
margin: unset;
padding: unset;
}

h1{
font-family: var(--font-block);
font-weight: bold;
text-transform: uppercase;
letter-spacing: var(--spacing-tight);
font-size: var(--body-lg);
}

p{
padding: unset;
margin: unset;
}

i, em{
font-style:var(--font-italic);
}

ul, ol, li{
padding: unset;
margin: unset;
}

hr{
outline: 1px dashed #333;
mix-blend-mode: color-burn;
border-width: 0;
margin-inline: 0;
}

.hidden{
display: none;
}


/** widgets**/

span.mood {
display: flex;
gap: 0.33em;
align-items: center;
}


listings-container{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
grid-template-rows: auto;
gap: 0 0.33em;
align-content: start;
}

listings-container img{
width: 100%;
}


[stats] ul li{
font-weight: bold;
font-size: var(--body-sm);
font-family: var(--font-mono);
color: var(--color-heading);
padding-inline: 0.25em;
text-transform: uppercase;
}


.webring{
display: flex;
flex-flow: column;
gap:0.25em;
margin-inline: calc(var(--sidebar-strip-width) * -1);
}

.webring li{
display: flex;
align-items: center;
justify-content: space-between;
gap:1ch;
border-bottom: 1px dashed var(--color-gray-light);
padding-inline: calc(var(--sidebar-strip-width) * 1);
}

.webring li:not(:last-child){
padding-bottom:0.25em
}
.webring li:is(:last-child){
border-bottom: unset;
}

.webring li a{
color: var(--color-heading);
font-size: var(--body-sm);
font-family: var(--font-serif);
text-transform: uppercase;
line-height: 1;
}

.webring li div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.25em;
}

.webring li div a{
font-family: var(--font-mono);
font-weight: 500;
color:var(--color-link);
}
.webring li div a:hover{
color:var(--color-heading);
}

.copyright{
font-size: var(--body-sm);
font-weight: 500;
margin-top: 0.5em;
text-transform: uppercase;
letter-spacing: var(--spacing-loose);
opacity: .75;
}

lastfm-widget, listings-container, #posts .itemContent{
height: 100%;
overflow-y: scroll;
}

h1 img{
width: 1em;
}