html,
body {
/*   font-family: Verdana, Geneva, Tahoma, sans-serif; */
   font-family: open-sans;
   background-color: #222831;
   color: #eeeeee;
   /* color: #000000; */
   height: 100%;
   margin: auto;
   display: flex;
   align-items: center;
   text-align: center;
     /* margin: 0; */
  overflow: hidden;
  background: -webkit-radial-gradient( left bottom, circle farthest-corner, #e1fd3e, #174709);
  background: -moz-radial-gradient( left bottom, circle farthest-corner, #e1fd3e, #174709);
  background: -ms-radial-gradient( left bottom, circle farthest-corner, #e1fd3e, #174709);
  background: -o-radial-gradient( left bottom, circle farthest-corner, #e1fd3e, #174709);
  background: radial-gradient( farthest-corner circle at left bottom, #e1fd3e, #174709);
}

h1 {
   font-size: 2.3rem;
   text-align: center;
   font-weight: bold;
   
     text-shadow: 0px 0px 5px black;
   /* background-color: #222831; */
    /* background: rgb(0, 0, 0); */
    /* background: rgba(0, 0, 0, 0.6); */
    /* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); */
    /* -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; */

      /* -webkit-text-stroke: 1px black; */
   color: white;

}

ul {
   display: block;
   list-style-type: disc;
   margin-block-start: 1em;
   margin-block-end: 1em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   padding-inline-start: 0px;
   
        /* text-shadow: 0px 0px 5px black; */

   
   background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

li {
   display: inline-block;
   font-size: 1.3rem;
   list-style-type: none;
   padding: 1em;
   text-transform: capitalize;
   color: #00adb5;
      /* color: #eeeeee; */

}

li span {
   color: #eeeeee;
   text-align: center;
   display: block;
   font-size: 4rem;
   font-weight: bold;
}

@media screen and (max-width: 992px) {
   h1 {
      font-size: 2rem;
   }

   li {
      font-size: 1rem;
      padding: 0.75em;
   }

   li span {
      font-size: 3rem;
   }

   small {
      font-size: x-small;
   }
}

@media screen and (max-width: 600px) {
   h1 {
      font-size: 1.4rem;
   }

   li {
      font-size: 0.7rem;
      padding: 0.5em;
   }

   li span {
      font-size: 2rem;
   }

   small {
      font-size: xx-small;
   }
}

#app {
    z-index: 10;
    position: relative;
	/* background-color: #222831; */
	/* color: rgb(0, 255, 255);  */
	/* mix-blend-mode: difference; */
	
}

#c {
    position:absolute;
    top:0;
    left:0;
    
}