/* VARIABLES */

:root {
  --noir:#2e440b;
  --primaire:#ab500d;
  --fond:#e8e8e8;
  --flash:rgb(247 176 142);
}

*:focus {
  outline: none;
}

::selection {
  background-color: var(--noir);
  color:var(--fond);
}

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

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

.fool{font-family:'fool';}
.magician{font-family:'magician';}
.priestess{font-family:'priestess';}
.empress{font-family:'empress';}
.emperor{font-family:'hermit';}
.hierophant{font-family:'hierophant';}
.lover{font-family:'lover';}
.chariot{font-family:'chariot';}
.strength{font-family:'strength';}
.hermit{font-family:'hermit';}
.fortune{font-family:'fortune';}
.justice{font-family:'justice';}
.hangedman{font-family:'hangedman';}
.death{font-family:'death';}
.temperance{font-family:'temperance';}
.devil{font-family:'devil';}
.tower{font-family:'tower';}
.star{font-family:'star';}
.moon{font-family:'moon';}
.sun{font-family:'sun';}
.judgment{font-family:'judgment';}
.world{font-family:'world';}

@font-face {
  font-family: 'Syne';
  src: url('fonts/syne/Syne-Bold.otf');
}
@font-face {
  font-family: 'Fragen';
  src: url('fonts/syne/Fragen-Light.woff');
}
@font-face {
  font-family: 'Fragen';
  font-style: italic;
  src: url('fonts/syne/Fragen-LightItalic.woff');
}
@font-face {
  font-family: 'Michaux';
  src: url('fonts/syne/Michaux-Bold.otf');
}

/* BASE */
html{
  font-size: calc(4vw + 4vh + 2vmin);
  overflow-x: hidden;
  line-height: .25rem;
}
body{
  color:var(--noir);
  background: var(--fond);
  padding:0;
  margin:0;
  width: 100vw;
  font-size: .13rem;
}
a{
  text-decoration: none;
  color: var(--primaire);
  transition: .5s color;
  cursor: pointer;
}
a:hover{
  color: var(--noir);
}
.moytext{
  font-size: 8vw;
  line-height: 1em;
  text-align: center;
}
.sy{
  font-family: "Syne";
  text-transform: uppercase;
  letter-spacing: .01rem;
  font-size: .085rem;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}
.deb{
  margin-top: 100vh;
}

/* MENU */
.menu{
  position: fixed;
  color: var(--noir);
  z-index: 999;
  writing-mode: vertical-rl;
  text-orientation: upright;
  border-radius: 10em;
  padding: 1.2em 0em 1.2em 0em;
  text-transform: uppercase;
  line-height: 1em;
  letter-spacing: -.2em;
}
.menug{
  bottom:.2rem;
  left:.2rem;
  text-align: right;
}
.boutmenu{
  position: fixed;
  z-index: 999;
  left:.15rem;
  top:2rem;
  writing-mode: vertical-rl;
text-orientation: upright;
}
.menug a:nth-child(1){margin-bottom: 0rem;}
.menug a:nth-child(3){margin-bottom: .15rem;}
.menug a:nth-child(5){margin-bottom: 0rem;}
.menug a:nth-child(6){margin-bottom: .3rem;}
.menug a:nth-child(7){margin-bottom: .2rem;}
.menug a:nth-child(8){margin-bottom: .3rem;}
.menug a:nth-child(9){margin-bottom: .2rem;}
.menug a:nth-child(10){margin-bottom: .4rem;}
/*
.menug a:nth-child(1){background:green;}
.menug a:nth-child(3){background:red;}
.menug a:nth-child(5){background:yellow;}
.menug a:nth-child(6){background:black;}
.menug a:nth-child(7){background:pink;}
.menug a:nth-child(8){background:blue;}
.menug a:nth-child(9){background:grey;}
.menug a:nth-child(10){background:black;} */


.downloadtop{
  position: absolute;
  width: 80vw;
  text-align: center;
  margin-left: 10vw;
  bottom:.5rem;
  line-height: .13rem;
  animation: float 6s ease-in-out infinite;
}
.emoji{
  line-height: .2rem;
}
.downloadtop h1{
  margin:.21rem .2rem .35rem .2rem;
  font-size: .6rem;
  font-weight: normal;
}
.grn{
  font-family: "Michaux";
  letter-spacing: .01rem;
  font-size: .15rem;
  text-transform: lowercase;
  color: var(--noir);
}

/* MENU WHITE */

.whiteletter{
  position: absolute;
  margin-top: -1em;
  display: inline-block;
  transition: .3s opacity, .3s transform;
  font-size: .6em;
  font-family: "Syne";
  font-weight: bolder;
  opacity: 0;
}
.menug .whiteletter0.whiteletteropen{
  opacity: 1 !important;
  transform: translateY(-15em);
}
.menug .whiteletter1.whiteletteropen{
  opacity: 1 !important;
  transform: translateY(-15em);
}
.menug .whiteletter2.whiteletteropen{
  opacity: 1 !important;
  transform: translateY(-15em);
}
.menug .whiteletter3.whiteletteropen{
  opacity: 1 !important;
  transform: translateY(-15em);
}
.whiteletter:nth-child(0){transition: .2s opacity, .2s transform;}
.whiteletter:nth-child(1){transition: .3s opacity, .3s transform;}
.whiteletter:nth-child(2){transition: .4s opacity, .4s transform;}
.whiteletter:nth-child(3){transition: .5s opacity, .5s transform;}
.whiteletter:nth-child(4){transition: .6s opacity, .6s transform;}
.whiteletter:nth-child(5){transition: .7s opacity, .7s transform;}
.whiteletter:nth-child(6){transition: .8s opacity, .8s transform;}
.whiteletter:nth-child(7){transition: .9s opacity, .9s transform;}
.whiteletter:nth-child(8){transition: 1s opacity, 1s transform;}

/* IMAGES */

.illustrations img{
  width:90%;
  margin-left: 5%;
  margin-top: 1em;
  margin-bottom: 1em;
  animation: float 6s ease-in-out infinite;
}

.illustrations img:nth-child(1){
  position: absolute;
  animation: float 7s ease-in-out infinite;
}

.explication img{
  width: 90%;
  margin-left: 5%;
  margin-top: 1em;
}

blockquote{
  font-size: .12rem;
  font-family: "Hermit";
  font-weight: normal;
  text-align: center;
  margin-top: -.2rem;
}
blockquote:hover{
  font-family: "Fragen";
}
.marg3{
  margin-top: 1rem;
}

/* QUOTES */
.quote{
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.quotesans{
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 0rem;
}

/* CLAVIER */
.clavier{
  text-align: center;
}

/* PARAGRAPHES */
p{
  font-family: "Fragen";
  font-size:.17rem;
  margin: .18rem auto .18rem auto;
  width:55%;
  line-height: 1.4em;
  hyphens : auto;
}

/* JESTERSHOW */
#Jestershow{
  display: block;
  text-align: center;
}
.jesterdecli{
  display: inline-block;
  font-size: 1.8rem;
  line-height: 2.2rem;
  text-align: center;
  overflow:hidden;
  height: 2.3rem;
  width: 90vw;
}
.nomfont{
  margin-bottom: 2.5em;
  color: var(--primaire);
}
.nomfont .sy{
  position: relative;
  bottom:.7em;
}

/* RHIZOMES */
.magicksigil{
  position: absolute;
  font-size: .15rem;
  transition: .5s transform;
}
.amen{
  transition: .3s color, .3s background-color;
}
.rouge{
  color:var(--flash);
}
.rougeback{
  color:var(--flash);
  background:var(--primaire);
}



/* Small devices (landscape phones, 576px and up) */


/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
body{
}
}

@media (max-width: 576px) {
body{
font-size: .23rem;
}
p{
  font-size:.37rem;
  line-height: 1.4em;
  width:80%;
  margin: 1em auto 1em auto;
}
.sy{
  letter-spacing: .01rem;
  font-size: .2rem;
}
.downloadtop{
  bottom:.5rem;
  line-height: .33rem;
}
.downloadtop h1{
  margin:.47rem .2rem .75rem .2rem;
  font-size: 1.5rem;
  font-weight: normal;
}
.grn{
  font-size: .25rem;
}
.menug .sy{
  font-size: 1.5em;
}
.menug a{
  font-size: 2em;
  display: none;
}
.menug a{
  background: var(--fond);
}
.menug{
  line-height: 2em;
  bottom:1.5rem;
}
.boutmenu{
  font-size: 1.5em;
  bottom:.5rem;
  left:.25rem;
  top:inherit;
}
.explication img{
  width: 100%;
  margin-left: 0;
  margin-top: 1em;
}

blockquote{
  font-size: .22rem;
  margin-top: -.2rem;
  font-family: "Syne";
}

.illustrations img {
    width: 100%;
    margin-left: 0%;
}
.magicksigil{
  font-size: .25rem;
}
}