html, body {}
body {
  font-family: 'Slabo 27px', serif;
  background-color: rgb(0, 0, 0); 
}

canvas {
  position: fixed;
  top:0px;
  left:0px;
  display: block;
  width: 100%;       /* no overflow */
  height: 100%;
  z-index: -1;
}

/*
.bg_img:before{
  content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(
      120deg,
      rgba(0, 0, 0, 0.81),
      rgba(74, 2, 74, 0),
      rgba(0, 0, 0, 0.833)
    );
    background-size: 300% 300%;
    animation: gradientShift 10s infinite ease-in-out;
    z-index: -1;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bg_img{
    position: absolute;
    
    top:0px;
    left:0px;

    width: 100%;
    height: 100%;

    z-index: -1;
     transition: opacity 0.7s ease-in;
     opacity: 0;

}

.bg_img.loaded{
  opacity: 1;

  background: url(IMG/fondo.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    filter: blur(5px);

    animation: moveback 10s infinite alternate ease-in-out;
}

@keyframes  moveback {
  from { background-size: 100% 100%; }
  to   { background-size: 120% 120%; }
}
*/
.container {
  padding: 10px;
  width: 300px;
  background-color: black;
  opacity: 0.75;
  color:white;
}

.contenedor {
overflow-y:hidden;
 background:url(IMG/star.gif) no-repeat center center;
 background-size:cover;
  padding: 10px;
  width: 300px;
  background-color: black;
  opacity: 0.75;
   color:white;
}


.but {
  background: #29B2F7;
 padding: 5px; 
border: 1px #0051FF solid;
 font-family: Tahoma;
 width: 100px;
  height: 50px;
  font-size:20px;
color: #FFFFFF;
border-radius: 5px 5px 5px 5px; 
}

.hexagon {
	z-index:-1;
  position: relative;
  width: 400px; 
  height: 230.94px;
  margin: 115.47px 0;
  box-shadow: 0 0 20px rgba(0,0,0,1);
  border-left: solid 5px #ffffff;
  border-right: solid 5px #ffffff;
  top:30px;
  background-color: black;
  opacity: 0.75;
}
/*
.hexagon.loaded{

  background-image: url(IMG/astro1.jpg);
  background-size: auto 450.3332px;
  background-position: center;
  opacity: 1;
  

}*/

.hexTop,
.hexBottom {
  position: absolute;
  z-index: 1;
  width: 282.84px;
  height: 282.84px;
  overflow: hidden;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 55px;
  box-shadow: 0 0 20px rgba(0,0,0,1);
}

/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
  content: "";
  position: absolute;
  width: 390.0000px;
  height: 225.16660498395407px;
  -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-112.5833px);
  -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-112.5833px);
  transform:          rotate(45deg) scaleY(1.7321) translateY(-112.5833px);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  background: inherit;
}

.hexTop {
  top: -146px;
  border-top: solid 7.0711px #ffffff;
  border-right: solid 7.0711px #ffffff;
}

.hexTop:after {
  background-position: center top;
}

.hexBottom {
  bottom: -145px;
  border-bottom: solid 7.0711px #ffffff;
  border-left: solid 7.0711px #ffffff;
}

.hexBottom:after {
  background-position: center bottom;
}

.hexagon:after {
  content: "";
  position: absolute;
  top: 2.8868px;
  left: 0;
  width: 390.0000px;
  height: 225.1666px;
  z-index: 2;
  background: inherit;
}


.hexagon2 {
		z-index:-1;
  position: relative;
  width: 400px; 
  height: 230.94px;
  margin: 115.47px 0;
  box-shadow: 0 0 20px rgba(0,0,0,1);
  border-left: solid 5px #ffffff;
  border-right: solid 5px #ffffff;
 
  background-color: black;
  opacity: 0.75;
}
/*
.hexagon2.loaded {
  background-image: url(IMG/astro2.jpg);
  background-size: auto 450.3332px;
  background-position: center;
  opacity: 1 ;
}
*/
.hexTop2,
.hexBottom2 {
  position: absolute;
  z-index: 1;
  width: 282.84px;
  height: 282.84px;
  overflow: hidden;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 55px;
  box-shadow: 0 0 20px rgba(0,0,0,1);
}

/*counter transform the bg image on the caps*/
.hexTop2:after,
.hexBottom2:after {
  content: "";
  position: absolute;
  width: 390.0000px;
  height: 225.16660498395407px;
  -webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-112.5833px);
  -ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-112.5833px);
  transform:          rotate(45deg) scaleY(1.7321) translateY(-112.5833px);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  background: inherit;
}

.hexTop2 {
  top: -146px;
  border-top: solid 7.0711px #ffffff;
  border-right: solid 7.0711px #ffffff;
}

.hexTop2:after {
  background-position: center top;
}

.hexBottom2 {
  bottom: -145px;
  border-bottom: solid 7.0711px #ffffff;
  border-left: solid 7.0711px #ffffff;
}

.hexBottom2:after {
  background-position: center bottom;
}

.hexagon2:after {
  content: "";
  position: absolute;
  top: 2.8868px;
  left: 0;
  width: 390.0000px;
  height: 225.1666px;
  z-index: 2;
  background: inherit;
}
.glossy{

   background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 40px;
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);

}