/*!!!!!!!!!TEMA "NULL"!!!!!!!!!!*/ 
html{
  width: 100%;
  height: 100%;
}
body {
  width: 99%;
  height: 100%;
  background-image: url('fondos/spaceflowers4.jpg');
  cursor: url('cursor/bw.gif'), auto;
  font-family: "Comfortaa", "Montserrat", sans-serif; 
  color:#fff;  
}
/*barra pa moverle del costadito y de abajo*/
::-webkit-scrollbar { 
    width: 10px;}
::-webkit-scrollbar-track { 
    background-image:url('fondos/spaceflowers4.jpg');
    border-radius: 10px;} 
::-webkit-scrollbar-thumb { 
    background-image:url('fondos/deep4.jpg');
    border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {
    cursor: url('cursor/ice.gif'), auto;}
/*texto de hIpErVíNcUlOs*/
a {
  color: white;
  cursor: url('cursor/ice.gif'), auto;
}
/*así se ve cuando seleccionas el texto en la página*/
::selection {
  color: #000;
  background: #fff;
}
 /*!!botones!!*/ 
 button{
  display: inline-block;
  position: relative;
  padding: 10px 10px;
  cursor: url('cursor/ice.gif'), auto;
  text-align: center;
  font-family: "Comfortaa", "Montserrat", sans-serif;
  font-size: 16px;
  color:  #fff;
  margin: 7px;
  background-color: gray;
  border: black;
  box-shadow: black; 
 }
.button:hover {background-color: darkgray;
 }
.button:active {
    background-color: gray;
    box-shadow: 0 5px black;
  } 
 /********/
  .button1 {
    border: double 10px black;
    border-radius: 50px;
    box-shadow: 0 9px black; 
  }
  .button1:active {
    transform: translateY(4px);
  }/********/
  .button2 {
    border: double 20px;
    box-shadow: 0 -9px;
  }
  .button2:active {
    box-shadow: 0 -5px;
    transform: translateY(-4px);
  }/********/
  .button3 {
    border: double 7px darkgray;
    border-radius: 10px;
    box-shadow: 7px 7px darkgray; 
  }
  .button3:active {
    box-shadow: 5px 5px darkgray;
    transform: translateX(4px) translateY(4px);
  }
 /*divs,, o sea cajitas pa poner cosas */
div{
  
  position: relative;
  
  font-family: "Comfortaa", "Montserrat", sans-serif; 
  color:#fff;
  text-shadow: 0px 0px 15px #fff;
  padding: 30px;
  margin: 20px; 
}
.caja-grande {
  background-image: url(fondos/hell4.jpg);
  width: 65%;
  border: 25px double black;  
}
.cajita1 {
  background-image: url(fondos/deep4.jpg);
  width: 250px;
  border: 20px solid black;  
}
.cajita2 {
  background-image: url(fondos/deep4.jpg);
  width: 300px;
  border: 10px double black; 
}
.cajita3 {
  background-image: url(fondos/deep4.jpg);
  width: 150px;
  border: 30px double black; 
}
.cajita-invisible { 
  background:  none;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0px;
  margin: 0px; 
}
.cajita-invisible2 { 
  overflow: visible;
  background:  none;
  width: 90%;
  border: none;
  padding: 0px;
  margin: 0px; 
}
/*animaciones en keyframes uwu */ 
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
#shake:hover {
  animation: shake 1.6s infinite alternate;
}
/********/
@keyframes glide {
0% { transform: translate(100%,100%) rotate(0deg); }
50% { transform: translate(-100%,-100%) rotate(180deg); }
100% { transform: translate(100%,100%) rotate(359deg); }
}
#glide {
overflow: hidden;  
animation:glide 15s infinite alternate;
}
/********/
@keyframes scroll {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
#scroll {
animation:scroll 3s infinite}
/********/
@keyframes twist {
100% { transform: rotate(-720deg); }  
}
#twist:hover {
animation: twist 0.7s alternate infinite;
}
/********/
@keyframes bounce {
0% { transform: translateY(0%); }
100% { transform: translateY(-200%); }
}
#bounce {
animation: bounce 0.5s infinite alternate;
}
/********/
@keyframes star {
0% { transform: translate(-430px, -150px) rotate(-55deg); }
20% { transform: translate(430px, -150px) rotate(-360deg); }
40% { transform: translate(-550px, 700px) rotate(-15deg); }
60% { transform: translate(0px, -450px) rotate(55deg); }
80% { transform: translate(275px, 350px) rotate(360deg); }
100% { transform: translate(-430px, -150px); }
}
#star {
  animation: star 50s infinite alternate;
}
/********/
@keyframes float1 {
0% { transform: translate(0px, -5px) ; }
100% { transform: translate(0px, 5px) ; }
}
#float1 {
  animation: float1 1s infinite alternate;
}
/********/
@keyframes float2 {
0% { transform: translate(0px, 4px) ; }
100% { transform: translate(0px, -4px) ; }
}
#float2 {
  animation: float2 1.5s infinite alternate;
}

/*TRUE DVD BOUNCE ANIM*/

@keyframes moveX {
  from { left: 0; } to { left: 97%; }
}
@keyframes moveY {
  from { top: 0; } to { top: 97%; }
}
#DVD {
position: absolute;  
animation: moveX 16.4s linear 0s infinite alternate, moveY 13.6s linear 0s infinite alternate;
}
#salerito {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*es el fin de este CSS (y del hombre araña tmb)*/