body {
    font-family: "Times New Roman", serif;
  	color: black;
  	background: black;
  	min-height: 100vh;
  	margin: 0px;
  	background-image: url(assets/background1.png);
  	background-repeat: no-repeat;
    background-size: 100% 130%;
	  background-position-y: -50%;
    overflow-x: hidden;
    filter:  hue-rotate(0deg) grayscale(0) brightness(1);
  }
  
    
  .text {
	position:relative;
	padding: 10px;
  font-size: 1.5rem;
	color: white;
  }
	/*#ed1199*/
	
	
   @font-face {
    font-family:myFonts;
	  src: url(fonts/alagard.ttf);
  }
  
  #container {
  	width: 220%;
    height: 3rem;
    font-size:100%;
    font-family:;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }
  
  #container .scroll {
    animation: loop 30s linear infinite; 
  }
  
  @keyframes loop {
	0% {transform: translateX(60%);}
	100% {transform: translateX(-60%);}
  }
  
 /* #container :hover {
    animation: stop ease;
  }
  */
  
  .popup {
  	position: relative;
  	display: inline-block;
    cursor: pointer;
  	left:14vw;
  	top:-11vw;
  }	
  
  .popup .popuptext {
   	visibility: hidden;
    color:white;
    white-space: nowrap;
  	font-size: 1.5rem;
  	padding: 50px;
  	font-family:;
  	position:absolute;
  	left:3vw; 
  	top:0vw;
  }
  
  .popup .show {
    visibility: visible;
  }
  
  .text2 {
    overflow: auto;
  	width: 300px;
	height: 350px;
  	visibility: visible;
    color:white;
  	font-size: 100%;
  	padding: 50px;
  	font-family:;
  	position: absolute;
  	text-align: right;
  	right: 0%;
	bottom: -100%;
  }
  
  ::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
  
 
  .text3 {
    display:none; 
    overflow: auto;
    color:white;
  	font-size: 100%;
  	padding: 30px;
  	font-family: myFonts;
  	position: absolute;
  	text-align: center;
  	left:5vw;
  	right:5vw;
  }
  
  .boxcat{
    cursor: grabbing;
  	position: absolute;
  	top:0vw;
  	left:0vw;
  	display: grid;
  	grid-template-columns:10px 40px 100px;
  	grid-template-rows:30px 90px;
  }
  
  .cell {
    opacity: 0;
    grid-column:2/4; 
    grid-row:1/2;
	z-index: 2;
  }
	  
   
  .cell2 {
    opacity: 0;
    grid-column:2/3; 
    grid-row:1/3;
  	z-index: 2;
  } 
   
  .cell3 {
    opacity: 0;
    grid-column:2/4; 
    grid-row:1/3; 
  	z-index: 1;
  } 
  
  .cell:hover {
    opacity:1;
  }
   
  .cell2:hover {
	  opacity:1;
  }
   
  .cell3:hover {
  	opacity:1;
  }
  
  @media screen and (max-width:800px){
    
    
    html {
    max-width: 100vw;
    overflow: hidden;
    overflow-y: auto;
  }
    
    html ::-webkit-scrollbar {
    display: none;
  }

    
    #header{
      max-width:100%;
    }
    
   #container {
  	width: 600%;
  	font-size:10%;
  }
    .text3{
       display: flex;
  justify-content: center;
  align-items: center;
    }
    
    .text2{
      display:none;
    }
    
    .boxcat{
      display:none;
    }
    
    .popup{
      display:none;
    }
    
    
    
    
    #star {
      z-index:999;
      height:30px;
      width:30px;
      position:absolute;
      padding:20px;
  	  bottom:10%;
  	  left:30%;
    }
    
    #cube {
      display:none;
      position:absolute;
      padding:0px;
  	  top:0%;
  	  right:0px;
  	  left:10px;
  	  bottom:-80%;
  	  height:50px;
  	  width:50px;
    }
    
     #alien {
      display:none;
     }
     
     #container {
      font-family: myFonts;
      font-size: 80%;
     }
    
  }