.menu a {
  font-weight: 100;
  padding: 5px;
}

.menu svg {
  transition: height 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

.yellow-title {
  background: black;
  color: white;
  padding: 10px;
  margin-right: -15px;
  margin-left: -15px;
  font-weight: bold;
}

.input-field .prefix {
  border-radius: 50%;
  height: 35px;
  width: 35px;
  padding: 3px;
}

body {
  background: linear-gradient(-11deg, #f5f5f4 50%, #f0efea 0);
}

.yellowStripe {
  width: 160%;
  height: 750px;
  background: linear-gradient(-35deg, gold, gold, #ffc201);
  position: fixed;
  top: -100px;
  left: -100px;
  z-index: -1;
  transform: rotate(14deg);
}

.card {
  border: 0px solid black;
}

.switch label input[type="checkbox"]:checked+.lever:after {
  /*   background:yellow;*/
}

label span:after {
  background: yellow !important;
  border: 2px solid black !important;
}

.colorOptions {
  opacity: 0.2;
  position: absolute;
  background: #FFEB3B;
  z-index: 999;
  transition: all 0.5s ease 0s;
  display: none;
  width: 330px !important;
}

.pfeil {
  width: 30px;
  height: 30px;
  position: absolute;
  background: #FFEB3B;
  left: -15px;
  transform: rotate(45deg);
}

input[type="color"] {
  border-radius: 50%;
}

.info {
  padding: 10px;
  display: flex;
}

.menu {
  z-index: 10;
}

#cardCanvas3D {
  top: 0px;
  z-index: 9;
  filter: drop-shadow(rgba(0, 255, 255, 0.5) -1px -1px 3px) drop-shadow(rgba(255, 0, 0, 0.5) 1px 1px 3px);
}

.buyPageContainer {
  margin-top: 10px;
}

.loading {
  position: absolute;
  left: 50%;
  z-index: 999;
  width: 150px;
  margin-left: -75px;
  filter: brightness(0.33) hue-rotate(330deg);
  top: 150px;
}

.business {
  font-family: "Kaushan Script", cursive;
  font-size: 20pt;
}

#qrcode {
  /* display: none; */
  width: 140px;
  height: 140px;
}

#savedCardQrCode img {
  display: inline !important;
  margin-top: 45px;
  margin-right: 20px;
  margin-left: 30px;
}

.social_icon {
  width: 50px;
  margin: 5px;
}

.selectedIcon {
  margin: 5px;
}

#optionLegend {
  font-weight: bold;
}

.file-field .file-path-wrapper {
  padding-left: 50px;
}

.cardPreviewer {
  box-shadow: 0 0 10px #7b7b7b;
  display: flex;
  align-items: center;
  justify-content: right;
  padding: 27px;
  background: #f2709c;
  /* fallback for old browsers */
  background-color: -webkit-linear-gradient(to right,
      #ff9472,
      #f2709c);
  /* Chrome 10-25, Safari 5.1-6 */
  background-color: linear-gradient(to right,
      #ff9472,
      #f2709c);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  height: 275px;
  /* 550/2 */
  width: 425px;
  /* 850/2 */
}

.priceBoxWrapper {
  display: flex;
  justify-content: space-around;
}

.priceBox {
  background: #f2709c;
  /* fallback for old browsers */
  background-color: -webkit-linear-gradient(to right,
      #ff9472,
      #f2709c);
  /* Chrome 10-25, Safari 5.1-6 */
  background-color: linear-gradient(to right,
      #ff9472,
      #f2709c);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  height: 200px;
  width: 45%;
  border-radius: 10px;
  background-image: url(https://cssgradient.io/images/css-gradient-examples-ba7f335a.svg),
    linear-gradient(to right, #ff9472, #f2709c);
  background-position-y: 0px;
  transition: background-position-y 3s;
  transform-style: preserve-3d;
  -webkit-box-shadow: 5px 5px 0px 0px #289fed, 10px 10px 0px 0px #5fb8ff,
    15px 15px 0px 0px #a1d8ff, 20px 20px 0px 0px #cae6ff,
    25px 25px 0px 0px #e1eeff, 5px 5px 15px 5px rgba(0, 0, 0, 0);
  box-shadow: 5px 5px 0px 0px #289fed, 10px 10px 0px 0px #5fb8ff,
    15px 15px 0px 0px #a1d8ff, 20px 20px 0px 0px #cae6ff,
    25px 25px 0px 0px #e1eeff, 5px 5px 15px 5px rgba(0, 0, 0, 0);
}

.bigBox {
  box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px,
    rgb(95, 184, 255) 10px 10px 0px 0px, rgb(161, 216, 255) 15px 15px 0px 0px,
    rgb(202, 230, 255) 20px 20px 0px 0px, rgb(226, 173, 189) 25px 25px 0px 0px,
    rgb(241, 115, 156) 30px 30px 0px 0px, 35px 35px 0px 0px #cae6ff;
  margin-left: -40px;
  margin-top: -10px;
}

.animatedBackground {
  background-position-y: 0px;
  animation-duration: 33s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 5px solid #00bcd4;
}

@keyframes slidein {
  from {
    background-position-y: 0px;
  }

  to {
    background-position-y: 355px;
  }
}

.priceBox span {
  height: 100% !important;
  width: 100% !important;
}

.priceBox h1 {
  color: pink;
  transform: translateZ(20px);
  color: #ffffff;
  /*https://html-css-js.com/css/generator/text-shadow/ */
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
    0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2),
    0 20px 20px rgba(0, 0, 0, 0.15);
}

.priceBox label {
  color: white;
}

.price {
  color: #ffffff;
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
    0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2),
    0 20px 20px rgba(0, 0, 0, 0.15);
}

.info_text {
  display: table;
  transform: skew(-0.06turn, 0deg);
  position: relative;
  border-bottom: 11px solid gold;
}

.randomColorBtn {
  width: auto;
  height: auto;
}

.randomColorBtn i {
  color: inherit;
}

#submit {
  transition: all 0.5s linear;
}

.rotateLoadingButton {
  animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.page-footer {
  background-color: #3f3d54;
}

.info-btn {
  width: 35px;
  padding: 0;
}

.info-btn i {
  color: #3f3d54;
}