@font-face {
  font-family: "Tektur";
  src: url();
  src: url('font/Tektur_Condensed-Medium.ttf') format('truetype');
}


@font-face {
  font-family: "Masaaki";
  src: url();
  src: url('font/masaaki.otf') format('opentype');
}

/*   --pad:10px;
  --bg:#bb0000;
  --dc:#0000AA;
  --tx:#84eab3;
  --hd:#5500bb;
  --bw:4px; */

/*
cheveux: #A3917C, #76634C

peau: #FFD194, #FFB24B

tshirt: #33DA86

sweat: #8fa4d3 #707190


*/


:root{
  --pad:10px;
  --bg:#cb5b83; /* red carmin*/
  --dc:#8fa4d3; /* periwinkle */
  --tx:#fee8d0; /* beige */
  --hd:#bc9c6b; /* olive*/
  --ex1:#69a7e4; /* blue */
  --ex2:#fdf9f8; /* white */
  --ex3:#7e6a51; /* brown */
  --ex4:#a7ddf5; /* cyan */
  --ex5:#fcf775; /* yellow */
  --ex6:#707190; /* grey blue*/
  --ex7:#682f58; /* dark carmin */
  --ex8:#c5a39c; /* shadow white*/
  --ex9:#5a739b; /*dark blue*/
  --ex10:#000000;
  --bw:4px;
}

.light-theme{
	--banner: url("img/banner1.png");
	--doc: url("img/mainbg.png");
	--coldc: var(--dc);
	--body: url("img/bg.png");
	--text: var(--ex10);
	--shadow: var(--ex4);
	--hlink: var(--bg)
}

.dark-theme{
	--banner: url("img/banner1d.png");
	--doc: url("img/mainbgd.png");
	--coldc: var(--dc);
	--body: url("img/bgd.png");
	--text: var(--ex2);
	--shadow: var(--ex10);
	--hlink: var(--bg)
}

p, h1, h2{
  color: var(--text);
  font-family: "Tektur";
  text-shadow: 2px 2px var(--shadow);
  text-align: center;
  letter-spacing:0px;
  }
 
h1 {
	font-size: 50px;
	
}
 
h2 {
	font-size: 30px;
	
}
p {
  font-size: 20px;
	
}

a{
	color: var(--text);
	text-shadow: 2px 2px var(--hlink);
	
	
}
  
.all {
  width: 80%;
  height: auto;
  margin-bottom: 42px;
  display: flex;
  flex-direction: column;
}

.header {
  width: auto;
  height: 200px;
  background-image: var(--banner);
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;
  background-size: cover;
  /*background-image: var(--banner-background-image);
  
  background-size: cover;
  background-position: center;
  image-rendering: optimizeQuality;
  align-content: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;*/
  background-color: var(--ex1);
  border-radius: 10px;
  border: solid var(--ex9);
  align-content: center;
}

.main {
	display: flex;
	flex-direction: row;
}

.doc {
  margin: 10px;
  padding: 10px;
  /*min-width: 300px;
  min-height: 20px;*/
  position: relative;
  border: solid var(--ex6);
  background-color: var(--coldc);
  background-image: var(--doc);
  }

.left {
  display:flex;
  flex-direction:column;
  width:40%;
}

.middle {
  display:flex;
  flex-direction:column;
  width: 100%;
}

.right {
  display:flex;
  flex-direction:column;
  width: 40%;
}

body {
  background-color: var(--bg);
  background-image: var(--body);
  }

.btn {
	background-image: url(img/theme.png);
	width:48px;
	height:48px;
	
}