/*FONTS*/

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
	stroke: #4D163D;
	animation-delay: -1;
}

.text-copy:nth-child(2){
	stroke: #840037;
	animation-delay: -2s;
}

.text-copy:nth-child(3){
	stroke: #BD0034;
	animation-delay: -3s;
}

.text-copy:nth-child(4){
	stroke: #1494d6;
	animation-delay: -4s;
}

.text-copy:nth-child(5){
	stroke: #FDB731;
	animation-delay: -5s;
}

@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}


@font-face {
    font-family : snes;
    src : url(snes.ttf);
}

@font-face{
	font-family: gamecube;
	src : url(gamecube.ttf)
}

@font-face{
    font-family : sfamicom;
    src : url(sfamicom.ttf);
}

@font-face{
    font-family : start;
    src : url(pressstart.ttf);
}

@font-face{
    font-family : si;
    src : url(potra.otf);
}

@font-face{
    font-family : lib;
    src : url(library3am.otf);
}

svg {
    display: block;
    font: 10.5em 'si';
    width: 1060px;
    height: 300px;
    margin: 0 auto;
}

html{
	scroll-behavior: smooth;
}

p{
	font-family : "Arial";
	margin : 20px;
	text-align : center;
}

strong{
	text-decoration : underline;
}

li{
	font-family : "Arial";
	margin : 20px;
	text-align : center;
}

h1{
	font-family : snes;
	text-align : center;
	font-size : 160px;
	color : red;
}

h2{
	font-family : lib;
	text-align : center;
	font-size : 40px;
	text-decoration: underline;
}

h3{
	font-family : snes;
	text-align : center;
	font-size : 35px;
	transition : font-size 500ms;
	block-size : 0px;
	writing-mode: horizontal-tb;
	margin : 30px;
}

h3:hover{
	font-size : 45px;
}

.h3-nomove{
	font-family : snes;
	text-align : center;
	font-size : 40px;
	block-size : 0px;
	writing-mode: horizontal-tb;
	margin : 30px;
}

h4{
	font-family : start;
	text-align : center;
	font-size : 20px;
}

table{
	margin-left : auto;
	margin-right : auto;
}

button{
	margin-left : 5px;
	margin-right : 5 px;
}

i{
	font-family : "Arial";
	font-size : 15px;
}

.ktitle{

}

.quiz{
	display : flex;
	justify-content: center;
}

.quiz_arriere{
	width: fit-content;
	margin: auto;
}

.quiz_image{
	height : 250px;
}

.image_presentation{
	height : 400px;
}

.perso_presentation{
	height : 320px;
}

.border{
	border: 1px solid pink;
}

.arriere_presentation{
	background-color : #FFFDD0;
}

.jeux_boite{
	width : 150px;
}

.tete{
	/*position : fixed;*/
	border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
	right : 5%;
	top : 0px;
	background-color : #1494d6; /*bleu si*/
}

.download_section{
  text-align: center;
  background-color: #1494d6;
  block-size : 120px;
	margin : 100px;
  border: 2px solid;
  line-height: 15px;
  vertical-align: middle;
}

.tete2{
  position : fixed;
  top : 0;
  z-index : 21;
  left : 0;
  box-sizing: border-box;
  display : flex;
  text-align: center;
  height : 64px;
  background-color: #1494d6;
  display: flex;
  width: 100%;
  margin-top: 0px;
  transition: margin-top 100ms;
}



.HighButton{
  height: 10px;
  border-radius: 5px;
  position: absolute;
  left:-50%;
  top: -50%;
}

.Rognage{
  position: relative;
  width: 180px;
  height: 120px;
  overflow: hidden;
  border: 1px green solid;
}

.Barre_presentation{
  font-family: gamecube;
  margin-top: 18px;
  font-size: 20px;
  transition : margin-left 500ms;
  cursor: pointer;
  position: fixed;
}

/*
#NavMenu > span{
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 9999px;
  background-color: black;
}

#NavMenu > span:not(:last-child){
  margin-bottom: 7px;
}

#NavMenu, #NavMenu > span{
  transition: all .4s ease-in-out;
}

#NavMenu.active{
  transition-delay: 0.8s;
  transition: rotate(45deg);
}

#NavMenu.active > span:nth-child(2){
  width: 0;
}

#NavMenu.active > span.nth-child(1),
#NavMenu.active > span.nth-child(3){
  transition-delay: .4s;
}

#NavMenu.active > span.nth-child(1){
  transform: translateY(9px);
}

#NavMenu.active > span.nth-child(3){
  transform: translateY(-9px) rotate(90deg);
}
*/

/* The side navigation menu */
.sidenav {
 height: 100%; /* 100% Full-height */
 width: 0; /* 0 width - change this with JavaScript */
 position: fixed; /* Stay in place */
 z-index: 1; /* Stay on top */
 top: 0; /* Stay at the top */
 left: 0;
 background-color: #222222; /* Noir SI*/
 opacity: 80%;
 overflow-x: hidden; /* Disable horizontal scroll */
 padding-top: 60px; /* Place content 60px from the top */
 transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 25px;
 color: #FFFFFF;
 opacity: 100%;
 display: block;
 transition: 0.3s;
 font-family: snes;
 transition: font-size 500ms;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
 color: #f1f1f1;
 opacity: 1;
 font-size: 30px;
 text-decoration: underline;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
 position: absolute;
 top: 0;
 right: 25px;
 font-size: 36px;
 margin-left: 50px;
}

.MenuButton{
  margin-left: 16px;
  margin-top: 16px;
  font-size: 32px;
  transition : margin-left 500ms;
  cursor: pointer;
}

.MenuButton:hover{
  margin-left: 10px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
 transition: margin-left .5s;
 padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
 .sidenav {padding-top: 15px;}
 .sidenav a {font-size: 18px;}
}

.pied{
	position : fixed;
	right : 1%;
	bottom : 3%;
	background-color : #FFFDD0;
	font-family : "Arial";
	margin : 20px;
	text-align : center;
}

.coins_ronds{
	border-radius : 10px;
}

.centrer{
	text-align : center;
}