body{
  background-color: rgb(34, 34, 34);
  scrollbar-color: transparent rgb(95, 95, 95);
  scrollbar-color: aqua rgb(44, 44, 44);
}
::selection{
  background-color: rgb(199, 206, 0);
  color:black;
}




/* not using input for the body, discovered what sike shit textarea can do. ppl can resize nall h */
input{
  display: block;
  color:rgb(184, 184, 184);
  padding: 5px 5px;
  background-color: transparent;
  border:1px solid rgb(66, 66, 66);
  border-radius: 4px;
  margin: 30px 10px;

  min-width: clamp(50px, 100px, 200px);

   max-width: 40vh; 
}
input:focus{
  color:white;
  background-color: transparent;
  border: none;
  outline: none;
  border-radius: 5px;
  box-shadow: 5px 5px 35px rgba(157, 157, 157, 0.289);
}


#body-input{
  overflow-y: auto;
  overflow-wrap: normal;
}

textarea{
  display: block;
  background-color: transparent;
  color:rgb(184, 184, 184);
  padding: 5px 5px;
  margin: 30px 10px;
  border:1px solid rgb(66, 66, 66);
  border-radius: 4px;
  min-width: clamp(50px, 100px, 200px);

  /* max-width: 40vh; */
}
textarea:focus{
  color:white;
  background-color: transparent;
  border: none;
  outline: none;
  border-radius: 5px;
  box-shadow: 5px 5px 35px rgba(157, 157, 157, 0.289);
}

.button-wrapper{
  display: inline-block;  /* Keeps it in flow without layout issues */
  transform-origin: center;
}

#create-btn ,  #clear-btn{
  font-weight:550;
  transition: background-color .8s , color .8s;
} 
#create-btn:hover{
  background-color: transparent;
  color:yellow;
  animation: jump 1s  ease-in-out ;
}
#clear-btn:hover{
  background-color: transparent;
  color:yellow;
  animation: shake  normal 1s ease-in-out;
}


.outer-container{
  overflow:hidden;
  margin-bottom: 0px;
}

.bunch-ofwords{
  margin-top: 10px;
  color:white;
  font-weight: 300; 
  /* adding the yellow so it doesnt overpower on the user with the glow on both the title and the texts */
  text-shadow:  1px 1px 3px rgb(255, 218, 85),
  1px 1px 8px rgb(133, 133, 133),
  2px 2px 10px rgb(254, 245, 118);
  /* max-width: clamp(500px, 100px, 200px); */
  font-size: clamp(15px, 25px, 30px);
} 

.app-title{
  margin-top: 10px;
  color:white;
  font-weight: 500;
  text-shadow:  1px 1px 5px rgb(255, 255, 255),
  2px 2px 10px rgb(89, 89, 89),
  3px 3px 15px rgb(250,250,250);
  font-size: clamp(15px, 25px, 30px);

  /* max-width: clamp(500px, 200px, 100px); */
  /* animation: infinite ease-in-out glow 8s; */
}

@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes shake{
  0% { transform: translateX(0);
  scale:1; }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); scale:1;}
  
}

@keyframes glow{
  0%{
    scale:1;
    text-shadow:  1px 1px 10px rgb(255, 255, 255),
  2px 2px 20px rgb(101, 101, 101),
  3px 3px 25px rgb(250,250,250);
  }
  50%{
    scale: 1.1; 
    text-shadow:  1px 1px 10px rgb(244, 130, 130),
  2px 2px 20px rgb(135, 16, 16),
  3px 3px 25px rgb(73, 0, 0);
  }
  100%{
    scale:1;
    text-shadow:  1px 1px 10px rgb(255, 255, 255),
  2px 2px 20px rgb(101, 101, 101),
  3px 3px 25px rgb(250,250,250);
  }
}

.button-wrapper{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.input-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vh;
}


.cards-container{
  margin: 40px 05px;
  display:grid;
  grid-template-columns:  1fr 1fr 1fr;
  gap:30px;
  /* margin-bottom: 2px; */
  /* border: 3px solid red; */

}
.flash-div{
  display:block;
  position: absolute;
}

.display-bigger{
  
}

@media (max-width:500px) and (min-width:100px){
 .cards-container{
  grid-template-columns:  1fr ;
 }
 input{
  max-width: 100px;
 }
}

@media (min-width:500px){
  .cards-container{
   grid-template-columns:  1fr 1fr;
  }
 }

 @media (min-width:850px){
  .cards-container{
   grid-template-columns:  1fr 1fr 1fr ;
  }
 }
 

 .bg-mnt-img{
  max-width: 100vh;
  width:clamp(50vh,80vh,100vh);
  height:65vh;
  /* bottom:0;
  left:20; */
  object-fit: cover;
  z-index:-1;
  position: fixed;
 }