:root{
  --c0: rgba(0, 0, 255, 0);
  --c1: rgba(0, 0, 0, 1);
  --c2: rgba(0, 153, 255, 1);
  --c3: rgba(255, 255, 255, 1);
  --offset-top: 37px;
  --up-float: 9vh;
  --down-float: 13.5vh;
  --height-sign: 51vh;
  --left-limit: 0vh;

  --min-width: 300px;

  --button_top-color: #00e600;
  --button_side-color: #008000;
  --button_ko-color: #990000;
  --button-top: 12vh;
  --button-left: 2.5vh;
  --button-thickness: 1vh;
  --portal_gun_font_size: 3vh;
  --portal_gun_dist: 10vh;
  --portal_gun_width: 20vh;
  --portal_gun_height: 50vh;
  --portal_gun_button_width: 15vh;
  --portal_gun_button_height: 10vh;
  --portal_gun_button_text_top: 2.5vh;
  --portal_gun_button_font_size: 2.5vh;
  --portal_gun_thickness: 10vh;
  --portal_gun_top-color:#a6a6a6;
  --portal_gun_left-color:#1a1a1a;
  --portal_gun_bottom-color:#0d0d0d;

}

.w3-theme {color:#000 !important ; background-color:#F0F0F0 !important;}

.view {
  position: fixed;
  top: var(--offset-top);
  left: 0px;
  height: 100vh;
  width: 100vw;
  /*background-color: blue;*/
  overflow: scroll;

}

#home_text {
  position: absolute;
  top: 25vh;
  left: 60vh;
  right: 10vh;
  min-width: var(--min-width);
}

.background_space {
  z-index: -100;
  position: absolute;
  top:0px;
  left: calc(var(--left-limit) + 0vh);
  height: 100vh;
  width: 100vw;
  opacity: 1;
  background-color: black;
}

.div_sun {
  z-index: -90;
  position: absolute;
  top:0px;
  left:0vh;
  height: 100vh;
  width: 100vw;
  opacity: 1;
}
.div_sunshine {
  z-index: -89;
  position: absolute;
  top:0px;
  left:0vh;
  height: 100vh;
  width: 100vw;
  opacity: 1;
}
.div_moon {
  z-index: -89;
  position: absolute;
  top: 3vh;
  left: 30vh;
  height: 15vh;
  width: 15vh;
  background-size: 100% 100%;
  opacity: 1;
}





.div_theater{
  position: absolute;
  left: var(--left-limit);
  top: 0px;

  /*background-color: blue;
  opacity: .5;*/
  height: 100vh;
  width: auto;

  margin: 0px;
  padding: 0px;
  border: 0px;
}

.img_theater {
  position: absolute;
  z-index: -5;
  height: 100%;

}

@keyframes floating-sign {
  0%   {top: 5vh; }
  100% {top: 8.3vh; }
}

.img_enseigne {
  position: absolute;
  z-index: -4;
  width: auto;
  height: 50vh;
  left: 21.7vh;

  animation-name: floating-sign;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  z-index: 0;
}

@keyframes floating-shadow {
  0%   {top: 5vh; }
  100% {top: 8vh; }
}
.img_shadow_sign {
  position: absolute;
  left: 15vh;
  height: 55vh;
  width: auto;

  animation-name: floating-shadow;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  z-index: 0;
}


@keyframes anim_light_suspenser {
  0%   { left: 28vh; top: 57vh; width: 0vh; height: 0vh; }
  100% { left: 20.5vh; top: 48.5vh; width: 15vh; height: 15vh; }
}
.img_light_suspenser {
  position: absolute;
  animation-name: anim_light_suspenser;
  /*background-color: green;
  opacity: .7;*/
  background-repeat: no-repeat;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  z-index: 2;
}

.img_enseigne2 {
  position: absolute;
  top: 46.4vh;
  left: 34.6vh;
  width: 17.7vh;
  z-index: 1;
}

.character_sign {
  position: absolute;
  width: 7vh;
  height: auto;
  font-family: verdana, monospace;
  font-size: 6vh;
  font-weight: bold;
  /*background-color: blue;*/
  background-color: transparent;
  text-align: center;
}




.img_landscape {
  position: absolute;
  height: 100vh;
  width: 100vw;
  /*min-width: 2000px;*/
  left: 0px;
  /*top: var(--offset-top);*/
  top: 0px;
  opacity: 1;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 80%;

}





.filter_landscape {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.filter_solarize {
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: .1;
}



@keyframes portal_animation {
  0%   { background-image: radial-gradient(circle, var(--c3) 3%, var(--c2) 6%, var(--c0) 15% );}
  5%   { background-image: radial-gradient(circle, var(--c3) 3%, var(--c1) 6%, var(--c1) 15%, var(--c2) 18%, var(--c3) 20%, var(--c2) 22%, var(--c0) 25% );}
  10%   { background-image: radial-gradient(circle, var(--c3) 3%, var(--c1) 6%, var(--c1) 25%, var(--c2) 28%, var(--c3) 30%, var(--c2) 32%, var(--c0) 35% );}
  15%   { background-image: radial-gradient(circle, var(--c3) 3%, var(--c1) 6%, var(--c1) 35%, var(--c2) 38%, var(--c3) 40%, var(--c2) 42%, var(--c0) 45% );}
  20%   { background-image: radial-gradient(circle, var(--c3) 3%, var(--c1) 6%, var(--c1) 45%, var(--c2) 48%, var(--c3) 50%, var(--c2) 52%, var(--c0) 55% );}
  25%   { background-image: radial-gradient(circle, var(--c3) 3%, var(--c1) 6%, var(--c1) 55%, var(--c2) 58%, var(--c3) 60%, var(--c2) 62%, var(--c0) 65% );}
  30%   { background-image: radial-gradient(circle, var(--c3) 3%, var(--c1) 6%, var(--c1) 65%, var(--c2) 68%, var(--c3) 70%, var(--c2) 72%, var(--c0) 75% );}
  35%   { background-image: radial-gradient(circle, var(--c3) 3%, var(--c1) 6%, var(--c1) 75%, var(--c2) 78%, var(--c3) 80%, var(--c2) 82%, var(--c0) 85% );}
  40%   { background-image: radial-gradient(circle, var(--c3) 3%, var(--c1) 6%, var(--c1) 85%, var(--c2) 88%, var(--c3) 90%, var(--c2) 92%, var(--c0) 95% );}
  45%   { background-image: radial-gradient(circle, var(--c3) 3%, var(--c1) 6%, var(--c1) 95%, var(--c2) 98%, var(--c3) 100% );}
  50%   { background-image: radial-gradient(circle, var(--c0) 3%, var(--c2) 5%, var(--c3) 7%, var(--c2) 9%, var(--c1) 11%);}
  55%   { background-image: radial-gradient(circle, var(--c0) 23%, var(--c2) 15%, var(--c3) 17%, var(--c2) 19%, var(--c1) 21%);}
  60%   { background-image: radial-gradient(circle, var(--c0) 23%, var(--c2) 25%, var(--c3) 27%, var(--c2) 29%, var(--c1) 31%);}
  65%   { background-image: radial-gradient(circle, var(--c0) 33%, var(--c2) 35%, var(--c3) 37%, var(--c2) 39%, var(--c1) 41%);}
  70%   { background-image: radial-gradient(circle, var(--c0) 43%, var(--c2) 45%, var(--c3) 47%, var(--c2) 49%, var(--c1) 51%);}
  75%   { background-image: radial-gradient(circle, var(--c0) 53%, var(--c2) 55%, var(--c3) 57%, var(--c2) 59%, var(--c1) 61%);}
  80%   { background-image: radial-gradient(circle, var(--c0) 63%, var(--c2) 65%, var(--c3) 67%, var(--c2) 69%, var(--c1) 71%);}
  85%   { background-image: radial-gradient(circle, var(--c0) 73%, var(--c2) 75%, var(--c3) 77%, var(--c2) 79%, var(--c1) 81%);}
  90%   { background-image: radial-gradient(circle, var(--c0) 83%, var(--c2) 85%, var(--c3) 87%, var(--c2) 89%, var(--c1) 91%);}
  95%   { background-image: radial-gradient(circle, var(--c0) 93%, var(--c2) 95%, var(--c3) 97%, var(--c2) 99%);}
  95%   { background-image: radial-gradient(circle, var(--c0) 100%);}
}

@keyframes portal_animation_2 {
  0%   { background-size: 0% 0%; transform: rotate(0deg); opacity: 0; }
  25%  { background-size: 50% 50%; transform: rotate(-45deg); opacity: 1; }
  50%  { background-size: 100% 100%; transform: rotate(-90deg); opacity: 1; }
  75%  { background-size: 100% 100%; transform: rotate(-135deg); opacity: 1; }
  100%  { background-size: 100% 100%; transform: rotate(-180deg); opacity: 0; }
}

.portal_anim_class {
  animation-name: portal_animation;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

.portal_anim_class_2 {
  animation-name: portal_animation_2;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  background-image: url("/img/portal_1.png");
  background-position: center;
  background-repeat: no-repeat;
}

.portal_class {
  position: absolute;
  transition: opacity 1s, height 2s, width 2s, left 1s , top 1s;
  opacity: 0;
  filter: blur(3px);
}

@keyframes portal_front_animation {
  0%   { background-size: 0% 0%; transform: rotate(0deg); opacity: 0; }
  25%  { background-size: 50% 50%; transform: rotate(-120deg); opacity: 1; }
  50%  { background-size: 100% 100%; transform: rotate(-260deg); opacity: 1; }
  75%  { background-size: 100% 100%; transform: rotate(-380deg); opacity: .5; }
  100%  { background-size: 100% 100%; transform: rotate(-500deg); opacity: 0; }
}

.portal_front_anim_class_2 {
  animation-name: portal_front_animation;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  background-image: url("/img/portal_3.png");
  background-position: center;
  background-repeat: no-repeat;
}

@keyframes portal_middle_animation {
  0%   { background-size: 0% 0%; transform: rotate(0deg); opacity: 0; }
  25%  { background-size: 50% 50%; transform: rotate(-60deg); opacity: 1; }
  50%  { background-size: 100% 100%; transform: rotate(-120deg); opacity: 1; }
  75%  { background-size: 100% 100%; transform: rotate(-180deg); opacity: .7; }
  100%  { background-size: 100% 100%; transform: rotate(-240deg); opacity: 0; }
}

.portal_middle_anim_class_2 {
  animation-name: portal_middle_animation;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  background-image: url("/img/portal_2.png");
  background-position: center;
  background-repeat: no-repeat;
}

/* if viewport is larger than height*/
@media (min-aspect-ratio: 1/1) {
  .portal_anim_class_2 {
    width: 130vw;
    height: 130vw;
    left: -15vw;
    top: -40vw;
    background-color: black;
  }
  .portal_front_anim_class_2 {
    width: 30vw;
    height: 30vw;
    left: 35vw;
    top: 10vw;
  }
  .portal_middle_anim_class_2 {
    width: 80vw;
    height: 80vw;
    left: 10vw;
    top: -15vw;
  }

}
@media (max-aspect-ratio: 1/1) {
  .portal_anim_class_2 {
    width: 200vh;
    height: 200vh;
    left: -50vh;
    top: -50vh;
    background-color: black;
  }
  .portal_front_anim_class_2 {
    width: 30vh;
    height: 30vh;
    left: 35vh;
    top: 35vh;
  }
}



.crater {
  position: absolute;
  width: 220px;
  height: auto;
  left: 500px;
  top: 350px;
  opacity: 1;
  z-index: -29;
}



@keyframes spacecraft_animation {
  0%   { left: 150vh; top: 20vh; width: 0px; height: auto;}
  30%   { left: 100vh; top: 12vh; width: 100px; height: auto;}
  40%   { left: 100vh; top: 10vh; width: 100px; height: auto;}
  60%   { left: 100vh; top: 12vh; width: 100px; height: auto;}
  80%   { left: 100vh; top: 10vh; width: 100px; height: auto;}
  100% { left: 30vh; top: 20vh; width: 0px; height: auto;}
}
.spacecraft {
  position: absolute;
  width: 80px;
  min-height: 50px;
  height: auto;
  top: 10vh;
  left: 50vw;
  opacity: 1;
  /*background-color: red;*/
  background-image: url("/img/ufo_1.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  animation-name: spacecraft_animation;
  animation-duration: 17s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}




#portal_button {
  background-color: var(--button_top-color);
  position: absolute;
  top: var(--button-top);
  left: calc( (var(--portal_gun_width) - var(--portal_gun_button_width))/2 );
  width: var(--portal_gun_button_width);
  height: var(--portal_gun_button_height);
  border-radius: 10%;
  opacity: 1;
  transform: translateZ(calc(var(--portal_gun_dist) + var(--button-thickness)));
}
#portal_button_side {
  background-color: var(--button_side-color);
  position: absolute;
  top: var(--button-top);
  left: calc( (var(--portal_gun_width) - var(--portal_gun_button_width))/2 );
  width: var(--portal_gun_button_width);
  height: var(--portal_gun_button_height);
  border-radius: 10%;
  transform: translateZ(var(--portal_gun_dist));
}

.portal_text {
  width: 100%;
  text-align: center;
  position: absolute;
  top: var(--portal_gun_button_text_top);
  font-weight: bold;
  line-height: 1;
  font-size: var(--portal_gun_button_font_size);
  height: var(--portal_gun_button_font_size);
}

#gun {
   position: absolute;
   background-color: var(--portal_gun_top-color);
   width: var(--portal_gun_width);
   height: var(--portal_gun_height);
   z-index: -1;
   opacity: 1;
   transform: translateZ(var(--portal_gun_dist));
   font-size: var(--portal_gun_font_size);
   text-align: center;
}

#gun_left {
  position: absolute;
  transform: rotateY(90deg) translateZ(calc(var(--portal_gun_thickness) /-2)) translateX(calc(var(--portal_gun_thickness) /-2));
  background-color: var(--portal_gun_left-color);
  width: var(--portal_gun_thickness);
  height: var(--portal_gun_height);
  z-index: -2;
}

#gun_bottom {
  position: absolute;
  /*transform: rotateX(90deg) translateZ(calc(var(--portal_gun_thickness) /-2)) translateX(calc(var(--portal_gun_thickness) /-2));*/
  transform: rotateX(90deg) translateZ(calc(-1 * var(--portal_gun_height) + var(--portal_gun_thickness)/2 )) translateY(calc(var(--portal_gun_thickness) /2));
  background-color: var(--portal_gun_bottom-color);
  width: var(--portal_gun_width);
  height: var(--portal_gun_thickness);
  z-index: -2;
}




@keyframes anim_remote {
  0%   { transform: translateZ(-10vh) rotateY(25deg) rotateX(55deg);}
  50%   { transform: translateZ(-10vh) rotateY(10deg) rotateX(70deg);}
  100% { transform: translateZ(-10vh) rotateY(25deg) rotateX(55deg);}
}

#portal_gun {
   position: absolute;
   /*background-color: orange;*/
   width: 100%;
   height: 100%;
   /*transform: translateZ(-10vh) rotateY(25deg) rotateX(55deg);*/
   transform-style: preserve-3d;

   /*
   animation-name: anim_remote;
   animation-duration: 8s;
   animation-direction: normal;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   */
}


#div_portal_gun {
  position: absolute;
  right: 5vh;
  bottom: -20vh;
  width: var(--portal_gun_width);
  height: var(--portal_gun_height);

  perspective: 500vh;
  perspective-origin: 50% 50%;
  /*transform: translateZ(250vh);*/

}