body{
   background: black;
   /* background-color: #121518; */
   color: lightgrey;
   margin: 0;
   padding: 0;
   font-size: 24px;
   font-size: 2.4vmin;
   /* font-family: Garamond, serif; */
   /* font-family: 'Trebuchet MS', sans-serif; */
   font-family: Tahoma, Verdana, sans-serif;
   
}
p {
   font-size: 1em;
   padding: 0 30px;
}
a:visited, a:link{
   text-decoration: none;
   color: lightgrey;
 }
.todo {
   padding-bottom: 55px;
}
.todo::after {
   content: "Todo: Touch ups  &  Steam Dev setup stuff. - 12/1/24";
   font-size: 1.3vw;
   font-weight: lighter;
   /* font-style: italic; */
   position: absolute;
   /* margin: 15px; */
   margin-top: 15px;
   padding: 6px;
   text-shadow: 2px 2px 4px rgb(0, 255, 100, 0.5);
   border-radius: 12px;
   box-shadow: 0px 2px 22px #000000;
   background-color: rgba(0, 0, 0, 0.5);
}

 /*
 <!------------>
 <!-- FOOTER -->
 */
.footer {
   position: relative;
   overflow: hidden;
   /* position: fixed; */
   /* bottom: 0; */
   /* width: 100%; */
   /* display: inline-block; */
   /* margin: 0; padding: 0; */
   padding-top: 15px;
   padding-bottom: 70px;
   background-color: rgba(23, 42, 66, 1);
   
}
.footer p {
   padding: 0; margin: 0;
   /* padding-bottom: 15px; */
   padding-right: 30px;
   /* padding: 15px 0 15px 15px; */
   display: block;
   /* width: 100%; */
   /* font-size: 0.75em; */
   /* font-size: 3vmin; */
}
.footer img {
   display: block;
   margin-top: 15px;
   max-width: 160px;
   /* border: 4px solid white; */
}
.pp img:first-child {
   float: left;
}
.pp img.pp-logo {
   /* float: none; */
   /* max-width: none; */
   padding-top: 15px;
}
.pp {
   width: 455px;
   background-color: white;
   border-radius: 15px;
   border-bottom-left-radius: 0;
}
.pp a:hover {
   color: blue !important;
}
.venmeo p {
   font-weight: bolder;
   font-size: 40px;
   /* font-size: 4vmin; */
   color: #333;
}
.footer .borderLine {
   display: none;
}
.footer .grid-container {
   margin-right: 0;
   padding-bottom: 50px;
   background: none !important;
}
.footer .footer_donate {
   cursor: pointer;
   display: block;
   position: fixed;
   padding-left: 30px; padding-bottom: 10px; padding-top: 5px;
   bottom: 0; right: 0; left: 0; margin: 0;
   background-color: rgba(23, 42, 66, 0.95);
   border-top: 2px solid lightgrey;

   /* Animate donate bar when hover over  */
   transition: all 0.1s ease-in;
}
/* Animate donate bar when hover over  */
.footer .footer_donate:hover {
   background-color: rgba(16, 29, 46, 0.9);
   color:rgb(25, 255, 50);
}
.footer .footer_donate p{
   vertical-align: middle;
   font-weight: lighter;
   font-size: initial;
   display: inline-block;
   padding: 0; margin-left: 15px;
}
@media only screen and (max-width: 1400px) {
   .footer .grid-container {
      grid-template-columns: auto;
   }
   .footer .borderLine {
      display: block;
   }
}
.footer .btc-logo {
   display: inline;
   /* max-width: 50px; */
   max-height: 50px;
   vertical-align: middle;
   margin: 0; padding: 0;

}
.footer .btc-p {
   /* position: relative; */
   display: block;
   /* margin-top: 10px; */
   margin-bottom: 10px;
   /* color: blueviolet; */
}

 /*
 <!------------>
 <!-- Header -->
 */
header {
   font-size: 10vw;
   font-weight: bolder;
   position: absolute;
   background-color: rgba(0, 0, 0, 0.3);
   padding: 1vw;
   margin: 2vw;
   /* text-shadow: 2px 2px black; */
   text-shadow: 2px 2px 4px #000000;
   border-radius: 12px;
   box-shadow: 2px 2px 22px #000000;
   z-index: 10;
}
header::after {
   content: "Coming Soon";
   font-size: 2vw;
   color: lightgrey;
   position: absolute;
   /* width: 110%; */
   /* height: 80px; */
   top: 0.3vw; right: 1.5vw;
   margin-left: auto; margin-right: auto;
   /* box-shadow: 0px -30px 30px 0 rgba(0, 0, 0, 1) inset; */
}
#TimerCD {
 /* color: white; */
 font-size: 30px;
 font-size: 3vmin;
 font-weight: lighter;
 margin: 0; padding: 0;
 margin-right: 1vmin; margin-top: -1vmin;
 text-align: end;
}
h1 {
   font-size: 32px;
   font-size: 4vmin;
   margin: 30px;
}

#header_banner{
   position: relative;
   width: 100%;
   height: 33vw;
   background-image: url("../images/Show_Ai_Flag_Disc.jpg");
   background-size: cover;
   background-repeat: no-repeat;
   /* background-color: brown; */
   background-position: 0% 10%, center;
   /* box-shadow: 0px -15px 20px 0px rgba(0, 0, 0, 1) inset; */
   z-index: 9;
   overflow-x: hidden;
   /* transition: background-image 0.2s ease-in-out; */
   animation: bg-slide 20s linear infinite;
   animation-direction: alternate-reverse;
   animation-delay: 2s;
}
#header_banner::after {
   position: absolute;
   width: 110%;
   height: 80px;
   content: "";
   bottom: 0; left: 0; right: 0;
   margin-left: auto; margin-right: auto;
   box-shadow: 0px -30px 30px 0 rgba(0, 0, 0, 1) inset;

}
@keyframes bg-slide {
   to { 
      /* transform: translateY(0); */
      background-position: 0% 10%, center;
   }
   from { 
      /* transform: translateY(-50%);  */
      background-position: 0% 87%, center;
   }
}
.borderLine{
   border: 1px solid lightgrey;
   margin: 30px 0;
   padding: 0;
   /* width: 50%; */
}

.go-get-game {
   float: right; 
   background-color: rgba(23, 42, 66, 1);
   margin: 30px 30px; 
   padding: 15px; 
   padding-bottom: 10px; 
   border-radius: 30px;
}
.go-get-game img {
   width: 40px;
   width: 10vmin;
}
.go-get-game span {
   font-size: 1.75vmin;
   font-weight: lighter;
}

.energyBar {
   width: 100%;
   height: 7vw;
   background-image: url("../images/Energy.jpg");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   border: 2px solid lightgrey;
   margin-bottom: 10px;
}
.ammo_display {
   width: 25%;
   height: 30vw;
   max-width: 400px;
   max-height: 550px;
   background-image: url("../images/ammo_display.jpg");
   background-size:contain;
   background-repeat: no-repeat;
   background-position: center;
   float: right;
   margin-left: 30px;
   border: 2px solid lightgrey;
   margin-bottom: 10px;
}
.grid-container {
   display: grid;
   grid-template-columns: auto auto auto;
   background-color: black;
   margin: 0 30px;
 }
 .gc4 {
   grid-template-columns: auto auto auto auto;
 }
 .grid-item {
   /* background-color: rgba(255, 255, 255, 0.8); */
   /* border: 1px solid rgba(0, 0, 0, 0.8); */
   background-color: black;
   border: 1px solid lightgrey;
   text-align: center;

 }
 .grid-item img {
   width: 100%;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   display: block;
   cursor: pointer;
 }

/* -------------- */
/*  PoP Up IMAGES */
/* -------------- */
 #imgPopUp {
   position: fixed;
   width: 95%;
   max-width: 1475px;
   top: 2%;
   left: 50%;
   transform: translate(-50%, 0%);
   /* background-color: brown; */
   border: 4px solid lightgrey;
   border-radius: 50px;
   margin: 0; padding: 0;
 }
 #imgPopUp img {
   display: block;
   width: 100%;
   max-width: 1475px;
   margin: 0; padding: 0;
   border-radius: 50px;
 }
 @media only screen and (orientation: landscape) {
   /* body { background-color: lightblue; } */
   #imgPopUp {
      width: auto;
      height: 95%;
      top: 1%;
   }
   #imgPopUp img {
      height: 100%;
      width: auto;
   }
 }

/* ------------------- */
 /* FADE IN For IMAGES */
 /* ------------------- */
 .fade-first-load {
   opacity: 0;
   z-index: -100;
   pointer-events: none;
 }
 .fade-in-image {
   animation: fadeIn 1s;
   animation-fill-mode: forwards;
   /* display: block; */
   cursor: pointer;
   z-index: 100;
}
 .fade-out-image {
   animation: fadeOut 1s;
   animation-fill-mode: forwards;
   pointer-events: none;
}
 @keyframes fadeIn {
   0% { opacity: 0; }
   100% { opacity: 1;  }
 }
@keyframes fadeOut {
   0% { opacity: 1; }
   100% { opacity: 0; }
 }

@media only screen and (max-width: 768px) {
   body{
      font-size: 4vmin;
   }
   .footer .grid-container {
      margin-left: 15px;
      margin-right: 0;
   }
   .footer {
      padding-bottom: 10px;
   }
   .footer p {
      padding-right: 15px;
   }
   /* pp is paypal */
   .footer .pp {
      width: 85%;
      /* width: 285px; */
   }
   .footer .pp .pp-logo {
      padding-top: 0;
   }
   .footer .footer_donate {
      /* display: block; */
      position: relative;
      padding-left: 0;
      padding-right: 0 !important;
      padding-top: 15px !important;
      text-align: center;
   }
   .footer .footer_donate span {
      display: flex;
      justify-content: center;
   }
   .footer .footer_donate span a img {
      margin-left: 0!important; margin-right: 0!important;
      padding-left: 20px !important; padding-right: 20px !important;
      margin-top: 15px !important;
   }
   .go-get-game {
      float: none !important;
      position: relative;
      display: flex;
      /* justify-self: center; */
      justify-content: center;
      align-items: center;

      padding: 0.75vmin 0;
      margin: 0 30px;
      /* text-align: center;
      word-wrap: break-word; */

      /* ------------------------ */
      /* justify-content: center; */
      /* justify-items: center; */
      /* align-items: center; */
      /* text-align: center; */
      /* vertical-align: middle; */
      /* margin: 0 !important; */
   }
   .go-get-game span {
      font-size: 3vmin;
   }
   .go-get-game img {
      padding-top: 5px;
   }
   p img {
      border-color: #000000 !important;
   }
   .gc4 {
      grid-template-columns: auto;
      margin: 0;
    }
    .gc4 video {
      margin-bottom: 30px;
    }
}