/*
                 _|_
                 |
             .-'''''-.
          .-'         '-.
       .-'  :::::_:::::  '-.
   ___/ ==:...:::-:::...:== \___
  /_____________________________\
':'-._________________________.-' _
 ':::\ @-,`-[-][-^-][-]-`,-@ /  _| |_
  '::| .-------------------. | |_ @ _|
   ::|=|*   ___  _  ___   *|=|'.| |
   ':| |'   ))_) )) ))_)  '| |::.^|
    :|=|'  ((`\ (( ((     '|=|::::::.
     | |'        _        '| |:::::::.
     |=|'      _| |_      '|=|':::::.
     | |'  ( 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 {
    padding: 10%;
    align-content: center;
    background-image: url(images/moonBG.jpg);
	background-repeat: no-repeat;	
	background-color: black;
    justify-content: center;
    align-items: center;
    color: white;
}


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: 5em;
   transition: 0.5s;
   opacity: 1;
}

ul li:hover a i {
   transform: translateY(-40%);
}

ul li a span {
   position: relative;
   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));
}