/* ------------------- Global Style ------------------ */

html{
  background-color: darkgray;
}

/* ------------------- Navbar ------------------ */

#btn-mintpixel{
  font-weight: bold; 
  font-size: large;
}

#my-wallet{
  background-color: lightcoral; /* Green */
  border: none;
  color: white;
  padding: 5px 10px;
  border-radius: 10px;
  display: inline-block;
  cursor: default;
  font-weight: bold;
  margin-right: 10px;
}

#btn-logout{
  margin-right: 10px;
}

#btn-login{
  margin-right: 10px;
}

.btn-loginout{
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 5px 10px;
  border-radius: 10px;
  transition-duration: 0.2s;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
}
.btn-loginout:hover {
  background-color: chocolate;
}
.btn-loginout:active {
  background-color: pink;
  transform: translateY(4px);
}

/* ------------------- Canvas ------------------ */

.canvas-div{
  background-color: darkgray;    
  position: relative;
  /* width: 1000px;
  height: 1000px; */
}

#canvas{  
  background-color: white;
  border: 5px solid black;
  margin-top: 10px;    
  margin-bottom: 100px;
  cursor: crosshair;
  /* touch-action: none; */
}


#mytooltip {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  transition: 0.2s ease;
}

#zoom-in{
  border: 5px solid black;
  position: absolute;
  background-color: white;
  top: 100px;
  display: none;
  cursor: pointer;
}

#span-zoom-explain{
  position: absolute;
  top: 620px;
  cursor: default;
  pointer-events: none;
  visibility: hidden;
}

/* ------------------- FAQs, Acknowledgments, and footer ------------------ */

#faqs{
  background-color: darkgray;
}

#ack{
  background-color: darkgray;
}

/* ------------------- Media queries ------------------ */

@media screen and (max-width: 1050px){
  #canvas-div{
    width: 1100px;
  }
  #my-navbar{
    width: 1100px;
  }
  #faqs{
    width: 1100px;
  }
  #ack{
    width: 1100px;
  }
  #foot{
    width: 1100px;
  }
}

@media screen and (max-width: 1147px){
  #btn-mintpixel{
    font-size: 0.95rem;
  }
  #dropdownMenuButtonR{
    font-size: 0.9rem;
  }
  .btn-loginout{
    font-size: 0.9rem;
    padding: 3px 5px;
  }
  #my-wallet{
    font-size: 0.80rem;
    padding: 3px 5px;
  }
}