body {
  	color: black;
  	background: black;
  	min-height: 100vh;
  	margin:0;
  	background-image: url(assets/background.png);
  	background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  
  
   @font-face {
    font-family:myFonts;
	  src: url(fonts/alagard.ttf);
  }
  
  .popup {
  	position: relative;
  	display: inline-block;
    cursor: pointer;
  	left:8vw;
  	top:13vw;
  }	
  
  .popup .popuptext {
   	visibility: hidden;
    color:white;
  	font-size: 300%;
  	padding: 50px;
  	font-family: myFonts;
  	position:absolute;
  	left:3vw; 
  	top:-5vw;
  }
  
  .popup .show {
    visibility: visible;
  }
  

 .text {
    overflow: auto;
  	width: 480px;
	  height: 350px;
  	visibility: visible;
  	background-image: url(assets/phone.png);
  	background-repeat: no-repeat;
  	border-color: grey;
    color:white;
  	font-size: 100%;
  	padding: 30px;
  	font-family: myFonts;
  	position: absolute;
  	text-align: center;
  	left: 35%;
  	top: 30%;
  }
  
  .boxcat{
  	background-image: url(assets/box.png);
  	background-repeat: no-repeat;
  	position: absolute;
  	bottom:0vw;
  	left:1vw;
  	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;
  }