@font-face {
  font-family: "vulf mono";
  src: local("Vulf mono"),
   url("vulf-mono.ttf") format("truetype");
  font-weight: bold;
  }

* {
  margin: 0;
  /*affects all styles accross the app! @TODO: REWRITE THIS #important */
  font-family: "vulf mono";
}
body {
  color: var(--clr-gray);
  font-family: "vulf mono";
  background-color: #e9d6bf;
}

div {
  -webkit-tap-highlight-color: transparent;
}

#donateButton {
  transition: left 0.5s ease, top 0.5s ease;
}

a {
 color: #f09642;
 -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a:active {
  background-color: transparent;
  outline: none;
  color: inherit; /* or any other color you prefer */
}

a:focus, button:focus {
  outline: none;
  box-shadow: none; /* In case the browser uses box-shadow for focus */
}

.top-0-container {
  top: 40px !important;
}

.btn-round {
  overflow: hidden;
  text-align: center;
  position: relative;
  background-image: URL('https://res.cloudinary.com/zenberry/image/upload/v1659934646/EPK/Blank_button_bjerck.svg');
  background-size: 250px;
  background-repeat: no-repeat;
  background-position: center;
  height: 250px;
  width: 250px;
  align-self: center;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn-round:active {
  background-image: URL('https://res.cloudinary.com/zenberry/image/upload/v1691793164/pressed_pqxjlh.svg');
  background-size: 190px;
  outline: none;
  box-shadow: none;
}

.btn-sm:active {
  background-image: URL('https://res.cloudinary.com/zenberry/image/upload/v1691793164/pressed_pqxjlh.svg');
  background-size: 42px;
}

.btn-responsive {
  background-size: 30vw !important;
  height: 30vw !important;
  width: 30vw !important;
  font-size: clamp(10px, 1.5vw, 16px) !important;
  outline: none;
  box-shadow: none;
}

.btn-responsive:active {
  background-image: URL('https://res.cloudinary.com/zenberry/image/upload/v1691793164/pressed_pqxjlh.svg');
  background-size: 22.5vw !important;
}

.btn-round .text {
  position: absolute;
  z-index: 999;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  top: 40%;
  /* Adjust this value to move the positioned div up and down */
  font-family: Arial, sans-serif;
  color: #fff;
  width: 60%;
  /* Set the width of the positioned div */
}

.btn-sm {
  height: 50px;
  width: 50px;
  background-size: 50px;
}

.text-center {
  display: flex;
  justify-content: center;
  font-size: 20px;
}

.plain {
  text-decoration: none;
  color: black;
}

.header {
  display: grid;
  justify-content: center;
  justify-self: center;
  align-items: center;
  margin-bottom: 40px;
  font-size: 24px;
  margin-left: 1em;
}