/*
                 _|_
                 |
             .-'''''-.
          .-'         '-.
       .-'  :::::_:::::  '-.
   ___/ ==:...:::-:::...:== \___
  /_____________________________\
':'-._________________________.-' _
 ':::\ @-,`-[-][-^-][-]-`,-@ /  _| |_
  '::| .-------------------. | |_ @ _|
   ::|=|*   ___  _  ___   *|=|'.| |
   ':| |'   ))_) )) ))_)  '| |::.^|
    :|=|'  ((`\ (( ((     '|=|::::::.
     | |'        _        '| |:::::::.
     |=|'      _| |_      '|=|':::::.
     | |'  ( GHOSTVEIL ) '| | ':::'
     |=|*  )   |_|    (  *|=| '::'
     | '-------------------' .::::'
     |_____________________.::::::'
   .'___________________.::::::''
   |_______________.::::'':::'''
 .'_____________.::::::''::::''
            .:::'''' .'::::'
         .:::::''':.   .:::::'
WELCOME TO THE GRAVEYARD CODE for CSS!

Thank you for being interested in my website code.
I wanted something simple, but also combine a few
favorite features from some other templates. Lucky
for you I also love code commenting so if you want
to use this code, please feel free to do so and
follow along easily!

{ This site was hand coded}
*/
	/* You can import your own google fonts just paste is here. You can have more than one font (this is 2) */
@import url('https://fonts.googleapis.com/css2?family=Fondamento:ital@0;1&family=Jacquard+24&display=swap');





/* ------------------------------------- */


body {
    align-content: center;
   background-image: url(images/moonBG.jpg);
	background-repeat: no-repeat;
	background-color: black;
	background-size: auto;
	 justify-content: center;
   align-items: center;
   color: white;
 
}
ul {
   display: inline-block;
   
}
ul li {
    /* Distance and horizontal inline center */
     display: inline-block;
     padding: 20px;
   cursor: pointer;
   transition: 0.5s;
   list-style-type: none;
}


ul li a {
   text-decoration: none;
   z-index: 10;
   /* Makes text underneath */
   display: flex;
   justify-content: center;
   align-items: center;
}
ul li a i {
   font-size: 2em;
   transition: 0.5s;
   
   opacity: 1;
}
ul li:hover a i {

   transform: translateY(-40%);
}
ul li a span {
   position: absolute;
   font-family: "Fondamento", sans-serif;
   color: var(--clr);
   transition: 0.5s;
   transform: scale(0) translateY(200%);
   bottom: 33%;
}
ul li:hover a span {
   opacity: 1;
   transform: scale(1) translateY(100%);
}
ul li:hover a i,
ul li a span {
   filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));
}