@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&family=Gruppo&family=Inter:wght@100;300;400;500;600;700;800;900&family=Nunito+Sans:wght@200;300;400;500;600;800;900;1000&family=Nunito:wght@200;300;400;500&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  font-family: 'nunito' !important;
}
body{
  width: 98vw;
  height: 99vh;
  max-width: 100% !important;
  max-height: 100% !important;
  background-color: #111111;
}
.heading span{
    font-size: large;
    margin: 0.2rem;
    margin-top: 0.6rem;
    color: snow;
}
.heading{
    user-select: none;
    display: flex;
}
.heading img{
  background-blend-mode: multiply;
}
/* screen setup */
.display{
  height: 55%;
  display: grid;
  place-items: center;
}
#screen{
  user-select: none !important;
  width: 90%;
  font-size: 7rem;
  border: none;
  outline: none;
  text-align: center;
  background-color: #111111;
  color: white;  
}
.displayGlass{
  width: 90%;
  height: 40% !important;
  position: absolute;
  background: transparent;
  opacity: 0;
}

/* button setup */

.buttons{
  display: grid;
  place-items: center;
}
#up{
  font-size: 5rem;
  height: 13rem;
  width: 13rem;
  /* background-color: #01301C; */
  background: #111111;
  font-size: 8rem;
  border-radius: 50%;
  padding-bottom: 2rem;
  outline: none;
  border: 5px solid #111111;
  transition: background-color ease 10ms;
}
/* scroll bar  */
::-webkit-scrollbar{
  background-color: transparent;
}
::-webkit-scrollbar-thumb{
  background-color: #01301C;
  border-radius: 1rem;
  width: 8px !important; /* Adjust the width as needed */
  height: 4rem !important; /* Adjust the height as needed */
}

/* reset alert */
 
#resetAlert{
  background-color: #262626;
  color: rgb(255, 94, 94);
  border: none;
  font-size: 1rem;

}
#Cancel{
  background-color: #262626;
  color: whitesmoke;
  border: none;
  font-size: 1rem;
}

#alertCard {
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #262626;
  border-radius: 1rem;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: none;
}
.alertContent{
  user-select: none;
  color: whitesmoke;
}
.alertContent h3{
  margin-bottom: 1rem;
}
.alertContent p{
  font-size: large;
  margin: 1rem;
}
p span{
  margin: 0.7rem;
  font-size: medium;
  font-weight: 300;
}
#alertOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity to control the blur */
  backdrop-filter: blur(5px); /* Adjust the blur amount as needed */
  z-index: 888; /* Ensure the overlay is on top of other elements */
  display: none;
}

.alertContent {
  text-align: center;
}

/* making it responsive */
@media (max-width: 768px) {
  #alertCard {
    width: 80%;
    max-width: 400px;
  }
}

@media (min-width: 769px) {
  #alertCard {
    width: 60%;
    max-width: 600px;
  }
}