body {
    /* min-width:650px;
    width:650px;
    max-width:100vw; */


    width: clamp(16rem, 90vw, 70rem);
    width: clamp(50rem, 70vw, 60rem);
    /* margin-left: auto;
    margin-right: auto; */
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    margin:40px auto;
    /* padding:0 10px; */
    background-color: #fdf6e3	; 
    
    color: #586e75;
    font-family: monospace;
    font-size:1.5em;
    /* font-size: clamp(2rem, 5vw, 3rem); */
    line-height: 1.4;
}

a{
    color : #cb4b16;
}

a:visited{
    color : #b58900;
}

h1,h2,h3{line-height:1.2}
h3{
    text-align:center;
}

img {
    max-width: 100%;
    height: auto;
}

/* man if you have suggestions to make the icon responsive 
   i'll be very happy ;-; */
.home_icon>img{
    image-rendering: pixelated;
    min-width:10%;
}

li{
    margin:5px;
}
.banner>img{
    image-rendering: pixelated;
    filter: drop-shadow(5px 5px 4px #0005)
}

pre{
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
    background-color: #93a1a1;
    color: #eee8d5;
    border-radius: 5px;
    padding: 10px;
    box-shadow: inset 0 0 20px #00000044;
    width: 100%;
}

footer{
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: stretch;
    align-items: center;
}

.has-text-align-center{
    text-align: center;
}

blockquote{
    background-color: #93a1a1;
    color: #eee8d5;
    border-radius: 5px;
    padding: 10px;
    box-shadow: inset 0 0 20px #00000044;
    /* width: 100%; */
}

/* QUOTES */
.quote_wrapper{
    display:flex;
    flex-direction: column;
    align-items:center;
    width:100%;
}
.quote_image{
    width: 80%;
    margin: 10px auto;
    image-rendering: pixelated;
}

@media (prefers-color-scheme: dark){
    body{color:#ccc;background:black}
    a:link{color:#5bf}a:visited{color:#ccf}
}

/* SCROLLBAR */
body::-webkit-scrollbar-track, #mySidebar::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

body::-webkit-scrollbar, #mySidebar::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb, #mySidebar::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #d4463d;
}

.tag{
    font-size:80%;
}
.tag:link, .tag, .tag:active, .tag:visited{
    color:rgb(92, 160, 206);;
    font-style:italic;
}
.tag:hover{
    color:rgb(28, 90, 119);
    font-style:italic;
}

.article_tag_list{
    display:block;
    margin-left:20px
}