@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/montserrat/v23/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aX8.ttf) format('truetype');
}

.btn-dogecoin {
  font-size: 14px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: 'Montserrat';
  width: 160px;
  height: 45px;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #f8e9c0;
  background-image: linear-gradient(#f4ca5d, #f4b840);
  color: #333;
  text-transform: uppercase;
  transition: width 0.35s ease;
}
.btn-dogecoin span {
  display: block;
}
.btn-dogecoin .currency {
  font-size: 1.1em;
}
.btn-dogecoin .currency:before {
  content: 'Pay with';
  font-size: 0.65em;
  display: block;
}
.btn-dogecoin .symbol {
  transition: all 0.2s ease;
  font-size: 2.3em;
  border: 2px solid #333;
  border-radius: 360px;
  padding: 4px;
  width: 33px;
  height: 33px;
  text-align: center;
  line-height: 1em;
  margin-right: 5px;
}
.btn-dogecoin p {
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
}
.btn-dogecoin .symbol,
.btn-dogecoin p {
  display: inline-block;
  white-space: nowrap;
}
.btn-dogecoin:hover p {
  transform: translateX(120px);
}
.btn-dogecoin:hover .symbol {
  transform: translateX(60px);
}
.btn-dogecoin.opened {
  width: 390px;
}
.btn-dogecoin.opened:hover p {
  transform: inherit;
  cursor: text;
}
.btn-dogecoin.opened:hover .symbol {
  transform: inherit;
}
.btn-dogecoin.opened .currency {
  text-transform: initial;
}
.btn-dogecoin.opened .currency:before {
  content: 'Thank you !';
  text-transform: uppercase;
}
.btn-dogecoin.donate .currency:before {
  content: 'Make a donation';
  font-size: 0.65em;
  display: block;
}
.btn-dogecoin.donate.opened .currency:before {
  content: 'wow such generous ! (dogecoin network)';
}
.btn-dogecoin.black {
  color: #fbbc3a;
  border-color: #323520;
  background-image: none;
  background-color: #272515;
}
.btn-dogecoin.black .symbol {
  border-color: #fbbc3a;
}
.btn-dogecoin.black.opened:after {
  background-color: #272515;
  border-color: #323520;
}

.btn-bitcoin {
  font-size: 14px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: 'Montserrat';
  width: 160px;
  height: 45px;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #f8e9c0;
  background-image: linear-gradient(#f4ca5d, #f4b840);
  color: #333;
  text-transform: uppercase;
  transition: width 0.35s ease;
}
.btn-bitcoin span {
  display: block;
}
.btn-bitcoin .currency {
  font-size: 1.1em;
}
.btn-bitcoin .currency:before {
  content: 'Pay with';
  font-size: 0.65em;
  display: block;
}
.btn-bitcoin .symbol {
  transition: all 0.2s ease;
  font-size: 2.3em;
  border: 2px solid #333;
  border-radius: 360px;
  padding: 4px;
  width: 33px;
  height: 33px;
  text-align: center;
  line-height: 1em;
  margin-right: 5px;
}
.btn-bitcoin p {
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
}
.btn-bitcoin .symbol,
.btn-bitcoin p {
  display: inline-block;
  white-space: nowrap;
}
.btn-bitcoin:hover p {
  transform: translateX(120px);
}
.btn-bitcoin:hover .symbol {
  transform: translateX(60px);
}
.btn-bitcoin.opened {
  width: 390px;
}
.btn-bitcoin.opened:hover p {
  transform: inherit;
  cursor: text;
}
.btn-bitcoin.opened:hover .symbol {
  transform: inherit;
}
.btn-bitcoin.opened .currency {
  text-transform: initial;
}
.btn-bitcoin.opened .currency:before {
  content: 'Thank you !';
  text-transform: uppercase;
}
.btn-bitcoin.donate .currency:before {
  content: 'Make a donation';
  font-size: 0.65em;
  display: block;
}
.btn-bitcoin.donate.opened .currency:before {
  content: 'wow such generous ! (Bitcoin network)';
}
.btn-bitcoin.black {
  color: #fbbc3a;
  border-color: #323520;
  background-image: none;
  background-color: #272515;
}
.btn-bitcoin.black .symbol {
  border-color: #fbbc3a;
}
.btn-bitcoin.black.opened:after {
  background-color: #272515;
  border-color: #323520;
}


.btn-ethereum {
  font-size: 14px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: 'Montserrat';
  width: 160px;
  height: 45px;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #f8e9c0;
  background-image: linear-gradient(#f4ca5d, #f4b840);
  color: #333;
  text-transform: uppercase;
  transition: width 0.35s ease;
}
.btn-ethereum span {
  display: block;
}
.btn-ethereum .currency {
  font-size: 1.1em;
}
.btn-ethereum .currency:before {
  content: 'Pay with';
  font-size: 0.65em;
  display: block;
}
.btn-ethereum .symbol {
  transition: all 0.2s ease;
  font-size: 2.3em;
  border: 2px solid #333;
  border-radius: 360px;
  padding: 4px;
  width: 33px;
  height: 33px;
  text-align: center;
  line-height: 1em;
  margin-right: 5px;
}
.btn-ethereum p {
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
}
.btn-ethereum .symbol,
.btn-ethereum p {
  display: inline-block;
  white-space: nowrap;
}
.btn-ethereum:hover p {
  transform: translateX(120px);
}
.btn-ethereum:hover .symbol {
  transform: translateX(60px);
}
.btn-ethereum.opened {
  width: 390px;
}
.btn-ethereum.opened:hover p {
  transform: inherit;
  cursor: text;
}
.btn-ethereum.opened:hover .symbol {
  transform: inherit;
}
.btn-ethereum.opened .currency {
  text-transform: initial;
}
.btn-ethereum.opened .currency:before {
  content: 'Thank you !';
  text-transform: uppercase;
}
.btn-ethereum.donate .currency:before {
  content: 'Make a donation';
  font-size: 0.65em;
  display: block;
}
.btn-ethereum.donate.opened .currency:before {
  content: 'wow such generous ! (ERC20 Network)';
}
.btn-ethereum.black {
  color: #fbbc3a;
  border-color: #323520;
  background-image: none;
  background-color: #272515;
}
.btn-ethereum.black .symbol {
  border-color: #fbbc3a;
}
.btn-ethereum.black.opened:after {
  background-color: #272515;
  border-color: #323520;
}


.btn-papara {
  font-size: 14px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: 'Montserrat';
  width: 160px;
  height: 45px;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #f8e9c0;
  background-image: linear-gradient(#f4ca5d, #f4b840);
  color: #333;
  text-transform: uppercase;
  transition: width 0.35s ease;
}
.btn-papara span {
  display: block;
}
.btn-papara .currency {
  font-size: 1.1em;
}
.btn-papara .currency:before {
  content: 'Pay with';
  font-size: 0.65em;
  display: block;
}
.btn-papara .symbol {
  transition: all 0.2s ease;
  font-size: 2.3em;
  border: 2px solid #333;
  border-radius: 360px;
  padding: 4px;
  width: 33px;
  height: 33px;
  text-align: center;
  line-height: 1em;
  margin-right: 5px;
}
.btn-papara p {
  transition: all 0.2s ease;
  padding: 0;
  margin: 0;
}
.btn-papara .symbol,
.btn-papara p {
  display: inline-block;
  white-space: nowrap;
}
.btn-papara:hover p {
  transform: translateX(120px);
}
.btn-papara:hover .symbol {
  transform: translateX(60px);
}
.btn-papara.opened {
  width: 390px;
}
.btn-papara.opened:hover p {
  transform: inherit;
  cursor: text;
}
.btn-papara.opened:hover .symbol {
  transform: inherit;
}
.btn-papara.opened .currency {
  text-transform: initial;
}
.btn-papara.opened .currency:before {
  content: 'Thank you !';
  text-transform: uppercase;
}
.btn-papara.donate .currency:before {
  content: 'Make a donation';
  font-size: 0.65em;
  display: block;
}
.btn-papara.donate.opened .currency:before {
  content: 'wow such generous ! (Papara number)';
}
.btn-papara.black {
  color: #fbbc3a;
  border-color: #323520;
  background-image: none;
  background-color: #272515;
}
.btn-papara.black .symbol {
  border-color: #fbbc3a;
}
.btn-papara.black.opened:after {
  background-color: #272515;
  border-color: #323520;
}

p.wow {
  text-align: center;
  font-family: 'Comic Sans MS';
}
h1 {
  font-family: 'Comic Sans MS';
  font-weight: normal;
  text-align: center;
  color: #f43780;
}
h1:nth-child(1) {
  color: #00aee6;
}

.btn-dogecoin {
  margin: 80px auto;
}
.btn-bitcoin {
  margin: 80px auto;
}
.btn-ethereum {
  margin: 80px auto;
}
.btn-papara {
  margin: 80px auto;
}

.test{
	margin: 80px auto !important;
}

.container{
  display: flex;
  justify-content: center;
  margin-bottom:-7%;
}

.coffee{
  display: flex;
  justify-content: center;
  margin-top: 7%
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 65%;
  left: 7%;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 29px;
  left: 35%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}