body {
  background-color: rgba(255, 168, 168, 1); 
  color: white; 
  text-shadow: 0px 0px 10px grey; 
  margin-top: 110px
}

#header {
  position: fixed;
  top: 2%;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: rgba(134, 255, 137, 0.5);
  height: 70px;
  width: fit-content;
  border: 5px solid rgba(255, 255, 255);
  border-radius: 60px;
  backdrop-filter: blur(5px) brightness(0.7);
  color: white;
  font-family: consolas;
  box-shadow:0 0 4px rgba(0,0,0,0.7), 0 0 12px rgba(0,0,0,0.5);
  justify-content: center;
  display: flex;
  margin: 0px;
  padding-left: 10px;
  padding-right: 10px;
  align-items: center;
  white-space: nowrap;
  transition: 0.2s ease;
  }
  
  #header:hover {
    transform: translate(-50%, -5px);
    box-shadow:0 3px 4px rgba(0,0,0,0.7), 0 3px 12px rgba(0,0,0,0.5);
    backdrop-filter: blur(6px) brightness(0.7);
  }



 .title_global {
   font-size: 70px;
   margin: 0px;
   text-align: center;
   font-family: consolas;
   font-weight: normal;
 }
 
 .pg_normal_large {
  font-size:24px;
  color: white;
  font-family: consolas;
  text-align: center;
 }
 
 .pg_left_smaller {
  font-size:18px;
  color: white;
  font-family: consolas; /*for now*/
  grid-template-columns: repeat(autofit, minmax(160px, 1fr));
 }
 
 .gap_top_large {
   margin-top: 120px;
 }
 
 .gap_general_large {
   margin: 120px;
 }
 
 .gap_botom_large {
   margin-bottom: 120px;
 }
 
 .picture_batch_container {
   display: grid;
  height: 600px;
  width: 600px;
  border: 5px solid white;
  background-color: grey;
  margin: auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  grid-auto-rows: 200px;
  box-sizing: content-box;
 }
 
 .picture_batch_container_img { /*i know this is gonna have a comment is js on it, but when i move this to the full site make it for the full archive grid, not the batch*/
   width: 200px;
   height: 200px;
   object-fit: cover;
 }
 
 .img_container_invis {
 position: relative;
 height: fit-content;
 width: fit-content;
 }
 
  
  #img_comment_icon {
   width: 30px;
   height: 30px;
   font-size: 10px;
   font-family: consolas;
   position: absolute;
   display: none;
   text-shadow: 0px 0px 5px black;
  object-fit: contain;
  Top: 5px;
  right: 5px;
  z-index: 10;
 }
 
 #moving_dot {
   position: absolute;
   top: 30%;
   left: 60%;
   cursor: pointer;
   transition: left 0.8s, top 0.8s, transform 0.2s, filter 0.2s;
   transform-origin: center bottom;
   height: 141px;
   width: 100px;
 }
 
 #random_thought_box {
  height: 100px;
  width: 300px;
  background-color: rgba(134, 255, 137, 0.5);
  border-radius: 25px;
  display: flex;
  border: 5px solid white;
    justify-content: center;
    align-items: center;
    box-shadow: 4px 4px 1x rgba(0,0,0,1);
       top: 80%;
    left: 60%;
    animation: drift 3s ease infinite;
    position: absolute;
    }
 
#random_thought {
  color: white;
  font-size: 100%;
  font-family: consolas;
  padding: 0px;
  text-align: center;
}

@keyframes drift {
  0% { transform: translate(0px, 0px); }
  50% { transform: translate(0px, -10px); }
  100% { transform: translate(0px, 0px); }
}

@keyframes shake {
  0% { transform: translate(-2px, 0px); }
  100% { transform: translate(2px, 0px); }
}


#img_comment {
  height: fit-content;
  width: fit-content;
  border: 5px solid red;
  background-color: rgba(255, 255, 255, 1);
}