body {
		background: #000000;
        font-family: "Courier New", monospace;
        height: 100vh;
        background: linear-gradient(45deg, hsl(0, 0%, 0%), hsl(0, 0%, 22%));
        overflow: hidden; /* prevent scrolling */
	}

    .product_menu{
			position: absolute;
			left:50%;
			top:40px;
		
            background-image: linear-gradient( to bottom right, rgba(207, 207, 207, 0.854), rgb(255, 255, 255) );

            /* frosted edges */
            border: 1px solid rgba(255,255,255,0.35);
            box-shadow:
                0 10px 30px rgba(255, 255, 255, 0.25),
                inset 0 1px 0 rgba(190, 190, 190, 0.522);

            transform: translateX(-50%);
			border-radius: 10px;
			cursor: pointer;
			width: 80%;

            padding: 20px;
    }

    .h_products{
        color:rgb(40, 40, 40);
        text-transform: uppercase;
    }


    /* Star layer on top */
.stars {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'> <circle cx='10' cy='10' r='1' fill='%23F00'/><circle cx='90' cy='60' r='1' fill='%23FF0'/><circle cx='30' cy='80' r='1' fill='%230CF'/></svg>") repeat;

    background-size: 100px 100px;
    pointer-events: none; 
    /*animation: moveStars 20s linear infinite;*/
    animation: twinkle 5s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0%   { opacity: 0.4; }
  100% { opacity: 1; }
}

/* Animate the stars drifting */


@keyframes moveStars {
    0%   { transform: translate(0, 0); }   /* start */
    50%  { transform: translate(10px, 10px); } /* halfway */
    100% { transform: translate(0, 0); }   /* back to start */
}


/* A comet */
.comet {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 2px;
  height: 100px;
  background: linear-gradient(white, rgba(255,255,255,0));
  transform: rotate(135deg);
  opacity: 0;
  animation: fly 5s linear infinite;
}

.variation{

    top: -50px;
    left: 40%;
    animation: fly_var 5s linear infinite;

}

@keyframes fly {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1; /* comet appears */
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(800px, 800px) rotate(135deg);
    opacity: 0; /* comet fades out */
  }
}

@keyframes fly_var {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1; /* comet appears */
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(1000px, 1000px) rotate(135deg);
    opacity: 0; /* comet fades out */
  }
}