/* FONT */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&family=Fira+Sans:wght@300;400;500;600;700&family=Gabarito:wght@400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap'); 

@import "https://www.nerdfonts.com/assets/css/webfont.css";


body{
  background-color: #011627;
  font-family: "Roboto Mono", "Roboto Mono", "Vazirmatn", monospace;;
  font-size: 17px;
}

div{
  margin-bottom: 15px;
}

.projectLinks{
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #00000000;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #44444400;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


.banner{
  color: rgb(76, 121, 76);
  /* ADD CODE TO KEEP IN SPACES */
  white-space: pre;
  font-family: 'Courier New', Courier, monospace;
  font-size: 21px;
  user-select: none;
}

.information {
  display: flex;
  position: fixed;
  top: 95%;
  left: 83%;
  z-index: 999; 
}

.information a{
  margin-left: 30px;
}


.emailButton{
  background-color: transparent;
  border: none;
  font-size: 17px;
  font-family: "Roboto Mono", "Roboto Mono", "Vazirmatn", monospace;;
  cursor: pointer;
}


.textToCopy {
  visibility: hidden; /* Hide the element */
  position: absolute; /* Position the element absolutely */
  left: -9999px; /* Move the element off-screen horizontally */
  top: -9999px; /* Move the element off-screen vertically */
}

#output-container{
  color: rgb(201, 143, 34);
  white-space: pre;
}

#input-container{
  color: rgb(76, 121, 76);
}



#input-container input{
  color: rgb(76, 121, 76);
  border: none;
  background-color: transparent;
  caret-color: rgb(0, 0, 0);
  animation: cursor-blink 1.5s steps(2) infinite;
  outline: none;
  font-size: 16px;
  font-weight: bold;
}

.glowText{
  color: #ffb354;
  text-shadow: 0 0 10px #ffa03b, 0 0 20px #ffa03b, 0 0 30px #ffa03b;
  user-select: none;
}



/* Add proper sizing for devices */
/* Ensure proper avaliability for devices */

@media (max-width: 1000px) {
  .information{
    top: 95%;
    left: 67%;
  }
}
@media (max-width: 900px) {
  .information{
    top: 95%;
    left: 57%;
  }
}
@media (max-width: 768px) {
  .information{
    top: 95%;
    left: 51%;
  }
}
@media (max-width: 480px) {
  .information{
    top: 95%;
    left: 30%;
  }
}