/***** Fonts *****/
@import url(fonts/fonts.css);

/* -----------------------------------------------
    MISE EN PAGE GLOBALE
-------------------------------------------------- */
/* affichage des steps */
.step {
    position: relative;
    width: 1300px;
    height: 730px;
    padding: 0px;
    margin: auto;
    margin-top : 0px;

    box-sizing: border-box;

    color: rgb(0, 0, 0);
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
    font-family: 'Open Sans', Arial, sans-serif;
    font-family: Purisa;
/*    font-family: Andika;*/
    font-size: 30px;
    letter-spacing: -1px;
    line-height: 1;

    opacity: 0.3;

    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}

/* affichage du step en type "slide" (fond blanc genre diapositive) */
.slide {
    display: block;

    width: 1300px;
    height: 730px;
    padding: 10px 10px;

    background-color: white;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);

    color: rgb(0, 0, 0);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
}

/* Specific styles for: .title class steps */
.title h1,
.title h2,
.title h3 {
    position: absolute;
    left: 45px; /* slide width is 900px, so this is like a 5% margin on both sides */
    width: 90%;
    text-align: center;    
}
.title h1 { top: 50px; }
.title h2 { top: 400px; }
.title h3 { top: 500px; }

.warning
{
	width: 75%;
	margin: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #ff8;
	padding: 1px;
	border-radius: 10px;
/*	border-width: 2px;*/
	border-style: outset;
	border-color: black;
}

html	{	font-size: 120%;
			text-shadow: 12px 12px 2px rgba(0, 0, 0, .5);
}
		
body {
    text-align: center;
    font-family: Purisa;
	background-image: linear-gradient(to bottom right, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.9) 100%), url("background.gif");
    background-repeat: no-repeat;
	background-size: cover;
    /* background: #ced8db; */
}

hr {
	margin-bottom: 1em;
	border: 0px;
	height: 1px;
	background-image: linear-gradient( to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0) );
}

h1 { font-size: 36px; font-size: 3.6rem; }
h2 { font-size: 32px; font-size: 3.2rem; }
h3 { font-size: 28px; font-size: 2.8rem; }
h4 { font-size: 24px; font-size: 2.4rem; }
h5 { font-size: 18px; font-size: 1.8rem; }
h6 { font-size: 14px; font-size: 1.4rem; }
h1, h2, h3, h4 {
    font-family: OpenDyslexic;
    font-weight: normal;
    margin-top: 0.7em;
    margin-bottom: 0.5em;
    text-align: center;
}

h4, h5, h6 {
    font-weight: normal;
   	margin: 2em; 
    margin-top: 0.5em;
    margin-bottom: 0.3em;
    text-align: left;
}

h1 { text-shadow: 20px 20px 10px rgba(0, 0, 0, .4); }
h3 { text-shadow: 10px 10px 5px rgba(0, 0, 0, .4); }
h4 { text-shadow: 5px 5px 5px rgba(0, 0, 0, .4); }

p {
	font-size: 14px; font-size: 1.4rem;
    font-weight: normal;
	margin: 0.7em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

ul li {
	width: 100%;
	margin: auto;
	list-style: none;
}

ul li:before {
    color: red;
    content: '✅ ';
	content: '✔️ ';
	content: '🌐 ';
	content: '☑️ ';
	content: '✔️ ';
    content: '⚛ ';
    font-size: 1em;
    font-weight: normal;
    list-style-position: inside;
}

ul {
	margin: auto;
}

li {
	font-size: 14px; font-size: 1.4rem;
    font-weight: normal;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    padding-left: 2.4em;
    line-height: 1.8em;
    text-align: left;
	margin: 0.2em;
}

.task-list .task-list-item {
	list-style: none;
}

.task-list .task-list-item:before {
	content: none;
}

/* Double-sized Checkboxes */
input[type=checkbox]
{
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
}

pre {
	border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 10px;
    margin-left: 4em;
    margin-right: 4em;
    text-align: left;
}
pre, code { font-size: 14px; font-size: 1.4rem; }

/* Highlight.js used for coloring pre > code blocks. */
pre > code {
    font-size: 14px;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
/* Inline code, no Highlight.js */
code {
	font-family: "Cutive mono","Courier New", monospace;
	font-family: Andika;
}

a {
    color: inherit;
    text-decoration: none;
    padding: 0 0.1em;
    text-shadow: -1px 1px 2px rgba(100,100,100,0.9);
    border-radius: 0.2em;
    transition: 0.5s;
}

a:hover, a:focus { text-shadow: -1px 1px 2px rgba(100,100,100,0.5); }

blockquote {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: 400;    
}

em { text-shadow: 2px 2px 2px rgba(0, 0, 0, .3); }

strong { text-shadow: -1px 1px 2px rgba(100,100,100,0.5); }

q {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: 400;    
    text-shadow: 0 2px 2px rgba(0, 0, 0, .3);
}

strike { opacity: 0.7; }

/* affichage des images et vidéos */
.figure { text-align: center; }
.figure > img {
    max-width: 100%;
    height: auto;
}
.figure > video {
    max-width: 90%;
    height: auto;
}
.graph {
    display: block;
    margin: auto;
    width: 90%;
}