/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #54a2ff;;
  color: black;
  font-family: 'Atkinson';
}

  /* Img. Hover */  
  /* img {
        opacity: 1;
        filter: alpha(opacity=40);
    }
    
    img:hover {
        opacity: 0.5;
        filter: alpha(opacity=100);
    } */

.homePage {
    
    background-color: #54a2ff;
    background-image: url(https://plastigon.neocities.org/assets/siteBG.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100vh;
    
    overflow-y: hidden; /* Disable scrollbar */
    
    height: 100vh;
     
    /* GRADIENT */
    box-shadow: inset 4vh 0 2vh -2vh #54a2ff, inset -4vh 0 2vh -2vh #54a2ff; /* vh ignores zoom level */
  
    align-items: start;
    margin: 0;
  
    transition: 0.1s filter;
  }
  

 .dropShadow {
  /* Horizontal offset | Vertical offset | Blur radius | Shadow color */
  filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.5));
  }


.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  
  0% {
    opacity: 1; /* Visible */
  }
  
  50% {
    opacity: 0; /* Hidden */
  }
  
  100% {
    opacity: 1; /* Visible */
  }
  
}
  
.logoContainer {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  flex-wrap: wrap;
  height: 100px;
  /*max-width: 80px;*/ /* Turn on to see the wrap */
}

  
  

.centerText
  {
   text-align: center; 
   vertical-align: middle;
   top: 25%;
   left: 25%;
   position: absolute;
   filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.5));

  }
  
.middleText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50) translateY(-50);
  }
  
.imgContainer {
  position: relative;
  display: inline-block;
  }
  
.imgContainerImg {
  display: block;
  width:50%;
  height:auto; 
  }

.button{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the text to the middle of the button */
  color: white; /* Color of text */
  background-color: rgba(0, 0, 0, 0.7); /* Color of button */
  padding: 10px 20px;
  font-size: 20px;
  text-align: center;
  }
  
  .button2{
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the text to the middle of the page */
  filter: drop-shadow(0px 3px 0px rgba(0, 0, 0, 0.5));
  padding: 10px 20px;
  }
  

  
.timerImg {
 position: absolute;
 top: 10px;
 left: 88%;
 filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.2));
 z-index:0;
 text-align: center;

}

/* Container for Timer */
.container {
  position: absolute;
  top: 10px;
  left: 88%;
  text-align: center;
  color: white;
  
  
  }

/* Positions text to middle of timer */
.timerText {
  font-family: "Font2";
  color: #3c4d41;
  font-size: 20px;
  text-shadow: 0px 2px #41786c;
  position: absolute;
  top: 54%;
  left: 50%;
  z-index:1;
  transform: translate(-50%, -50%);
  
}

.charDropShadow {
  /* Horizontal offset | Vertical offset | Blur radius | Shadow color */
  filter: drop-shadow(0px 3px 0px rgba(57, 76, 63, 0.5));
  }

.hoverImg {
  opacity: 1.0;
  }
  
.hoverImg:hover {
  opacity: 0.5;
  }


/* Timer Text Variant for 'Visitor' title */
.timerVisitor {
  font-family: "Font2";
  color: #3c4d41;
  font-size: 10px;
  text-shadow: 0px 1px #41786c;
  position: absolute;
  top: 19%;
  left: 50%;
  z-index:1;
  transform: translate(-50%, -50%); 
  }
  
.spider {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%); 
  }
  
/*.spider:hover {
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.8);
    border-color: #0096ff; 
}*/
  

@media (min-aspect-ratio: 2.3) {
  .homePage{
    background-size: 100vw auto;
    }
  }