/* start light mode styling */
	:root {
		--text:   #56253a  ;
		--accent: #e34262  ;
		--accent2: #707000;
		--accent3:#f38c51 ;
		--link:  #c51422 ;
		--shadow:  hsla(245, 36%, 34%, 0.5);
		--midtone: #ffac7c;
		--light: #fff7e8 ;
		--highlight: #ffc43a80;
		--highlight2: #e18ae480;
		--bg: #395488;
		--content:#fddcc7;
		
			cursor: url("../cursors/normal.cur"), default ! important;
		}
/* end light mode styling */

/*Custom fonts*/
@font-face {
  font-family: 'ViolettaBrigida';
  src: url("../fonts/ViolettaBrigida.otf");
}

@font-face {
  font-family: 'FuturaHandwritten';
  src: url("../fonts/FuturaHandwritten.ttf");
}

@font-face {
  font-family: 'Cause';
  src: url("../fonts/Cause-Regular.ttf");
}

@font-face {
  font-family: 'pixel';
  src: url("../fonts/TEACPSS_.TTF");
}

* { 
	box-sizing: border-box;
	scrollbar-color:  var(--light) transparent;
}
html {
	overscroll-behavior: none;
}
body {
	padding: 10px;
	font-family: 'Cause', sans-serif;
	font-size: 1rem;
	letter-spacing: -0.5px;
	color: var(--text);
	word-spacing: 20%;
	hyphens: auto
}



/*text formating*/
h1, h2, h3, h4, h5, h6, p  {
	text-align: inter-character;
	margin: 5px;
	line-height: 1.2;
}
h1 { 
	font-family:'ViolettaBrigida';
	font-size: 1.8rem;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px dashed var(--accent2);
	padding-bottom: 5px;
}
h2 { 
	font-size: 1.2rem;
	text-transform: uppercase;
	background-color: var(--light);
	font-weight:normal;
	text-align: center;
}
h3 { 
	font-size: 1.1rem;
	color: var(--accent3);
}
h4 { 
	font-size: 1rem;
	padding-left: 12px;
}

h2 + p:first-letter {
	font-family: "violettaBrigida";
	font-size: 160%;
	padding: 2px 0px;
	margin-right: 5px;
	float: left;
}
em{
	background-color: var(--highlight);
}

ul{
	list-style: url(../style/sprout.gif);
	list-style-type: square;
	vertical-align: text-bottom;
	line-height:100%;
	padding-left:32px;
}

.addon{
	font-size:0.9rem;
	color:var(--link);
	line-height: 95%;
}

img { 
	max-width: 100%; 
}

.shadow {
	filter: drop-shadow(5px 3px 3px var(--shadow));
}

.mirror {
	display: inline-block
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.stamp{
	width:88px;
	height:31px;
}
.stamp:hover{
	cursor: url(../cursors/Heart.cur), pointer;	
}

.row {display: flex;}
.column {flex: 50%;}

pre { overflow-x: auto; }

a  {
	color:var(--link);
	text-decoration: underline wavy var(--link) 1px;
}
a:hover, a:focus {
	color:var(--text);
	font-style: italic;
	cursor: url(../cursors/Link.cur), pointer;
}
a:visited {
	color: var(--text);
	text-decoration: underline wavy var(--link);
}


/*block quote*/
blockquote {
	margin-inline-start: 1.5rem;
	margin-inline-end: 0;
	margin-block: 1.5rem;
	padding: 0.4rem 0.8rem;
	border-inline-start: 0.15rem dashed var(--accent);
	color: var(--text);
	font-style: italic;
}

/*flexbox*/
.shelves {
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 10px;
}

.item {
  padding: 10px;
}

/*details*/
details summary {
	padding: 4px;
	margin-inline-start: 1.5rem;
	width: 70%;
	background-color: var(--light);
  	box-shadow: 1px 1px 2px var(--shadow);
	cursor: url(../cursors/Zoom.cur), help;
}

details p {
	margin-inline-start: 1.5rem;
	margin-inline-end: 1.5rem;
	background-color: var(--light);
	padding: 4px;
	box-shadow: 1px 1px 2px var(--shadow);
}

/*custom borders*/
.wildflower{
	padding: 38px;
	border-image: url(../style/wildflower.png);
	image-rendering: pixelated;
	border-image-slice: 35 29 34 29;
	border-image-width: 35px 29px 34px 29px;
	border-image-repeat: round;
	margin: 10px;
}
.lace{
	border-image: url(../style/lace.png);
	image-rendering: pixelated;
	border-image-slice: 26 27 27 26;
	border-image-width: 20px 20px 20px 20px;
	border-image-outset: 15px 15px 15px 15px;
	border-image-repeat: round; 
}
.golden{ /*je ne comprends pas pourquoi ça ne marche pas*/
	padding:30px;
	border-image: url(../style/golden.png);
	border-image-slice: 80 85 90 81;
	border-image-width: 30px 28px 30px 28px;
	border-image-outset: 0px 0px 0px 0px;
	border-image-repeat: round; 
}
.notepaper {
	padding: 12px 2px 10px 18px;
	border-image-slice: 20 11 20 19 fill;
	border-image-width: 20px 11px 20px 19px;
	border-image-repeat: repeat round;
	border-style: solid;
	border-color: transparent;
	image-rendering: pixelated;
	border-image-source: url(../style/notepaper.png)
}
.postit1 {
	border-image-slice: 27 71 73 27 fill;
	border-image-width: 22px 25px 25px 22px;
	border-image-outset: 0px 0px 0px 0px;
	border-image-repeat: stretch stretch; 
	border-image-source: url(../style/post-it-1.png);
}
.postit2 {
	border-image-slice: 27 71 73 27 fill;
	border-image-width: 22px 25px 25px 22px;
	border-image-outset: 0px 0px 0px 0px;
	border-image-repeat: stretch stretch; 
	border-image-source: url(../style/post-it-2.png);
}
.nuage{
	border-image-slice: 7 7 7 7 fill;
	border-image-width: 15px;
	border-image-outset: 0px 0px 0px 0px;
	border-image-repeat: round round;
	padding: 10px;
	border-image-source: url(../style/nuage.png);
	image-rendering: pixelated;
	border-style: solid; 
}
.bubble{
	border-image-slice: 10 11 15 10 fill;
	border-image-width: 20px 20px 20px 20px;
	border-image-outset: 0px 0px 0px 0px;
	border-image-repeat: stretch stretch;
	border-image-source: url(../style/bubble.png);
	margin:5px ;
	padding:10px;
	padding-top:5px;
	image-rendering: pixelated;
	border-style: solid;
}