/* style_welcome.css */


#frame1{
  visibility: visible;
}

#frame2{
  visibility: hidden;
}

#frame5{
  visibility: hidden;
}

#frame6{
  visibility: hidden;
}


#welcomebg {
    background: linear-gradient(15deg, #303030, #3d0000, #8e1616,#8e1616, #3d0000, #303030, #3d0000, #8e1616,#8e1616 , #3d0000, #303030);
    background-size: 100% 550%;
    animation: gradient-animation 50s linear infinite;
  }
  
@keyframes gradient-animation {
    0% {background-position: 50% 0%;}
    50%{background-position:50% 100%;}
    100%{background-position:50% 0%;}
  }

#moon {
  position: absolute;
  width: 25vw;
  top: 1vw;
  left: 72vw;
  opacity: 0.7;
  animation: moonanim 5s ease-in-out infinite;
}

@keyframes moonanim{
  0%{transform: rotate(0deg);}
  50%{transform: rotate(2deg);}
  100%{transform: rotate(0deg);}
}

#grass {
    position: absolute;
    width: 100vw;
    top: 38.5vw;
    opacity:0.9;
  }

#tree2{
    position: absolute;
    width: 40vw;
    top: 0;
    left: 60vw;
    animation: tree2anim 5s ease-in-out infinite;
  }

@keyframes tree2anim{
    0% {opacity: 1;}
    50%{opacity: 0.8;}
    96%{opacity: 1;}
    98%{opacity: 0.5;}
    100%{opacity: 1;}
}

#tree3{
    position: absolute;
    width: 100vw;
    height: 20vw;
    top: 35vw;
    background-image: url('../assets/img/welcome/trees3pcd.png'), url('../assets/img/welcome/trees3pcd.png');
    background-repeat: repeat-x;
    background-size: 19vw, 16vw;
    background-position: 0 0, -15vw 0;
    opacity: 0.8;
    animation: tree3anim 9s linear infinite;
  }

@keyframes tree3anim {
  0% {background-position: 0 0,  -14vw 0;
    transform: rotate(-0.5deg);}
  50%{background-position: 1vw 0, -15vw 0;
    transform: rotate(0.5deg);}
  100%{background-position: 0 0, -14vw 0;
    transform: rotate(-0.5deg);}
}

#tree4{
    position:absolute;
    top: -3vw;
    left: -2vw;
    width: 40vw;
    animation: tree4anim 8s ease-in-out infinite;
  }

@keyframes tree4anim {
    0% { transform: rotate(1deg) ; 
        transform-origin: top left;}
    50% { transform: rotate(-5deg) scale(1.05);
        transform-origin: top left;}
    100% { transform: rotate(1deg);
        transform-origin: top left; }
  }

#tree5{
    position: absolute;
    width: 35vw;
    top: 0vw;
    left: -8vw;
    opacity: 0.5;
    animation: tree56anim 6s ease-in-out infinite;
  }

@keyframes tree56anim {
    0% { transform: rotate(0.5deg) ; 
      transform-origin: bottom;}
    50% { transform: rotate(-0.6deg);
        transform-origin: bottom;}
    100% { transform: rotate(0.5deg);
        transform-origin: bottom; }
  }

#tree6{
    position: absolute;
    width: 31vw;
    top: 5vw;
    left: 72vw;
    opacity: 0.6;
    animation: tree56anim 7s ease-in-out infinite;
}

/* frame containers*/
.introframe{
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  max-height: 99vh;
}



/* intro frames*/
#mousef1{
  position: fixed;
  width: 95vw;
  top: -14vw;
  left: 5vw;
  animation: mousef1anim 10s ease-in-out 1;
}
@keyframes mousef1anim{
  0%{transform: scale(0.80);}
100%{transform: scale(1);}
}

#thunder{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgb(238, 238, 238);
  animation: thunderanim 3s linear infinite;
  }

@keyframes thunderanim {
  0% { opacity: 0.2; } 
    2% { opacity: 0.2; }
    3% { opacity: 0.6; }
    5% { opacity: 0.2; }
    8% { opacity: 0.9; }
    10% {opacity: 0.3;} 
    52% { opacity: 0.1; }
    53% { opacity: 0.6; }
    55% { opacity: 0.2; }
    58% { opacity: 0.9; }
    65% {opacity: 0.1;}
    100% { opacity: 0.3; }
}

#dia1{
  position: absolute;
  left: 60vw;
  top: 38vw;
  width: 15vw;
}

#mousef2{
  position: fixed;
  width: 37vw;
  top: 3vw;
  left: 5vw;
  image-rendering: pixelated;
}

.puterintro{
  position: absolute;
  width: 55vw;
  left: 41vw;
  top: 5vw;
}

.screensaver{
  position: absolute;
  left: 48.5vw;
  top: 7vw;
  width: 40vw;
  height: 22vw;
  
}

#turnon{
  animation: turnonanim 2s ease-in-out ;
  animation-fill-mode: forwards;
}

@keyframes turnonanim{
  from{ transform: scale(1) rotate(0deg);
    left: 48.5vw;
    top: 7vw;}
  to{transform: scale(3) rotate(720deg);
    left: 32vw;
    top: 16vw;}
}

#dia2{
  position: absolute;
  left: 23vw;
  top: 36vw;
  width: 45vw;
}

#reply1{
  width: 21vw;
  margin: 0 0.5vw; 
  
}

#reply2{
  width: 21vw;
  margin: 0 0.5vw; 
}

#mousef3{
  position: fixed;
  width: 23.5vw;
  top: 3vw;
  left: 12vw;
  image-rendering: pixelated;
}

#dia3{
  position: absolute;
  left: 23vw;
  top: 36vw;
  width: 20vw;

}

#mousef4{
  position: fixed;
  width: 25vw;
  top: 3vw;
  left: 12vw;
  image-rendering: pixelated;
}

#dia4{
  position: absolute;
  left: 23vw;
  top: 36vw;
  width: 27vw;
}

#mousef5{
  position: fixed;
  width: 30vw;
  top: 2.5vw;
  left: 9vw;
  image-rendering: pixelated;
}

#dia5{
  position: absolute;
  left: 23vw;
  top: 36vw;
  width: 55vw;
  cursor:default;
}

#mousef6{
  position: fixed;
  width: 37vw;
  top: 2.5vw;
  left: 9vw;
  image-rendering: pixelated;
}

#dia6{
  position: absolute;
  left: 23vw;
  top: 36vw;
  width: 55vw;
}

#dia6fade{
  position: absolute;
  left: 23vw;
  top: 36vw;
  width: 55vw;
  animation: dia6fadeanim 4s ease-out forwards;
  animation-delay: 1s;
}

@keyframes dia6fadeanim{
  from{opacity: 1;}
  to{opacity: 0;}
}