@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Pokemon Solid';
}

::-webkit-scrollbar {
  display: none;
}

body {
  min-height: 300vh;
  background: no-repeat url(background.jpg);
  background-size: cover;
  background-attachment: fixed;
}

header {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header h1, header button {
  position: relative;
  z-index: 10;
}

header h1 {
  color : #FFDC00;
  text-shadow: rgb(13, 71, 165) 8px 0px 0px, rgb(13, 71, 165) 7.93758px 0.997398px 0px, rgb(13, 71, 165) 7.7513px 1.97923px 0px, rgb(13, 71, 165) 7.44406px 2.93018px 0px, rgb(13, 71, 165) 7.02066px 3.8354px 0px, rgb(13, 71, 165) 6.4877px 4.68078px 0px, rgb(13, 71, 165) 5.85351px 5.45311px 0px, rgb(13, 71, 165) 5.12797px 6.14035px 0px, rgb(13, 71, 165) 4.32242px 6.73177px 0px, rgb(13, 71, 165) 3.44941px 7.21814px 0px, rgb(13, 71, 165) 2.52258px 7.59188px 0px, rgb(13, 71, 165) 1.55638px 7.84714px 0px, rgb(13, 71, 165) 0.565898px 7.97996px 0px, rgb(13, 71, 165) -0.433417px 7.98825px 0px, rgb(13, 71, 165) -1.42597px 7.87189px 0px, rgb(13, 71, 165) -2.39627px 7.63269px 0px, rgb(13, 71, 165) -3.32917px 7.27438px 0px, rgb(13, 71, 165) -4.21013px 6.80256px 0px, rgb(13, 71, 165) -5.02539px 6.22459px 0px, rgb(13, 71, 165) -5.76223px 5.54948px 0px, rgb(13, 71, 165) -6.40915px 4.78778px 0px, rgb(13, 71, 165) -6.95606px 3.95136px 0px, rgb(13, 71, 165) -7.39442px 3.05329px 0px, rgb(13, 71, 165) -7.71739px 2.10757px 0px, rgb(13, 71, 165) -7.91994px 1.12896px 0px, rgb(13, 71, 165) -7.9989px 0.132735px 0px, rgb(13, 71, 165) -7.95304px -0.865561px 0px, rgb(13, 71, 165) -7.78307px -1.85035px 0px, rgb(13, 71, 165) -7.49165px -2.80627px 0px, rgb(13, 71, 165) -7.08333px -3.71839px 0px, rgb(13, 71, 165) -6.56448px -4.57249px 0px, rgb(13, 71, 165) -5.94318px -5.35524px 0px, rgb(13, 71, 165) -5.22915px -6.05442px 0px, rgb(13, 71, 165) -4.43352px -6.65912px 0px, rgb(13, 71, 165) -3.5687px -7.15991px 0px, rgb(13, 71, 165) -2.6482px -7.54898px 0px, rgb(13, 71, 165) -1.68637px -7.82024px 0px, rgb(13, 71, 165) -0.698222px -7.96947px 0px, rgb(13, 71, 165) 0.300817px -7.99434px 0px, rgb(13, 71, 165) 1.29516px -7.89446px 0px, rgb(13, 71, 165) 2.2693px -7.67139px 0px, rgb(13, 71, 165) 3.20802px -7.32862px 0px, rgb(13, 71, 165) 4.09668px -6.87148px 0px, rgb(13, 71, 165) 4.92142px -6.30711px 0px, rgb(13, 71, 165) 5.66936px -5.64432px 0px, rgb(13, 71, 165) 6.32883px -4.89346px 0px, rgb(13, 71, 165) 6.88954px -4.06623px 0px, rgb(13, 71, 165) 7.34274px -3.17555px 0px, rgb(13, 71, 165) 7.68136px -2.23532px 0px, rgb(13, 71, 165) 7.90012px -1.26021px 0px, rgb(13, 71, 165) 7.9956px -0.265434px 0px;
  letter-spacing: 8pt;
  font-size: 3.5em;
  text-align: center;
}

header button {
  position: absolute;
  bottom: 100px;
  left: calc(50% - 60px);
  width: 100px;
  height: 100px;
  border: 0;
  cursor: pointer;
  transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  overflow: hidden;
  background: no-repeat url(pokeball.png);
  background-size:  100%;
  background-position: center;
}

@keyframes zoom {
  0%   {transform: scale(1);}
  25%  {transform: scale(1.2);}
  50%  {transform: scale(1);}
  75%  {transform: scale(1.2);}
  100% {transform: scale(1);}

}

header button:hover {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
  animation-name: zoom;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

header button:focus {
  outline: 0;
}

header button:before, header button:after {
  font-family: "Font Awesome 5 Free";
  transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
  top: 17px;
  position: absolute;
}

header .triangle {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat url(pika.jpg);
  background-size: cover;
  background-attachment: fixed;
  transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

header .triangle.left {
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

header .triangle.right {
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

header.open .triangle.left {
  clip-path: polygon(0 0, 0 100%, 0 100%);
}

header.open .triangle.right {
  clip-path: polygon(100% 0, 100% 0, 100% 100%);
}

header.open button {
  left: 40px;
  bottom: 40px;
  width: 50px;
  border-radius: 50%;
}

header.open button:before {
  opacity: 0;
  left: 100%;
}

header.open button:after {
  opacity: 1;
  left: 18px;
}

header.open button.menu {
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  border-radius: 0;
}

header.open button.menu:after {
  left: -100%;
}

content section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 3em;
  letter-spacing: 8pt;
  color : #FFDC00;
  text-shadow: rgb(13, 71, 165) 8px 0px 0px, rgb(13, 71, 165) 7.93758px 0.997398px 0px, rgb(13, 71, 165) 7.7513px 1.97923px 0px, rgb(13, 71, 165) 7.44406px 2.93018px 0px, rgb(13, 71, 165) 7.02066px 3.8354px 0px, rgb(13, 71, 165) 6.4877px 4.68078px 0px, rgb(13, 71, 165) 5.85351px 5.45311px 0px, rgb(13, 71, 165) 5.12797px 6.14035px 0px, rgb(13, 71, 165) 4.32242px 6.73177px 0px, rgb(13, 71, 165) 3.44941px 7.21814px 0px, rgb(13, 71, 165) 2.52258px 7.59188px 0px, rgb(13, 71, 165) 1.55638px 7.84714px 0px, rgb(13, 71, 165) 0.565898px 7.97996px 0px, rgb(13, 71, 165) -0.433417px 7.98825px 0px, rgb(13, 71, 165) -1.42597px 7.87189px 0px, rgb(13, 71, 165) -2.39627px 7.63269px 0px, rgb(13, 71, 165) -3.32917px 7.27438px 0px, rgb(13, 71, 165) -4.21013px 6.80256px 0px, rgb(13, 71, 165) -5.02539px 6.22459px 0px, rgb(13, 71, 165) -5.76223px 5.54948px 0px, rgb(13, 71, 165) -6.40915px 4.78778px 0px, rgb(13, 71, 165) -6.95606px 3.95136px 0px, rgb(13, 71, 165) -7.39442px 3.05329px 0px, rgb(13, 71, 165) -7.71739px 2.10757px 0px, rgb(13, 71, 165) -7.91994px 1.12896px 0px, rgb(13, 71, 165) -7.9989px 0.132735px 0px, rgb(13, 71, 165) -7.95304px -0.865561px 0px, rgb(13, 71, 165) -7.78307px -1.85035px 0px, rgb(13, 71, 165) -7.49165px -2.80627px 0px, rgb(13, 71, 165) -7.08333px -3.71839px 0px, rgb(13, 71, 165) -6.56448px -4.57249px 0px, rgb(13, 71, 165) -5.94318px -5.35524px 0px, rgb(13, 71, 165) -5.22915px -6.05442px 0px, rgb(13, 71, 165) -4.43352px -6.65912px 0px, rgb(13, 71, 165) -3.5687px -7.15991px 0px, rgb(13, 71, 165) -2.6482px -7.54898px 0px, rgb(13, 71, 165) -1.68637px -7.82024px 0px, rgb(13, 71, 165) -0.698222px -7.96947px 0px, rgb(13, 71, 165) 0.300817px -7.99434px 0px, rgb(13, 71, 165) 1.29516px -7.89446px 0px, rgb(13, 71, 165) 2.2693px -7.67139px 0px, rgb(13, 71, 165) 3.20802px -7.32862px 0px, rgb(13, 71, 165) 4.09668px -6.87148px 0px, rgb(13, 71, 165) 4.92142px -6.30711px 0px, rgb(13, 71, 165) 5.66936px -5.64432px 0px, rgb(13, 71, 165) 6.32883px -4.89346px 0px, rgb(13, 71, 165) 6.88954px -4.06623px 0px, rgb(13, 71, 165) 7.34274px -3.17555px 0px, rgb(13, 71, 165) 7.68136px -2.23532px 0px, rgb(13, 71, 165) 7.90012px -1.26021px 0px, rgb(13, 71, 165) 7.9956px -0.265434px 0px;
}

iframe, video {
  width: 1280px;
  height: 720px;
}

nav {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

nav ul {
  list-style: none;
}

nav ul li {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 2;
  letter-spacing: 1pt;
  font-size: 2em;
  color: #09203f;
  animation: fadeDown 0.5s forwards;
  opacity: 0;
  cursor: pointer;
  transform: translateY(-20px);
  transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  margin: 30vh;
  text-align: center;
}

nav ul li:hover {
  text-shadow: 2px 1px 40px rgba(0, 0, 0, 0.5);
  opacity: 0.8;
}

nav ul li:nth-child(1) {
  animation-delay: 0.8s;
}

nav ul li:nth-child(2) {
  animation-delay: 0.9s;
}

nav ul li:nth-child(3) {
  animation-delay: 1s;
}

nav #nav-close {
  position: fixed;
  top: 40px;
  right: 40px;
  font-size: 1.5em;
  cursor: pointer;
  animation: fadeDown 0.5s forwards;
  animation-delay: 1.1s;
  opacity: 0;
  color: #09203f;
  transform: translateY(-20px);
}

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*neige*/

.snow {
  position: absolute;
  min-width: 100vw;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -100;
}

.snow .svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

#snow-top-layer {
  will-change: transform;
  transform: translateY(-768px);
  -webkit-animation: fall 22.5s infinite linear;
          animation: fall 22.5s infinite linear;
}

#snow-bottom-layer {
  will-change: transform;
  transform: translateY(-768px);
  -webkit-animation: fall 45s infinite linear;
          animation: fall 45s infinite linear;
}

@-webkit-keyframes fall {
  100% {
    transform: translateY(0);
  }
}

@keyframes fall {
  100% {
    transform: translateY(0);
  }
}

/* images */

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  /*z-index: -100;*/
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: 372px;
  margin-left:150px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 2px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.divContenu{
  display : none;
}