/* Animations woohoo */

/* Rotation animation */
/* Solution found on StackOverflow: https://stackoverflow.com/questions/16771225/css3-rotate-animation#16771693 */
@keyframes rotation {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@font-face {
  font-family: 'Rajdhani-SemiBold';
  src: url('../fonts/Rajdhani-SemiBold.eot');
  src: url('../fonts/Rajdhani-SemiBold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Rajdhani-SemiBold.svg#Rajdhani-SemiBold') format('svg'),
  url('../fonts/Rajdhani-SemiBold.ttf') format('truetype'),
  url('../fonts/Rajdhani-SemiBold.woff') format('woff'),
  url('../fonts/Rajdhani-SemiBold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* Body */
/* Solution for disabling text selection found on StackOverflow:
https://stackoverflow.com/questions/3779534/how-do-i-disable-text-selection-with-css-or-javascript */
body {
  background: rgb(50,77,106);
  background: linear-gradient(90deg, rgba(50,77,106,1) 0%, rgba(41,54,71,1) 50%, rgba(23,25,24,1) 100%);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;
}

.gameFullContent {
  width: 100%;
  display: flex;
}

/* Left Container */
/* just a placeholder atm */
.leftContainer {
  width: calc(100% * 0.25);
  height: 100%;
  max-height: 96vh;
  overflow-y: auto;
  overflow-x: visible;
}

.version {
  font-family: Rajdhani-SemiBold,sans-serif;
  color: white;
  font-size: 15pt;
  text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black,
  -1px -1px 1px black;
}

.resetButton {
  font-weight: bold;
  outline: 3px solid #7c7072;
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 9%;
  height: 4%;
  border: 1px solid black;
  font-size: 12pt;
  font-family: Rajdhani-SemiBold,sans-serif;
  background: rgb(84,33,29);
  background: linear-gradient(90deg, rgba(84,33,29,1) 0%, rgba(66,31,29,1) 50%, rgba(23,22,18,1) 100%);
  text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black,
  -1px -1px 1px black;
  color: white;
  cursor: pointer;
}

/* Main Container */
/* THE BITCOIN IMAGE */
.mainGameContent {
  width: calc(100% * 0.5);
}

/* Right Container */
/* All items which you can buy */
.rightContainer {
  width: calc(100% * 0.25);
  max-height: 96vh;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.bitcoinAmountDisplay {
  text-align: left;
  font-family: Rajdhani-SemiBold,sans-serif;
  font-size: 45pt;
  color: #5ed4fa;
  padding-left: 10%;

  margin: 20px 0 0 0px;
}
.satoshiAmountDisplay {
  text-align: left;
  font-family: Rajdhani-SemiBold,sans-serif;
  font-size: 15pt;
  color: white;
  padding-left: 10%;
  text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black,
    -1px -1px 1px black;
  margin: 0 0 -15px 0px;
}
.bSecRate {
  text-align: left;
  font-family: Rajdhani-SemiBold,sans-serif;
  font-size: 25pt;
  color: white;
  padding-left: 10%;
  text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black,
    -1px -1px 1px black;
}

/* BITCOIN */
.bitcoin {
  width: 25%;
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  margin: 0 auto;
  top: 25%;
  transition: width 0.2s ease-in-out, top 0.2s ease-in-out;
  animation: rotation 20s linear infinite;
  border-radius: 500px;
  -webkit-user-drag: none;
}

.bitcoin:hover {
  width: 27%;
  top: 23%;
  transition: width 0.2s ease-in-out, top 0.2s ease-in-out;
  cursor: pointer;
}
.bitcoin:active {
  width: 23%;
  top: 27%;
  transition: width 0.2s ease-in-out, top 0.2s ease-in-out;
}

/* Item list */
.purchaseList {
  list-style-type: none;
  font-family: Rajdhani-SemiBold,sans-serif;
  margin: 0;
  padding-right: 20px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* Item list item */
.purchaseItem {
  position: relative;
  width: 99%;
  outline: 3px solid #919297;
  border-style: double;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  padding-left: 10px;
  background: rgb(50,77,106);
  background: linear-gradient(90deg, rgba(50,77,106,1) 0%, rgba(41,54,71,1) 50%, rgba(23,25,24,1) 100%);
  overflow: auto;
  margin:0 0 10px 0;
}
.purchaseItem:hover {
  background: rgb(50,77,106);
  background: linear-gradient(90deg, rgba(50,77,106,1) 0%, rgba(41,54,71,1) 50%, rgba(23,25,24,1) 100%);
  cursor: pointer;
  overflow: auto;
}
.amountOfItem {

  text-align: left;
  font-size: 15pt;
  margin-right: 15px;
  color: white;
  text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black,
  -1px -1px 1px black;

}
.itemHeadline {

  font-size: 20pt;
  font-weight: bold;
  margin-bottom: 0px;
  margin-top: 10px;
  text-align: left;
  width: fit-content;
  color: black;
  overflow-x: visible;

}

.purchaseImage {
  height: auto;
  width: auto;
  max-height: 150px;
  max-width: 150px;
  float: right;
  padding-bottom: 0;

}
.itemPrice {
  text-align: left;
  font-size: 15pt;
  color: white;
  text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black,
  -1px -1px 1px black;
}

.modal {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  -o-user-select: text;
  user-select: text;

  overflow: auto;
  font-family: Rajdhani-SemiBold,sans-serif;
  display: none;
  position: fixed;
  z-index: 1;
  width: auto;
  height: 20%;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  border-right: 3px solid black;
  border-left: 3px solid black;
  padding-left: 10px;
  background: rgb(121,212,249);
  background: linear-gradient(90deg, rgba(121,212,249,1) 0%, rgba(78,132,220,1) 50%, rgba(56,90,204,1) 100%);
}

.modal-content {
  font-size: 20pt;
  font-weight: bold;
  margin-bottom: 0px;
  margin-top: 10px;
  color: black;
}

.close {
  display: block;
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: auto;
  height: auto;
  padding: 2px;
  border: 3px solid black;
  font-size: 20pt;
  font-family: Rajdhani-SemiBold,sans-serif;
  background: rgb(219,237,244);
  background: linear-gradient(90deg, rgba(219,237,244,1) 0%, rgba(170,185,196,1) 50%, rgba(123,135,150,1) 100%);
  text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black,
  -1px -1px 1px black;
  color: white;
  cursor: pointer;
}

.input {

  font-size: 20pt;
  width: 90%;
  height: auto;
  margin: 8px 0;
  box-sizing: border-box;
}

.lbmodal {
  font-family: Rajdhani-SemiBold,sans-serif;
  display: none;
  position: fixed;
  z-index: 1;
  width: auto;
  min-width: 20%;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
  border-right: 3px solid white;
  border-left: 3px solid white;
  padding-left: 10px;
  background: rgb(121,212,249);
  background: linear-gradient(90deg, rgba(121,212,249,1) 0%, rgba(78,132,220,1) 50%, rgba(56,90,204,1) 100%);
  overflow: auto;
  height: auto;
}

.lbButton{
  font-weight: bold;
  outline: 3px solid #7c7072;
  position: absolute;
  bottom: 5%;
  left: 5px;
  width: 9%;
  height: 4%;
  border: 1px solid black;
  font-size: 12pt;
  font-family: Rajdhani-SemiBold,sans-serif;
  background: rgb(84,33,29);
  background: linear-gradient(90deg, rgba(84,33,29,1) 0%, rgba(66,31,29,1) 50%, rgba(23,22,18,1) 100%);
  text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black,
  -1px -1px 1px black;
  color: white;
  cursor: pointer;
  display: none;
}

.lbClose {

  z-index: 2;
  width: fit-content;
  height: auto;
  padding: 2px;
  border: 3px solid black;
  font-size: 20pt;
  font-family: Rajdhani-SemiBold,sans-serif;
  background: rgb(219,237,244);
  background: linear-gradient(90deg, rgba(219,237,244,1) 0%, rgba(170,185,196,1) 50%, rgba(123,135,150,1) 100%);
  text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black,
  -1px -1px 1px black;
  color: white;
  cursor: pointer;
  display: none;

  margin:0 0 2px 0;
}

.lbLoading {
  display: none;
  font-family: Rajdhani-SemiBold,sans-serif;
  font-size: 20pt;
  color: white;
  float: right;
  margin-right: 5px;
}

.update {
  font-size: 20pt;
  display: block;
  font-family: Rajdhani-SemiBold,sans-serif;
  color: white;
  font-weight: bold;
  text-align:right;
  padding-right: 20px;
}

.lbHeadline {
  font-size: 20pt;
  font-weight: bold;
  margin-bottom: 0px;
  margin-top: 10px;
  text-align: left;
  width: fit-content;
  color: black;
}

.reflinkButton {
  font-weight: bold;
  outline: 3px solid #7c7072;
  position: absolute;
  bottom: 9.5%;

  left: 5px;
  width: 9%;
  height: 4%;
  border: 1px solid black;
  font-size: 12pt;
  font-family: Rajdhani-SemiBold,sans-serif;
  background: rgb(84,33,29);
  background: linear-gradient(90deg, rgba(84,33,29,1) 0%, rgba(66,31,29,1) 50%, rgba(23,22,18,1) 100%);
  text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black,
  -1px -1px 1px black;
  color: white;
  cursor: pointer;
  display: none;
}

.purchaseItemUltimate {
  position: relative;
  width: 99%;
  outline: 3px solid #919297;
  border-style: double;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  padding-left: 10px;
  background: rgb(252,243,196);
  background: linear-gradient(90deg, rgba(252,243,196,1) 0%, rgba(237,185,89,1) 50%, rgba(228,149,23,1) 100%);
  overflow: auto;
  margin:0 0 10px 0;
}
.purchaseItemUltimate:hover {
  background: rgb(252,243,196);
  background: linear-gradient(90deg, rgba(252,243,196,1) 0%, rgba(237,185,89,1) 50%, rgba(228,149,23,1) 100%);
  cursor: pointer;
  overflow: auto;
}

.purchaseItemCommon {
  position: relative;
  width: 99%;
  outline: 3px solid #919297;
  border-style: double;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  padding-left: 10px;
  background: rgb(121,212,249);
  background: linear-gradient(90deg, rgba(121,212,249,1) 0%, rgba(78,132,220,1) 50%, rgba(56,90,204,1) 100%);
  overflow: auto;
  margin:0 0 10px 0;
}
.purchaseItemCommon:hover {
  background: rgb(121,212,249);
  background: linear-gradient(90deg, rgba(121,212,249,1) 0%, rgba(78,132,220,1) 50%, rgba(56,90,204,1) 100%);
  cursor: pointer;
  overflow: auto;
}

.purchaseItemLegendary {
  position: relative;
  width: 99%;
  outline: 3px solid #919297;
  border-style: double;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  padding-left: 10px;
  background: rgb(219,237,244);
  background: linear-gradient(90deg, rgba(219,237,244,1) 0%, rgba(170,185,196,1) 50%, rgba(123,135,150,1) 100%);
  overflow: auto;
  margin:0 0 10px 0;
}
.purchaseItemLegendary:hover {
  background: rgb(219,237,244);
  background: linear-gradient(90deg, rgba(219,237,244,1) 0%, rgba(170,185,196,1) 50%, rgba(123,135,150,1) 100%);
  cursor: pointer;
  overflow: auto;
}

.purchaseItemRare {
  position: relative;
  width: 99%;
  outline: 3px solid #919297;
  border-style: double;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  padding-left: 10px;
  background: rgb(219,240,201);
  background: linear-gradient(90deg, rgba(219,240,201,1) 0%, rgba(116,198,137,1) 50%, rgba(19,158,77,1) 100%);
  overflow: auto;
  margin:0 0 10px 0;
}
.purchaseItemRare:hover {
  background: rgb(219,240,201);
  background: linear-gradient(90deg, rgba(219,240,201,1) 0%, rgba(116,198,137,1) 50%, rgba(19,158,77,1) 100%);
  cursor: pointer;
  overflow: auto;
}

.w3-animate-bottom {
  animation: floatup 1s forwards;
}

@keyframes floatup {
  from {transform: translateY(0);}
  to {transform: translateY(-100px);}
}

p {
  margin-bottom: 5px;
  margin-top: 5px;
}



/* Optimization for smaller screens */

@media screen and (max-width: 1028px) {
  /* BITCOIN */
  .bitcoin {
    width: 35%;
    display: block;
    position: absolute;
    left: 30%;
    right: 30%;
    margin: 0 auto;
    top: 15%;
    transition: width 0.2s ease-in-out, top 0.2s ease-in-out;
    animation: rotation 20s linear infinite;
    border-radius: 500px;
  }
  .bitcoin:hover {
    width: 37%;
    top: 13%;
    transition: width 0.2s ease-in-out, top 0.2s ease-in-out;
    cursor: pointer;
  }
  .bitcoin:active {
    width: 33%;
    top: 17%;
    transition: width 0.2s ease-in-out, top 0.2s ease-in-out;
  }
  .rightContainer {
    width: 99%;
    max-height: 96vh;
    overflow-y: auto;
    overflow-x: hidden;
    height: 50%;
    position: absolute;
    bottom: 0;
  }
  .resetButton {
    margin-right: 10px;
    top: 10px;
    left: 85%;
    width: 12%;
    height: 3%;
    border: 3px solid black;
    font-size: 12pt;
    font-family: Rajdhani-SemiBold,sans-serif;
    background: rgb(84,33,29);
    background: linear-gradient(90deg, rgba(84,33,29,1) 0%, rgba(66,31,29,1) 50%, rgba(23,22,18,1) 100%);
    color: white;
    cursor: pointer;
  }
  .leftContainer{
    width: 30%;
  }
  .mainGameContent {
    width: 40%;
  }
  .lbButton {
    margin-right: 10px;
    top: 5%;
    left: 85%;
    width: 12%;
    height: 3%;
    border: 3px solid black;
    font-size: 12pt;
    font-family: Rajdhani-SemiBold,sans-serif;
    background: rgb(84,33,29);
    background: linear-gradient(90deg, rgba(84,33,29,1) 0%, rgba(66,31,29,1) 50%, rgba(23,22,18,1) 100%);
    color: white;
    cursor: pointer;
  }
  .lbmodal {
    font-size: 50pt;
    width: 99%;
    height: 99%;
  }
  .modal {
    font-size: 50pt;
    width: 99%;
    height: 99%;
  }
  .modal-content {
    font-size: 50pt;
  }
  .close {
    font-size: 50pt;
  }
  .lbLoading {
    font-size: 50pt;
  }
  .lbHeadline {
    font-size: 50pt;
  }
  .lbClose {
    font-size: 50pt;
  }
  .reflinkButton {
    margin-right: 10px;
    top: 9.5%;
    left: 85%;
    width: 12%;
    height: 3%;
    border: 3px solid black;
    font-size: 12pt;
    font-family: Rajdhani-SemiBold,sans-serif;
    background: rgb(84,33,29);
    background: linear-gradient(90deg, rgba(84,33,29,1) 0%, rgba(66,31,29,1) 50%, rgba(23,22,18,1) 100%);
    color: white;
    cursor: pointer;
  }
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

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

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

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