html {
  scroll-behavior: smooth;
}

* {
  font-family:"creepsterregular" ;
  
}
header, main, footer {
  margin: 20px auto 0 auto;
  max-width: 1200px;
}
header section {
  display: flex;
  gap: 8px;
  /*
  padding: 8px;
  background-color: #ffffff;
	border-radius: 30px;
  */
}
#small-menu {
  display: none;
  margin-right: 20px;
  font-size: 2rem;
}
#small-menu:hover {
  cursor: pointer;
}

#small-menu i {
  color: #7FFF00;
}
#small-menu i.active {
  color: white;
}

   #infos .smart-march {display: none;}

.fonbd {
  margin: 0;
  background-color: #ffffff;
	border-radius: 30px;
}
body {
  padding: 0;
  margin: 0;
  background: linear-gradient(black, #273943);
  background-image: url('../img/granit6.jpg');
}

footer {
  height: 140px;
  padding: 10px 0;
  background-image: url("../img/cover3_1200.webp");
  text-align: center;
  border-radius: 30px;
  border: solid 8px white;
  
}

section {
  padding: 8px;
  max-width: 100%;
}
nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  /*
  background-color: #ffffff;
   border-radius: 50px;
   */
}
.twat {
  position: relative;
  max-width: 400px;
  max-height: 400px;
  width: 36%;
  height: auto;
	background-image: url('../img/twat_400.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	border-radius: 30px;
  border: solid 8px black;
}
.nav .twat img {
  position: relative;
  top: 100px;
}

.nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 8px;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/*
.col-1,
.col-2,
.col-3{
  height:100%;
}
*/


.col-1{width:22%;}
.col-2{width:21.5%}
.col-3{width:19%}

/*
.nav-button a {
  position: relative;
}
*/
.nav-button > a, .twat > a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.nav-button {
  border-radius: 20px;
  border: solid 10px black;
  position: relative;
  display: flex;
  overflow: hidden;
}

img[class^="nav-button-img"] {
  width: 100%;
  height: auto;
}
/*
.nav-button-img-infos {
  width: 200px;
}
img.nav-button-img-tour {
  width: 130px;
}
.nav-button-img-merch {
  width: 200px;
}
.nav-button-img-contact {
  width: 200px;
}
.nav-button-img-medias {
  width: 200px;
}
*/

.nav-button-text-infos {
  position: absolute;
  left: 50px;
  bottom: 10px;
  display: flex;
  justify-content: center;
  text-align: center;
  color: white;
  font-weight: 900;
  font-size: 2rem;
}

.nav-button-text-tour {
  position: absolute;
  left: calc(50% - 3rem);
  bottom: 5px;
  display: flex;
  justify-content: center;
  text-align: center;
  color: white;
  font-weight: 900;
  font-size: 3rem;
}
.nav-button-text-medias {
  position: absolute;
  right: 5px;
  top: 10px;
  display: flex;
  justify-content: center;
  text-align: center;
  color: white;
  font-weight: 900;
  font-size: 2rem;
}
.nav-button-text-merch {
  position: absolute;
  left: calc(50% - 40px);
  bottom: calc(50% - 30px);
  display: flex;
  justify-content: center;
  text-align: center;
  color: white;
  font-weight: 900;
  font-size: 2rem;
}
.nav-button-text-contact {
  position: absolute;
  right: 10px;
  top: 5px;
  display: flex;
  justify-content: center;
  text-align: center;
  color: white;
  font-weight: 900;
  font-size: 2rem;
}
.nav-button-link {
  position: absolute;
  left: 80%;
  top: 0;
  width: 1.3rem;
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(53deg) brightness(108%) contrast(107%);
}

.nav-button:hover {
  border-color: #7FFF00;
}
.nav-button:hover .nav-button-text {
  color: #7FFF00;
}
.nav-button:hover .nav-button-link {
  filter: invert(76%) sepia(78%) saturate(1308%) hue-rotate(37deg) brightness(103%) contrast(111%);
}

#fixed-menu {
  position: fixed;
  align-items: center;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000;
  z-index: 3;
  padding: 0;
  max-width: 100%;
  height: 80px;
}

#fixed-menu .twat {
  position: absolute;
  left: 20px;
  height: 100px;
  width: 150px;
  background-image: none;
  border-radius: 30px;
  border: none;
}
#fixed-menu .nav {
  margin-left: auto;
  margin-right: 50px;
  display: flex;
  padding: 0 10px;
  gap: 30px;
  font-size: 1.5rem;
}
#fixed-menu .nav a:hover {
  color: white;
}


img {
  width: 100%;
}
div {
	text-align: center;
}
p {
  color: #ffffff;
  font-size: 1.1rem;
  /*font-family:"Comic Sans Ms";*/
}
figure {
  margin: 0;
}
.tour {
  display: flex;
  padding: 10px;
  justify-content: space-evenly;
  align-items: center;
}
.date {
  padding: 80px ;
}
.march {
 width: 300px;
}
.smart-march{
padding: 8px 0px;
}
.march2 {
 background-color: black;
 	border: 8px solid;
	border-color: black;
  box-sizing: border-box;
   border-radius: 30px;


 
}
a:hover, a:active { 
 	 color: #777;
	 text-decoration:none;
}
a, a:link, a:visited {
	color: #7FFF00;
	text-decoration:none;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	color: #7FFF00;
	text-decoration:none;
}
h2 {
  text-align: center;
}
.aligndroite {
	text-align:right;
}
.vert {
	color: #7FFF00;
}
.noir {
	color: #000000;
}
.blanc {
	color: #ffffff;

}
.red {
	color: #FF0080;

}
.fondnoir {
  background-color: #000000;
  background-image: url("../img/paper2.jpg");
  background-position: center;
background-size: 230%;
}

.bordure {
	border: 8px solid;
	border-color: black;
  box-sizing: border-box;
}

.bordure1 {
  border-radius: 30px;
}
	
.bordure2 {
	border-radius: 10% 30% 50px 80px;
}
	
.bordure3 	{
  border-radius: 30px;
  border-color: white;
}

.bio {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  position: relative; 
  align-items: center;
  justify-content: center;
}

.photo {
  width: 700px;
  height: auto;
}
.biogra {
  width: 500px;
  height: auto;
}

#infos .infos-smartphone {
  display: none;
}

.intra-bd {
  padding: 30px;
}
.inter-bd {
  padding: 20px;
  background-color: white;
  border-radius: 30px;
  border: solid 8px white;
}
.album {
  padding: 10px;
     background-color: white;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
	 gap: 20px;
  border-radius: 30px;

}
.album2 {
  padding: 10px;
     background-color: red;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
	 gap: 20px;
  border-radius: 30px;
  animation: flash-bg 0.3s infinite;

}
.album2:hover {
  background-color: #7FFF00;
 
}
        @keyframes flash-bg {
            0%, 100% {
                background-color: white; /* Couleur de départ et de fin */
            }
            50% {
                background-color: #7FFF00; /* Couleur intermédiaire (rose) */
            }
        }

.photo2 {
  max-width: 700px;
  height: auto;
}
.texte-album {
  padding: 10px 60px;
     background-image: url("../img/paper2.jpg");
	background-position: center;
	background-size: 280%;
  border-radius: 30px;
  border: solid 8px black;
}
.texte-album2 {
  padding: 10px 60px;
     background-image: url("../img/cover2.jpg");
	background-position: center;
	background-size: cover;
  border-radius: 30px;
  border: solid 8px black;
}
  .tourpast {
	    padding: 10px 60px;
  border-radius: 30px;
  border: solid 8px black;
  color: red;
 
  background-image: url("../img/cover2.jpg");
  background-position: left;
 
}


.achat:hover {
  border-color: #7FFF00;
}
section#section-medias {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
section#section-medias div iframe {
  max-width: 100%;
}
section#section-medias2 {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
section#section-medias2 div iframe {
  max-width: 100%;
}
section#section-medias3 {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
section#section-medias3 div iframe {
  max-width: 100%;
}

section#section-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 8px 8px 8px 8px;
}
section#infos > div > p {
  background: rgba(0, 0, 0, 0.7);
}

.jason {
  width: 280px;

}
.jason2 {
 width: 60px;

}
.padding {
padding: 0px 8px;
	
}
.grumaz {
  font-family: 'grumazregular';
}
.smilecomix {
  font-family: 'smilecomixregular';
}
.comiccity {
  font-family: 'comiccityregular';
}
.creepster {
  font-family: 'creepsterregular';
}

.social-links a {
  display: inline-flex;
}
.social-img  {
  display: inline-flex;
  width: 60px;
  border-radius: 10px;
}

.social-img:hover {
  animation: pulse 1s linear infinite;
}
.social-img2  {
  display: flex;
  height: 50px;
  border-radius: 10px;
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}


.facebook, a:link.facebook, .twitter, a:link.twitter, .google, a:link.google, .rss, a:link.rss, .mail, a:link.mail, .instagram, a:link.instagram, .youtube, a:link.youtube, .vine, a:link.vine, .pinterest, a:link.pinterest, .flickr, a:link.flickr {
  color: #fff!important;
}
.facebook, a:link.facebook {background: none none repeat scroll 0 0;}
.twitter, a:link.twitter {background: none none repeat scroll 0 0;}
.google, a:link.google {background: #dd4b39 none repeat scroll 0 0;}
.discord, a:link.discord {background: none none repeat scroll 0 0;}
.mail, a:link.mail {background: none none repeat scroll 0 0;}
.instagram, a:link.instagram {background: none none repeat scroll 0 0;}
.youtube, a:link.youtube {background: none none repeat scroll 0 0;}
.tiktok, a:link.tiktok {background: none none repeat scroll 0 0;}

#top-of-site-pixel-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 300px;
  left: 0;
}

body.header-not-at-top #fixed-menu {
  display: flex;
}
/*
.social-img:hover {
  animation: rotation 2s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
*/

@media (max-width: 1210px) {
  header, main, footer {
    margin-right: 10px;
    margin-left: 10px;
  }

}
@media (max-width: 900px) {
  header section {display: none;}
  #fixed-menu {display: flex;}
  main {padding-top: 80px; margin-top:0;}
  body.header-not-at-top #fixed-menu .nav {margin-right: 0;}
  .bio {flex-wrap: wrap;}
  .bio.reverse {flex-wrap: wrap-reverse;}
  section.tour figure{
    display: none;
	
	
  }
.jason {width: 150px;}
.photo {width: auto;}
.biogra {width: auto;}
}
@media (max-width: 650px) {
  #small-menu {display: block;}
  #fixed-menu {justify-content: space-between;}
  #fixed-menu .twat {position: relative}
  #fixed-menu .nav {
    display: none;
    position: absolute;
    flex-direction: column;
    gap: 10px;
    right: 0;
    top: 80px;
    margin-right: 0;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.8);
  }
  #fixed-menu .nav a {    width: 100%;  }
  .bio {flex-wrap: wrap;}
  .bio.reverse {flex-wrap: wrap-reverse;}
  #infos .infos-image {display: none;}
   #infos .infos-smartphone {
    display: block;
    background-image: url("../img/cover2_898x400.webp");
    background-position: center;
    background-size: cover;
		border-radius: 30px;
    border: solid 8px black;
	}
	  #infos .smart-march {display: block;}
	.jason {display: none;}
  .show {display: flex !important;}
}