/* basics */
@import "base/font.css";

:root {
    /* --primary:#1f0909; primary color */
   /*  --dim:#444; dimmed color */
    /* --bg:#f3f2ee;  background color */
    /* --bg:#b9c9d0; */
   /*  --title:#1f0909; big color */

   /*avant*/
/*    --primary:#748cab; /* primary color */
  /*  --dim:#3e5c76; /* dimmed co335c67lor */
  /*  --bg:#edede9;  /* background color */
    /* --bg:#b9c9d0; */
  /*  --title:#f0ebd8; /* big color */ 

      --primary:#000000; /* primary color */
    --dim:#212121; /* dimmed co335c67lor */
    --bg:#FFF;  /* background color */
    /* --bg:#b9c9d0; */
    --title:#000; /* big color */
}


html { width: 100%; height: 100%;}
body {
    /* margin:40px auto;   */
    background-color: var(--bg);
    color: var(--primary);                
    font-size: 110%;             /* Smaller type works well for print, not the screen. */
    max-width:1000px;             /* If your text hits the side of the browser, fuck off forever. You ever see a book like that? Yes? What a shitty book. */
    /* font-family: Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;  */
        padding:4vw;
    margin:0 2em 0 2em;
 
}

/* html, body{
    cursor: url("/feuillage/img/cur/mine_t.cur"), auto !important;}
a:hover{
    cursor: url("/feuillage/img/cur/mine_t_hover.cur"), auto !important;} */

::selection {
    background-color: var(--primary);
    color: var(--bg);
  }	

  /* For smarphones */
  /* @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 800px) {
body {padding:4vw;}
} */


h1 {
	font-size: inherit;
	font-style: italic;
    margin-bottom: 30px;
	/* font-weight: bold; */
}

a {
   text-decoration: none; 
   color:var(--dim);       /* No <strike>*/
} 
a {color: var(--dim);} /* unvisited link */
a:link {color: var(--dim); text-decoration: none; }  /* No <strike>*/
a:visited {color: var(--dim);}   /* visited link */
a:hover   {color: var(--dim);}         /* mouse over link */
a:active  {color: var(--dim);}          /* selected link */
pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.dim {color: var(--dim);}

img {
	position: relative;
    max-width: 100vw;
}

blockquote {
	color: var(--dim    );
	font-weight: bold;
}

ul {list-style-type: none;padding-left: 25px;line-height: 1.5em; margin-top: 0px;}
/* ul li:before {
    content: "⁍";
    color: var(--dim);
    padding-right:10px;} */

/* blog title */
#title a, #title a:visited, #title a:hover {color: var(--title)}
#title {float:left;padding:2em;}

/* post title */
.title a, .title a:visited, .title a:hover {color: var(--primary)}

/* Main */
.container {
	max-width: 650px;
	width: 100%;
	position: relative;
	margin: 0 auto 5em auto;
}

  /* For smarphones */
  @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 800px) {
.container {padding-top:6em;padding-bottom: 6em;}
body {        padding:0;
    margin:0;
}
.header {margin:1em 2em 0 2em;}
article p, article a, article h1, article h2, article h3, article h4, article h5, article h6, article audio {margin:0em 1.2em 1.2em 1.2em;}
article p>a, article p>audio, article p>img {margin: 0}
}

/* article */
article {
    margin-top: 4em;
    
}

article p { /* paragraph */
    line-height: 1.5;
    white-space: normal;
    /* white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap; */
    word-wrap: break-word;
}

article p a {text-decoration: underline dotted 1px;} 

article p a:visited, article p a:hover { /* link inside posts */
    color: var(--dim);
    text-decoration: none;
}

.audio, .audio a:visited { /* link with music*/
    color:var(--dim);
	position: relative;
    transition: color 1s;
    transition-timing-function: ease-out;
    display: inline-block;
      /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  hyphens: auto;
}

.audio:hover {
    color:var(--bg);
    
}


.audio::before {
	content: "♭";
	position: absolute;
	top: 80%;
	left: -4%;
	color: var(--dim);
	font-size: 2ch;
	line-height: 1em;
	text-align: center;
	/* text-indent: -25px; */
	/* width: 10%; */
	margin-top: -0.5em;
	/* display: inline-block; */
	transition: top 3s, color 2s;
	transition-timing-function: ease-out;
}

.audio:hover::before {
    top:0;
    color:var(--title);
}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 800px) {
    article p { /* paragraph */
        line-height: 1.5;
        /* white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap; */
        word-wrap: break-word;
        margin-bottom: 1em;
    }
    ul {line-height: 1.5em;}
}


/* footer */
footer {
	width: 100%;
	position: relative;
	margin: 0 auto;
    font-size: 1.7em;}


.soleillune {
    font-size: 1.7em;

}  

.navbottom-right {position: fixed;
    bottom: 0;
    padding:
  10px;
    right: 0;
    z-index: 500;
    font-size: larger;
    font-weight: bold;}

.navbottom-left {text-align: left;
    position: absolute;
    left: 0;
    padding: 2rem;}

details.liste-articles > summary {

        list-style: none;
      }

details.liste-articles > summary::-webkit-details-marker {
        display: none;
      }

      ul.liste-articles {list-style-type: none;padding-left: 25px;line-height: 1.5em;}
      ul.liste-articles li:before {
          display: none;}

.previous {position: absolute;
    right: 0;
    top: 0;
    padding: 2rem;
    display: block;}
.after {position: absolute;
    left: 0;
    top: 0;
    padding: 2rem;
    display: block;}

/* other */
.likebg, .likebg a, .likebg a:visited, .likebg a:hover {color:var(--bg); font-size: small;} /* hidden text */
.date, .date a, .date a:visited, .date a:hover {color:var(--bg); font-size: small;}


::before, ::after {
	box-sizing: border-box;
}

.form-control { /* form */
    color: #111;                
    font-size: 17.6px; 
	color: var(--dim);
	background-color: var(--bg);
	background-image: none;
	border: 0px solid #3d3d3d;
	border-radius: 0px;
    font-family: "Bookman Old Style", serif;
    padding:2px 0;
}

.previous, a.previous, .after, a.after {
    font-size:120%;
    color:var(--title);
}

.next, a.next {
    font-size:150%;
}

hr{
    background-color:var(--dim); 
    opacity: 0.3;
    display: block;
    border: none;
    height: 1px;
    width: 30%;
margin-top: 1em;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
}